addEventListener() 方法
實體
添加當用戶點擊按鈕時觸發的事件監聽器：
document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener() 方法為指定元素指定事件處理程式，
addEventListener() 方法為元素附加事件處理程式而不會覆寫已有的事件處理程式，
您能夠向一個元素添加多個事件處理程式，
您能夠向一個元素添加多個相同型別的事件處理程式，例如兩個 "click" 事件，
您能夠向任何 DOM 物件添加事件處理程式而非僅僅 HTML 元素，例如 window 物件，
addEventListener() 方法使我們更容易控制事件如何對冒泡作出反應，
當使用 addEventListener() 方法時，JavaScript 與 HTML 標記是分隔的，已達到更佳的可讀性；即使在不控制 HTML 標記時也允許您添加事件監聽器，
您能夠通過使用 removeEventListener() 方法輕松地洗掉事件監聽器，
語法
element.addEventListener(event, function, useCapture);
第一個引數是事件的型別（比如 "click" 或 "mousedown"），
第二個引數是當事件發生時我們需要呼叫的函式，
第三個引數是布林值，指定使用事件冒泡還是事件捕獲，此引數是可選的，
注意：請勿對事件使用 "on" 前綴；請使用 "click" 代替 "onclick"，
向元素添加事件處理程式
實體
當用戶點擊某個元素時提示 "Hello World!"：
element.addEventListener("click", function(){ alert("Hello World!"); });
您也可以參考外部“命名”函式：
實體
當用戶點擊某個元素時提示 "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("click", mySecondFunction);
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> 元素的點擊事件，然后是 <div> 元素的點擊事件，
在捕獲中，最外側元素的事件會首先被處理，然后是更內側的：首先處理 <div> 元素的點擊事件，然后是 <p> 元素的點擊事件，
在 addEventListener() 方法中，你能夠通過使用“useCapture”引數來規定傳播型別：
addEventListener(event, function, useCapture);
默認值是 false，將使用冒泡傳播，如果該值設定為 true，則事件使用捕獲傳播，
實體
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
removeEventListener() 方法
removeEventListener() 方法會洗掉已通過 addEventListener() 方法附加的事件處理程式：
實體
element.removeEventListener("mousemove", myFunction);
瀏覽器支持
表格中的數字規定了完全支持這些方法的首個瀏覽器版本，
| 方法 | |||||
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
| removeEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
注釋：IE 8、Opera 6.0 及其更早版本不支持 addEventListener() 和 removeEventListener() 方法，不過，對于這些特殊的瀏覽器版本，您可以使用 attachEvent() 方法向元素添加事件處理程式，并由 detachEvent() 方法洗掉：
element.attachEvent(event, function); element.detachEvent(event, function);
實體
跨瀏覽器解決方案：
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.uj5u.com/qiye/157948.html
標籤：JavaScript
上一篇：ES6函式的擴展
下一篇：JS高級---一個神奇的原型鏈