解析js中addEventListener()與removeEventListener()

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

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

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

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

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

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

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

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

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

下面的例子所示：

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

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

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

需要學(xué)習(xí)js的同學(xué)請關(guān)注Gxl網(wǎng)js視頻教程，眾多js在線視頻教程可以免費觀看！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com