addEventListener()與removeEventListener()用於追加事件和刪除追加。所有的DOM節點中都包含這兩種方法，並且它們都接受3個引數：要處理的事件名、作為事件處理程式的函式和一個布林值。

最後這個布林值引數是true，表示在捕獲階段呼叫事件處理程式；如果是false，表示在冒泡階段呼叫事件處理程式。預設為false;

要在按鈕上為click事件新增事件處理程式，可以使用下列程式碼：

1 var btn = document.getElementById("myBtn");
2 btn.addEventListener("click",function () {
3  alert(this.id);
4 },false);

使用DOM2級方法新增事件處理程式的主要好處是可以新增多個事件處理程式。來看下面的例子：

var btn = document.getElementById("myBtn");
btn.addEventListener("click",function () {
 alert(this.id);
},false);
btn.addEventListener("click",function () {
 alert("Hello World");
},false);

通過addEventListener()新增的事件處理程式只能使用removeEventListener()來移除；移除時傳入的引數與新增處理程式時使用的引數相同。這也意味著通過addEventListener()新增的匿名函式無法移除，如下面的例子所示：

var btn = document.getElementById("myBtn");
btn.addEventListener("click",false);
btn.removeEventListener("click",function () { //無效！
 alert(this.id);
},false);

在這個例子中，removeEventListener無法刪除addEventListener所追加的事件，因為兩個方法並不相等，記憶體地址已經是不同的，如下面的例子所示：

var btn = document.getElementById("myBtn");
var handler = function () {
  alert(this.id);
 };
btn.addEventListener("click",handler,false); //有效！

重寫後的這個例子沒有問題，是因為在addEventListener()和removeEventListener()中用來相同的函式。

大多數情況下，都是將事件處理程式新增到事件流的冒泡階段，這樣可以最大限度地相容各種瀏覽器。最好只在需要在是時間到達目標之前截獲它的時候將事件處理程式新增到捕獲階段。如果不是特別需要，我們不建議在事件捕獲階段註冊事件處理程式；

親測：

方法的記憶體地址十分的重要，一定要相同才可以刪除；試過遇到的坑:

var clickFun = null;
aa = function(){
 clickFun = function(){
  alert("1")
 }
 window.removeEventListener("click",clickFun,false)
 window.addEventListener("click",false)
}
setInterval(function(){
 aa()
},2000)

需求,需要不斷地往一個function裡面塞資料，裡面會有追加，如果不刪除了話，會一直追加上去，不環保並且耗記憶體，必須要刪掉追加；然而像上面這樣寫的話，由於removeEventListener和addEventListener裡面的clickFun記憶體不相等，導致刪除不成功；調整如下：

var clickFun = null;
aa = function(){
 ！clickFun && （window.removeEventListener("click",false)）；
 clickFun = function(){
  alert("1")
 }
 window.addEventListener("click",2000)

確保刪除的是同一個記憶體的方法

到此這篇關於addEventListener()和removeEventListener()追加事件和刪除追加事件的文章就介紹到這了,更多相關addEventListener()和removeEventListener()追加事件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！