深入理解document.addeventlistener

一、addEventListener()方法概述

addEventListener()方法是DOM中的一個非常重要的功能，它可以為指定的元素添加多個事件處理函數。在實際的開發中，我們常常需要在某些特定的條件下觸發一些事件，這個時候addEventListener()就派上用場了。一般來說，它可以添加的事件類型有：鼠標事件、鍵盤事件、表單事件、窗口事件等。

通常來說，addEventListener()方法需要傳遞三個參數：事件類型、事件處理函數、(可選)事件捕獲/冒泡。事件類型常見的有click、mouseover、change、load等等。事件處理函數就是當事件觸發時需要執行的函數。事件捕獲/冒泡就是指定事件是在捕獲階段還是冒泡階段處理。

//示例代碼
let btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  console.log('按鈕被點擊了');
});

二、addEventListener()與onclick的區別

在這裡需要注意的是，addEventListener()和onclick的差異。簡單來說，addEventListener()可以添加多個事件函數，而onclick只能添加一個。因此，addEventListener比onclick更為靈活方便。舉個例子，如果我們現在要實現這樣一個功能：點擊按鈕之後既要彈出提示框，又需要改變樣式，那麼我們需要同時添加兩個事件處理函數，這個時候onclick就無法滿足要求了，而addEventListener()就可以輕鬆實現該功能：

//示例代碼
let btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  alert('按鈕被點擊了');
});
btn.addEventListener('click', function() {
  btn.style.backgroundColor = 'red';
});

三、addEventListener()與removeEventListener()

除了添加事件處理函數，addEventListener還有一個很重要的功能就是可以移除添加的事件處理函數。這是非常有用的特性，因為有時候我們需要在某些條件下暫時關閉某個事件的處理，或者在不需要的時候清除對應的事件處理函數。這時候就需要使用removeEventListener()方法來移除對應的事件處理函數。

//示例代碼
let btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  alert('按鈕被點擊了');
});
let remove = function() {
  btn.removeEventListener('click', remove);
};
btn.addEventListener('click', remove);

四、addEventListener()與事件委託

如果我們在頁面中添加大量的元素，那麼添加事件處理函數就會變得非常麻煩。如果針對每個元素都寫一個事件處理函數，那麼這個頁面的代碼量可能會成倍增加。這個時候，就需要使用事件委託來解決這個問題了。委託就是把某一個元素的事件委託給祖先元素來處理。

使用addEventListener()可以很方便的實現事件委託，只需要在祖先元素上添加事件處理函數，當某個子元素觸發事件時，事件處理函數會自動執行。

//示例代碼
let itemParent = document.getElementById('item-parent');
itemParent.addEventListener('click', function(event) {
  if (event.target && event.target.nodeName === 'LI') {
    console.log('當前點擊的元素為：', event.target);
  }
});

五、addEventListener()的注意事項

在使用addEventListener()方法的過程中，需要注意以下幾點：

1.使用addEventListener()方法添加的事件處理函數是按照添加順序進行執行的，如果有多個事件處理函數，那麼執行順序也是按照添加的順序依次執行的；

2.在同一個元素上，重複添加相同類型的事件處理函數時，後添加的會覆蓋之前添加的事件處理函數；

3.如果用removeEventListener()來移除事件處理函數，需要傳入與添加事件時相同的事件處理函數才可以正常移除；

4.在使用事件委託的過程中，需要保證事件委託元素具有事件類型，否則無法觸發事件；

5.在使用addEventListener()添加事件處理函數時，如果事件處理函數有形參，可以通過傳遞形參來向事件處理函數傳遞參數。

//示例代碼
let btn = document.getElementById('btn');
btn.addEventListener('click', function(event) {
  console.log('按鈕被點擊了', event.target);
});

以上就是關於addEventListener()方法的詳細闡述，相信通過本文的介紹，大家已經對它的使用方法有了更加深入的理解。在平時的開發工作中，要充分發揮好addEventListener()方法的作用，才能讓我們的開發更加高效便捷。