addEventListener()方法將事件處理程序附加到指定的元素。
addEventListener()方法將事件處理程序附加到元素，而不覆蓋現有的事件處理程序。
您可以向一個元素添加許多事件處理程序。您可以向一個元素添加許多相同類型的事件處理程序，即兩個“單擊”事件。
您可以將事件偵聽器添加到任何DOM對象，而不僅僅是HTML元素。即window對象。
addEventListener()方法可以更容易地控制事件對冒泡的反應。
使用addEventListener()方法時，JavaScript與HTML標記分離，以提高可讀性，
並允許您添加事件偵聽器，即使您不控制HTML標記也是如此。
您可以使用removeEventListener()方法輕松刪除事件偵聽器。
語法：element.addEventListener(event, function, useCapture);
- 第一個參數是事件的類型（如“ click”或“ mousedown”）。
- 第二個參數是我們想要在事件發生時調用的函數。
- 第三個參數是一個布爾值，指定是使用事件冒泡還是事件捕獲。此參數是可選的。
請注意，您不要為事件使用“on”前綴; 用“ click”而不是“ onclick”。
document.getElementById("myBtn").addEventListener("click", displayDate);
向元素添加事件處理程序
當用戶點擊某個元素時提醒“Hello World！” ：
element.addEventListener("click", function(){ alert("Hello World!"); });
您還可以在外部定義函數，然后把函數名當參數傳：
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
將許多事件處理程序添加到同一元素
addEventListener()方法允許您向同一元素添加許多事件，而不會覆蓋現有事件
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseover", myFunction);
element.addEventListener("mouseout", myThirdFunction);
將事件處理程序添加到window對象
addEventListener()方法允許您在任何HTML DOM對象上添加事件偵聽器，例如HTML元素，HTML文檔，window對象或支持事件的其他對象，
如
xmlHttpRequest對象。
添加在用戶調整窗口大小時觸發的事件偵聽器：
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
傳遞參數值時，使用“匿名函數”，使用以下參數調用指定的函數：
element.addEventListener("click", function(){ myFunction(p1, p2); });
事件冒泡或事件捕獲？
HTML DOM中有兩種事件傳播方式，即冒泡和捕獲。
事件傳播是一種在事件發生時定義元素順序的方法。
如果<div>元素中有<p>元素，並且用戶單擊<p>元素，應該首先處理哪個元素的“click”事件？
在冒泡中，首先處理內部元素的事件，然后處理外部：首先處理<p>元素的click事件，然后處理<div>元素的click事件。
在捕獲最外層元素時，首先處理事件然后處理內部：首先處理<div>元素的click事件，然后處理<p>元素的click事件。
使用addEventListener()方法，您可以使用“useCapture”參數指定傳播類型：
默認值為false，將使用冒泡傳播，當值設置為true時，事件使用捕獲傳播。
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
removeEventListener()方法
element.removeEventListener("mousemove", myFunction);
注：該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); }