這篇文章主要為大家詳細介紹了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);雖然呼叫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); //有效！實驗結果是，使用者點擊button時，每次都會輸出"I have been clicked!"，說明removeEventListener()函數沒有發揮作用。
//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); //有效！js影片教學，眾多js線上影片教學可以免費觀看！
以上是解析js中addEventListener()與removeEventListener()的詳細內容。更多資訊請關注PHP中文網其他相關文章！
