欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js 動態(tài)給元素添加、移除事件的實現(xiàn)方法

 更新時間:2016年07月19日 11:26:14   投稿:jingxian  
下面小編就為大家?guī)硪黄猨s 動態(tài)給元素添加、移除事件的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

最近項目中要要到 js動態(tài)給給元素綁定事件,剛好之前沒用到過這些,順便學習一下,于是google了一下 事件,寫了如下兩個事件 一個添加事件 ,一個是移除事件

/addEventListener(),removeEventListener()用于處理指定和刪除事件處理程序的操作
//作用域:事件處理程序會在其所屬元素的作用域內(nèi)運行
//addEventListener(event,function,capture/bubble);removeEventListener(event,function,capture/bubble)
//參數(shù)event如上表所示, function是要執(zhí)行的函數(shù), capture與bubble分別是W3C制定得兩種時間模式,
//簡單來說capture就是從document的開始讀到最后一行, 再執(zhí)行事件, 而bubble則是先尋找指定的位置再執(zhí)行事件.
//capture/bubble的參數(shù)是布爾值, True表示用capture, False則是bubble
 

 function addEvent() {

      var obj = document.getElementById("txtIataCity");

      if (window.addEventListener) {

        //其它瀏覽器的事件代碼: Mozilla, Netscape, Firefox

        //添加的事件的順序即執(zhí)行順序 //注意用 addEventListener 添加帶on的事件,不用加on

        obj.addEventListener('focus', function(){test('aa')} , false);

      }

      else {

        //IE 的事件代碼 在原先事件上添加 add 方法

        obj.attachEvent('onfocus', function(){test('aa')});

      }

    }

 

    function removeEvnent() {

      var obj = document.getElementById("txtIataCity");

      if (window.removeEventListener) {

        obj.removeEventListener('focus', function(){test('aa')}, false);

      }

      else {

        obj.detachEvent('onfocus', function(){test('aa')});

      }

    }

頁面加載的時候調(diào)用上述方法給input綁定事件,測試添加成功,可是移除始終不成功。于是網(wǎng)上找參考資料

//通過addEventListener()添加的事件只能通過removeEventListener()來移除. 是這樣做的啊 下面還有一句://移除時addEventListener()添加的匿名函數(shù)將無法移除 問題找到了 function(){test('aa')}//無效,因為傳入addEventListener()和removeEventListener()的方法不是同一個方法于是將test('aa') 提出來 寫成function test(msg){ alert(msg)}改寫成 function addEvent() {      var obj = document.getElementById("txtIataCity");

      if (window.addEventListener) {

        //其它瀏覽器的事件代碼: Mozilla, Netscape, Firefox

        //添加的事件的順序即執(zhí)行順序 //注意用 addEventListener 添加帶on的事件,不用加on

        obj.addEventListener('focus', test('msg')} , false);

      }

      else {

        //IE 的事件代碼 在原先事件上添加 add 方法

        obj.attachEvent('onfocus', test('msg')});

      }

    }

 

    function removeEvnent() {

      var obj = document.getElementById("txtIataCity");

      if (window.removeEventListener) {

        obj.removeEventListener('focus',test('msg')}, false);

      }

      else {

        obj.detachEvent('onfocus',test('msg'));

      }

    }

于是乎執(zhí)行 ie提示: 類型不匹配  看樣子是不支持帶參數(shù)的函數(shù) 于是再次將函數(shù)封裝成無參形式傳入

執(zhí)行,添加成功,移除還是失敗。在網(wǎng)上找了半天 差不多都是這樣寫的 都成功了,不知道為什么我的就移除不了。

后來看頁面中本來就引用了jquery 于是采用jquery的bind 和unbind 事件 一次成功。

唉,等項目完了 把這個問題解決掉。

以上這篇js 動態(tài)給元素添加、移除事件的實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • js實現(xiàn)點擊選項置頂動畫效果

    js實現(xiàn)點擊選項置頂動畫效果

    這篇文章主要為大家詳細介紹了js實現(xiàn)點擊選項置頂動畫效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • 基于javascript實現(xiàn)九九乘法表

    基于javascript實現(xiàn)九九乘法表

    這篇文章主要為大家詳細介紹了基于javascript實現(xiàn)九九乘法表的相關(guān)資料,感興趣的小伙伴們可以參考一下
    2016-03-03
  • 在JS循環(huán)中使用async/await的方法

    在JS循環(huán)中使用async/await的方法

    async / await是ES7的重要特性之一,也是目前社區(qū)里公認的優(yōu)秀異步解決方案。這篇文章主要介紹了在JS循環(huán)中使用async/await的方法,需要的朋友可以參考下
    2018-10-10
  • webpack熱模塊替換(HMR)/熱更新的方法

    webpack熱模塊替換(HMR)/熱更新的方法

    模塊熱替換(HMR)的作用是,在應(yīng)用運行時,無需刷新頁面,便能替換、增加、刪除必要的模塊,本篇文章主要介紹了webpack熱模塊替換(HMR)/熱更新的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • js字符串操作總結(jié)(必看篇)

    js字符串操作總結(jié)(必看篇)

    下面小編就為大家?guī)硪黄猨s字符串操作總結(jié)(必看篇)。小編覺得挺不錯的,希望對大家有所幫助。一起跟隨小編過來看看吧,祝大家游戲愉快哦
    2016-11-11
  • javascript URL錨點取值方法

    javascript URL錨點取值方法

    url取值的比較不錯的思路,一般都是這樣的話,或直接先將?替換成統(tǒng)計分隔符,js數(shù)組一定要特別熟悉。
    2009-02-02
  • 基于Nuxt.js項目的服務(wù)端性能優(yōu)化與錯誤檢測(容錯處理)

    基于Nuxt.js項目的服務(wù)端性能優(yōu)化與錯誤檢測(容錯處理)

    這篇文章主要介紹了基于Nuxt.js項目的服務(wù)端性能優(yōu)化與錯誤檢測(容錯處理),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-10-10
  • js實現(xiàn)右下角可關(guān)閉最小化div(可用于展示推薦內(nèi)容)

    js實現(xiàn)右下角可關(guān)閉最小化div(可用于展示推薦內(nèi)容)

    使用Javascript實現(xiàn)右下角可關(guān)閉最小化div,可以用于展示推薦內(nèi)容,完整源代碼如下,感興趣的各位可以參下哈,希望對大家有所幫助
    2013-06-06
  • javascript中window.open在原來的窗口中打開新的窗口(不同名)

    javascript中window.open在原來的窗口中打開新的窗口(不同名)

    本文給大家介紹使用window.open在原來的窗口中打開新的窗口,涉及到win.open新窗口相關(guān)知識,對本文感興趣的朋友參考下
    2015-11-11
  • JS實現(xiàn)向表格中動態(tài)添加行的方法

    JS實現(xiàn)向表格中動態(tài)添加行的方法

    這篇文章主要介紹了JS實現(xiàn)向表格中動態(tài)添加行的方法,涉及javascript針對表格行的動態(tài)添加技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03

最新評論