JavaScript HTML DOM EventListener
addEventListener() 方法
addEventListener() 方法用於向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不會覆蓋已存在的事件句柄。
你可以向一個元素添加多個事件句柄。
你可以向同個元素添加多個同類型的事件句柄，如：兩個"click" 事件。
你可以向任何DOM 對象添加事件監聽，不僅僅是HTML 元素。 如： window 對象。
addEventListener() 方法可以更簡單的控制事件（冒泡與捕獲）。
當你使用addEventListener() 方法時, JavaScript 從HTML 標記中分離開來，可讀性更強， 在沒有控制HTML標記時也可以添加事件監聽。
你可以使用removeEventListener() 方法來移除事件的監聽。
語法
第一個參數是事件的類型(如"click" 或"mousedown").
第二個參數是事件觸發後調用的函數。
第三個參數是個布爾值用於描述事件是冒泡還是捕獲。 該參數是可選的。
 | 注意:不要使用"on" 前綴。 例如，使用"click" ,而不是使用"onclick"。 |
|---|
向原元素添加事件句柄
實例
當用戶點擊元素時彈出"Hello World!" :
嘗試一下»
你可以使用函數名，來引用外部函數:
實例
當用戶點擊元素時彈出"Hello World!" :
function myFunction() {
alert ("Hello World!");
}
嘗試一下»
向同一個元素中添加多個事件句柄
addEventListener() 方法允許向同個元素添加多個事件，且不會覆蓋已存在的事件：
實例
element .addEventListener("click", mySecondFunction);
嘗試一下»
你可以向同個元素添加不同類型的事件：
實例
element .addEventListener("click", mySecondFunction);
element .addEventListener("mouseout", myThirdFunction);
嘗試一下»
向Window 對象添加事件句柄
addEventListener() 方法允許你在HTML DOM 對象添加事件監聽， HTML DOM 對像如： HTML 元素, HTML 文檔, window 對象。 或者其他支出的事件對像如: xmlHttpRequest 對象。
實例
當用戶重置窗口大小時添加事件監聽：
document.getElementById("demo").innerHTML = sometext ;
});
嘗試一下»
傳遞參數
當傳遞參數值時，使用"匿名函數"調用帶參數的函數：
事件冒泡或事件捕獲？
事件傳遞有兩種方式：冒泡與捕獲。
事件傳遞定義了元素事件觸發的順序。 如果你將<p> 元素插入到<div> 元素中，用戶點擊<p> 元素, 哪個元素的"click" 事件先被觸發呢？
在冒泡中，內部元素的事件會先被觸發，然後再觸發外部元素，即： <p>元素的點擊事件先觸發，然後會觸發<div>元素的點擊事件。
在捕獲中，外部元素的事件會先被觸發，然後才會觸發內部元素的事件，即： <div>元素的點擊事件先觸發，然後再觸發<p>元素的點擊事件。
addEventListener() 方法可以指定"useCapture" 參數來設置傳遞類型：
默認值為false, 即冒泡傳遞，當值為true 時, 事件使用捕獲傳遞。
removeEventListener() 方法
removeEventListener() 方法移除由addEventListener() 方法添加的事件句柄:
瀏覽器支持
表格中的數字表示支持該方法的第一個瀏覽器的版本號。
| 方法 | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
| removeEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
注意： IE 8及更早IE版本，Opera 7.0及其更早版本不支持addEventListener()和removeEventListener()方法。 但是，對於這類瀏覽器版本可以使用detachEvent() 方法來移除事件句柄:
element.detachEvent(event, function);
實例
跨瀏覽器解決方法:
if (x.addEventListener) { // 所有主流瀏覽器，除了IE 8 及更早版本
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早版本
x.attachEvent("onclick", myFunction);
}
嘗試一下»
HTML DOM 事件對象參考手冊
所有HTML DOM事件，可以查看我們完整的HTML DOM Event對象參考手冊 。