js 動態給元素添加、移除事件的實現方法

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

/addEventListener(),removeEventListener()用於處理指定和刪除事件處理程序的操作//作用域:事件處理程序會在其所屬元素的作用域內運行//addEventListener(event,function,capture/bubble);removeEventListener(event,function,capture/bubble)//參數event如上表所示, function是要執行的函數, capture與bubble分別是W3C制定得兩種時間模式,//簡單來說capture就是從document的開始讀到最後一行, 再執行事件, 而bubble則是先尋找指定的位置再執行事件.//capture/bubble的參數是布爾值, True表示用capture, False則是bubble function addEvent() { var obj = document.getElementById("txtIataCity"); if (window.addEventListener) { //其它瀏覽器的事件代碼: Mozilla, Netscape, Firefox //添加的事件的順序即執行順序//注意用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')}); } }

頁面加載的時候調用上述方法給input綁定事件，測試添加成功，可是移除始終不成功。於是網上找參考資料

//通過addEventListener()添加的事件只能通過removeEventListener()來移除. 是這樣做的啊下面還有一句：//移除時addEventListener()添加的匿名函數將無法移除問題找到了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 //添加的事件的順序即執行順序//注意用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')); } }

於是乎執行ie提示： 類型不匹配看樣子是不支持帶參數的函數於是再次將函數封裝成無參形式傳入

執行，添加成功，移除還是失敗。在網上找了半天差不多都是這樣寫的都成功了，不知道為什麼我的就移除不了。

後來看頁面中本來就引用了jquery 於是採用jquery的bind 和unbind 事件一次成功。

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

以上這篇js 動態給元素添加、移除事件的實現方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。