addEventListener()與removeEventListener()的區別是什么

addEventListener()與removeEventListener()的區別是什么？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

addEventListener()與removeEventListener()用于處理指定和刪除事件處理程序操作。
所有的DOM節點中都包含這兩種方法，并且它們都接受3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。

最后這個布爾值參數是true，表示在捕獲階段調用事件處理程序；
如果是false（false- 默認），表示在冒泡階段調用事件處理程序。

addEventListener的參數一共有三個，語法為：
element.addEventListener(type,listener,useCapture)

下面是詳解：
1、其中element是要綁定函數的對象。
2、type是事件名稱，要注意的是"onclick"要改為"click","onblur"要改為"blur",也就是說事件名不要帶"on"。
3、listener當然就是綁定的函數了，記住不要跟括號
4、最后一個參數是個布爾值，表示該事件的響應順序,下面重點介紹一下addEventListener的第3個參數(useCapture)。

要在按鈕上為click事件添加事件處理程序，可以使用下列代碼：

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
  alert(this.id);
}, 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", function () {
   alert(this.id);
}, false);
btn.removeEventListener("click", function () { //無效！
   alert(this.id);
}, false);

在這個例子中，我使用addEventListener()添加一個事件處理程序。
雖然調用removeEventListener看似使用了相同的參數
但實際上，第二個參數與傳入addEventListener()中的是完全不同的函數。
而傳入removeEventListener()中的事件處理程序函數必須與傳入addEventListener()中的相同，

下面的例子所示：

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

重寫后的這個例子沒有問題，是因為在addEventListener()和removeEventListener()中用來相同的函數。
實驗結果是，用戶點擊button時，每次都會輸出"I have been clicked!"，說明removeEventListener()函數沒有起到作用。 

通過查找資料，得出結論。在使用removeEventListener()函數時，handler函數，必須和使用addEventListener()里面的handler函數必須相同。

所以上面寫的代碼是錯誤的。修正之后的代碼應該如下：

//addEventListener()和removeEventListener()中handler函數必須相同，移除事件函數才有效。
function myhandler(){
  console.log("I have been clicked!");
  document.getElementById('info').removeEventListener('click',myhandler,false);
}
var target=document.getElementById('info');
target.addEventListener("click", myhandler, false);
target.removeEventListener("click", myhandler, false); //有效！

看完上述內容，你們掌握addEventListener()與removeEventListener()的區別是什么的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！