JavaScript事件

概述

JavaScript與HTML之間的交互經過事件實現。事件，就是文檔或者瀏覽器窗口中發生的一些特定的交互瞬間.

事件流

當單擊頁面上的按鈕時，你也單擊了按鈕的容器元素，甚至也單擊了整個頁面，那這幾個元素的接收到事件的順序是如何呢？
事件流就是指從頁面中接收事件的順序。事件流有如下兩種：

事件冒泡

事件開始時從最具體的元素接收，而後逐級向上傳播，也就是說若是點擊一個元素，該元素的點擊事件先發生再傳播至上一級

事件捕獲

事件從最不具體的元素開始，到你真正接收事件的節點逐級向下傳播，也就是說點擊一個元素，若document有點擊事件，則先發生document事件，再發生至你點擊的元素

DOM事件流

‘DOM2級事件’規定的事件流包括三個階段：事件捕獲、處於目標階段和事件冒泡階段。
前後順序：
事件捕獲，爲截獲事件提供機會-->實際的目標接收到事件-->事件冒泡，在這個階段對事件作出響應。

事件處理程序

事件是用戶或者瀏覽器自身執行的某種動做，那麼事件處理程序就是響應某個事件的處理函數，事件處理程序的名字以‘on’開頭

HTML事件處理程序

<input type="button" value="點擊我" onclick="alert('我被點擊了')">

DOM0級事件處理程序

var btn = document.querySelector('#clickMe')
btn.onclick = function() {
    alert('我被點擊了')
}

DOM2級事件處理程序

btn.addEventListener('click', function() {
    alert('我被點擊了')
}, true)

DOM2級事件定義了兩個方法，用於處理指定和刪除事件處理程序的操做：addEventListerner和removeEventListener，它們接收三個參數：要處理的事件名、做爲事件處理程序的函數和一個布爾值。
最後這個布爾值參數若是是true，表示再捕獲階段就調用事件處理程序；若是是false，則是再冒泡階段調用事件處理程序
好處：能夠添加多個事件處理程序