addEventListener()與removeEventListener()用于追加事件和刪除追加。所有的DOM節點中都包含這兩種方法，并且它們都接受3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。
最后這個布爾值參數是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。默認為false;
要在按鈕上為click事件添加事件處理程序，可以使用下列代碼：
|
1
2
3
4
|
1 var btn = document.getElementById("myBtn");2 btn.addEventListener("click", function () {3 alert(this.id);4 }, false); |
使用DOM2級方法添加事件處理程序的主要好處是可以添加多個事件處理程序。來看下面的例子：
|
1
2
3
4
5
6
7
|
var btn = document.getElementById("myBtn");btn.addEventListener("click", function () { alert(this.id);}, false);btn.addEventListener("click", function () { alert("Hello World");}, false); |
通過addEventListener()添加的事件處理程序只能使用removeEventListener()來移除；移除時傳入的參數與添加處理程序時使用的參數相同。這也意味著通過addEventListener()添加的匿名函數無法移除，如下面的例子所示：
|
1
2
3
4
5
6
7
|
var btn = document.getElementById("myBtn");btn.addEventListener("click", function () { alert(this.id);}, false);btn.removeEventListener("click", function () { //無效！ alert(this.id);}, false); |
在這個例子中，removeEventListener無法刪除addEventListener所追加的事件，因為兩個方法并不相等，內存地址已經是不同的，如下面的例子所示：
|
1
2
3
4
5
6
|
var btn = document.getElementById("myBtn");var handler = function () { alert(this.id); };btn.addEventListener("click", handler, false);btn.removeEventListener("click", handler, false); //有效！ |
重寫后的這個例子沒有問題，是因為在addEventListener()和removeEventListener()中用來相同的函數。
大多數情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度地兼容各種瀏覽器。最好只在需要在是時間到達目標之前截獲它的時候將事件處理程序添加到捕獲階段。如果不是特別需要，我們不建議在事件捕獲階段注冊事件處理程序；
親測：
方法的內存地址十分的重要，一定要相同才可以刪除；試過遇到的坑:
|
1
2
3
4
5
6
7
8
9
10
11
|
var clickFun = null;aa = function(){ clickFun = function(){ alert("1") } window.removeEventListener("click",clickFun,false) window.addEventListener("click",clickFun,false)}setInterval(function(){ aa()},2000) |
需求,需要不斷地往一個function里面塞數據，里面會有追加，如果不刪除了話，會一直追加上去，不環保并且耗內存，必須要刪掉追加；然而像上面這樣寫的話，由于removeEventListener和addEventListener里面的clickFun內存不相等，導致刪除不成功；調整如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
var clickFun = null;aa = function(){ ！clickFun && （window.removeEventListener("click",clickFun,false)）； clickFun = function(){ alert("1") } window.addEventListener("click",clickFun,false)}setInterval(function(){ aa()},2000) |
確保刪除的是同一個內存的方法
到此這篇關于addEventListener()和removeEventListener()追加事件和刪除追加事件的文章就介紹到這了,更多相關addEventListener()和removeEventListener()追加事件內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://www.cnblogs.com/Sarah119/p/7825265.html
