JavaScript addEventListener()事件監聽方法

addEventListener(event, function, useCapture)方法將事件處理程序附加到元素，而不覆蓋現有的事件處理程序。

您可以向一個元素添加許多事件處理程序。您可以向一個元素添加許多相同類型的事件處理程序，即兩個“單擊”事件。

您可以將事件偵聽器添加到任何DOM對象，而不僅僅是HTML元素。即window對象。

addEventListener(event, function, useCapture)方法可以更容易地控制事件對冒泡的反應。使用addEventListener(event, function, useCapture)方法時，JavaScript與HTML標記分離，以提高可讀性，並允許您添加事件偵聽器，即使您不控制HTML標記也是如此。

1.語法

語法：element.addEventListener(event, function, useCapture);

第一個參數是事件的類型（如“ click”或“ mousedown”）。
第二個參數是我們想要在事件發生時調用的函數。
第三個參數是一個布爾值，指定是使用事件冒泡還是事件捕獲。此參數是可選的。
請注意，您不要為事件使用“on”前綴; 用“ click”而不是“ onclick”。

document.getElementById("myBtn").addEventListener("click", displayDate);

 

2.向元素添加事件處理程序

2.1.向元素添加事件處理程序

element.addEventListener("click", function(){ alert("Hello World!"); });

2.2.您還可以在外部定義函數，然后把函數名當參數傳：

element.addEventListener("click", myFunction);
function myFunction() {
  alert ("Hello World!");
}

 

3.將許多事件處理程序添加到同一元素

addEventListener(event, function, useCapture)方法允許您向同一元素添加許多事件，而不會覆蓋現有事件

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
 
element.addEventListener("mouseover", myFunction);
element.addEventListener("mouseout", myThirdFunction);

 

 

4.將事件處理程序添加到window對象

addEventListener()方法允許您在任何HTML DOM對象上添加事件偵聽器，例如HTML元素，HTML文檔，window對象或支持事件的其他對象，如xmlHttpRequest對象。

4.1.添加在用戶調整窗口大小時觸發的事件偵聽器：

window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = sometext;
});

4.2.傳遞參數值時，使用“匿名函數”，使用以下參數調用指定的函數：

element.addEventListener("click", function(){ myFunction(p1, p2); });

 

 

5.事件冒泡或事件捕獲？

HTML DOM中有兩種事件傳播方式，即冒泡和捕獲。事件傳播是一種在事件發生時定義元素順序的方法。

 

如果<div>元素中有<p>元素，並且用戶單擊<p>元素，應該首先處理哪個元素的“click”事件？

5.1.冒泡

在冒泡中，首先處理內部然后處理外部：首先處理<p>元素的click事件，然后處理<div>元素的click事件。

5.2.捕獲

在捕獲最外層元素時，首先處理外部然后處理內部：首先處理<div>元素的click事件，然后處理<p>元素的click事件。

5.3.使用addEventListener(event, function, useCapture)方法，您可以使用“useCapture”參數指定傳播類型

5.3.1.默認值為false，將使用冒泡傳播

document.getElementById("myP").addEventListener("click", myFunction);
document.getElementById("myDiv").addEventListener("click", myFunction);

同

document.getElementById("myP").addEventListener("click", myFunction, false);
document.getElementById("myDiv").addEventListener("click", myFunction, false);

5.3.2.可以設置true，使用捕獲傳播

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

6.removeEventListener(event, function, useCapture)事件

可以使用removeEventListener()方法輕松刪除事件偵聽器。

element.removeEventListener("click", myFunction);
function myFunction() {
  alert ("Hello World!");
}

 

7.addEventListener()和removeEventListener()兼容性問題

addEventListener()和removeEventListener()方法並不在IE 8和更早版本的支持。但是，對於這些特定的瀏覽器版本，您可以使用attachEvent()方法將事件處理程序附加到元素，以及detachEvent()刪除它的方法，解決方案

var x = document.getElementById("myBtn");
if (x.addEventListener) {     // 對於所有主流瀏覽器，IE 8及更早版本除外
  x.addEventListener("click", myFunction);
} else if (x.attachEvent) {   // 適用於IE 8及更早版本
  x.attachEvent("onclick", myFunction);
}

點擊查看冒泡和捕獲的真實案例(幫助理解)：https://www.runoob.com/try/try.php?filename=tryjsref_element_addeventlistener_capture

 

文章參考---https://blog.csdn.net/wangningjing87/article/details/100707744