addEventListener()和removeEventListener()追加事件和刪除追加事件

更新時(shí)間：2020年12月04日 09:33:19 作者：Sarah119

這篇文章主要給大家介紹了關(guān)于addEventListener()和removeEventListener()追加事件和刪除追加事件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

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

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

1 var btn = document.getElementById("myBtn");
2 btn.addEventListener("click", function () {
3  alert(this.id);
4 }, 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è)例子中，removeEventListener無(wú)法刪除addEventListener所追加的事件，因?yàn)閮蓚€(gè)方法并不相等，內(nèi)存地址已經(jīng)是不同的，如下面的例子所示：

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ù)情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度地兼容各種瀏覽器。最好只在需要在是時(shí)間到達(dá)目標(biāo)之前截獲它的時(shí)候?qū)⑹录幚沓绦蛱砑拥讲东@階段。如果不是特別需要，我們不建議在事件捕獲階段注冊(cè)事件處理程序；

親測(cè)：

方法的內(nèi)存地址十分的重要，一定要相同才可以刪除；試過(guò)遇到的坑:

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

需求,需要不斷地往一個(gè)function里面塞數(shù)據(jù)，里面會(huì)有追加，如果不刪除了話，會(huì)一直追加上去，不環(huán)保并且耗內(nèi)存，必須要?jiǎng)h掉追加；然而像上面這樣寫(xiě)的話，由于removeEventListener和addEventListener里面的clickFun內(nèi)存不相等，導(dǎo)致刪除不成功；調(diào)整如下：

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

確保刪除的是同一個(gè)內(nèi)存的方法

到此這篇關(guān)于addEventListener()和removeEventListener()追加事件和刪除追加事件的文章就介紹到這了,更多相關(guān)addEventListener()和removeEventListener()追加事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: