[Back To Basic] Javascript - DOM EventListener

事件監聽(Event Listener)

• 可以附加處理邏輯(event handlers)到特定的HTML元素(elements)上
• 不會覆蓋原本存在的事件(events)
• 可以附加多個事件到同一個HTML元素(element)上
• 可以附加多個處理邏輯(event handlers)到同一個HTML事件(events)上
• 可以附加到任意 DOM object 上，e.g. window object
• 完全分離 HTML 和 javascript，提升可讀性

• addEventListener(): 新增處理邏輯
• removeEventListener() 移除處理邏輯

addEventListener()

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

• event: 事件名稱，不用加on，e.g. click 不要用 onclick
• function: 事件發生時，要執行的 function
• useCapture: true：事件冒泡(event bubbling) / false：事件捕獲(event capturing)，預設false(外層先處理，內層後處理)

事件捕獲(event capturing) 和 事件冒泡(event bubbling)

HTML DOM 的事件傳播(event propagation)有兩種，捕獲和冒泡。

事件傳播(event propagation)，定義了事件(events)發生時，元素(elements)的順序。

e.g.

<div>

  <p></p>
</div>

若點擊p時，應該先執行 div 的 click 事件，還是 p 的 click 事件呢？

事件冒泡(event bubbling)：內層先處理，外層後處理；p先處理，div後處理

事件捕獲(event capturing)：外層先處理，內層後處理；div先處理，p後處理

IE8

addEventListener() 和 removeEventListener() IE9以後都支援。

IE8以前要用 attachEvent 和 detachEvent

var button = document.getElementById("button");

if (button.addEventListener) {     // For all major browsers, except IE 8 and earlier

 button.addEventListener("click", myFunction);

} else if (button.attachEvent) {   // For IE 8 and earlier versions

  button.attachEvent("onclick", myFunction);

}

source code