快捷導(dǎo)航

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

更新時(shí)間：2016年07月19日 11:26:14 投稿：jingxian

下面小編就為大家?guī)?lái)一篇js 動(dòng)態(tài)給元素添加、移除事件的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

最近項(xiàng)目中要要到 js動(dòng)態(tài)給給元素綁定事件，剛好之前沒(méi)用到過(guò)這些，順便學(xué)習(xí)一下，于是google了一下事件，寫(xiě)了如下兩個(gè)事件一個(gè)添加事件，一個(gè)是移除事件

/addEventListener(),removeEventListener()用于處理指定和刪除事件處理程序的操作
//作用域:事件處理程序會(huì)在其所屬元素的作用域內(nèi)運(yùn)行
//addEventListener(event,function,capture/bubble);removeEventListener(event,function,capture/bubble)
//參數(shù)event如上表所示, function是要執(zhí)行的函數(shù), capture與bubble分別是W3C制定得兩種時(shí)間模式,
//簡(jiǎn)單來(lái)說(shuō)capture就是從document的開(kāi)始讀到最后一行, 再執(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')});

      }

    }

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

//通過(guò)addEventListener()添加的事件只能通過(guò)removeEventListener()來(lái)移除. 是這樣做的啊 下面還有一句：//移除時(shí)addEventListener()添加的匿名函數(shù)將無(wú)法移除 問(wèn)題找到了 function(){test('aa')}//無(wú)效,因?yàn)閭魅隺ddEventListener()和removeEventListener()的方法不是同一個(gè)方法于是將test('aa') 提出來(lái) 寫(xiě)成function test(msg){ alert(msg)}改寫(xiě)成 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提示：類(lèi)型不匹配看樣子是不支持帶參數(shù)的函數(shù) 于是再次將函數(shù)封裝成無(wú)參形式傳入

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

后來(lái)看頁(yè)面中本來(lái)就引用了jquery 于是采用jquery的bind 和unbind 事件一次成功。

唉，等項(xiàng)目完了把這個(gè)問(wèn)題解決掉。

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

您可能感興趣的文章: