快捷導(dǎo)航

addEventListener()與removeEventListener()解析

更新時(shí)間：2017年04月20日 11:25:24 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了addEventListener()與removeEventListener()，用于處理指定和刪除事件處理程序操作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

最后這個(gè)布爾值參數(shù)是true，表示在捕獲階段調(diào)用事件處理程序；
如果是false（false- 默認(rèn)），表示在冒泡階段調(diào)用事件處理程序。

addEventListener的參數(shù)一共有三個(gè)，語(yǔ)法為：
element.addEventListener(type,listener,useCapture)

下面是詳解：
1、其中element是要綁定函數(shù)的對(duì)象。
2、type是事件名稱(chēng)，要注意的是"onclick"要改為"click","onblur"要改為"blur",也就是說(shuō)事件名不要帶"on"。
3、listener當(dāng)然就是綁定的函數(shù)了，記住不要跟括號(hào)
4、最后一個(gè)參數(shù)是個(gè)布爾值，表示該事件的響應(yīng)順序,下面重點(diǎn)介紹一下addEventListener的第3個(gè)參數(shù)(useCapture)。

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

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

使用DOM2級(jí)方法添加事件處理程序的主要好處是可以添加多個(gè)事件處理程序。來(lái)看下面的例子：

var btn = document.getElementById("myBtn");

btn.addEventListener("click", function () {
  alert(this.id);
}, false);  
btn.addEventListener("click", function () {
  alert("Hello World");
}, false);

通過(guò)addEventListener()添加的事件處理程序只能使用removeEventListener()來(lái)移除；

移除時(shí)傳入的參數(shù)與添加處理程序時(shí)使用的參數(shù)相同。
這也意味著通過(guò)addEventListener()添加的匿名函數(shù)無(wú)法移除，如下面的例子所示：

var btn = document.getElementById("myBtn");

btn.addEventListener("click", function () {
   alert(this.id);
}, false);
btn.removeEventListener("click", function () { //無(wú)效！
   alert(this.id);
}, false);

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

下面的例子所示：

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

重寫(xiě)后的這個(gè)例子沒(méi)有問(wèn)題，是因?yàn)樵赼ddEventListener()和removeEventListener()中用來(lái)相同的函數(shù)。
實(shí)驗(yàn)結(jié)果是，用戶(hù)點(diǎn)擊button時(shí)，每次都會(huì)輸出"I have been clicked!"，說(shuō)明removeEventListener()函數(shù)沒(méi)有起到作用。

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

所以上面寫(xiě)的代碼是錯(cuò)誤的。修正之后的代碼應(yīng)該如下：

//addEventListener()和removeEventListener()中handler函數(shù)必須相同，移除事件函數(shù)才有效。
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); //有效！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: