事件冒泡（event bubbling），即事件開始時由最具體的元素接收，然後逐級向上傳播到較為不具體的節點。

事件捕獲（event capturing），是不太具體的節點應該更早接收到事件，而具體的節點應該最後接收到事件。

HTML事件處理程式

在HTML中指定事件處理程式有兩個缺點：

• 存在時差問題，因為使用者可能會在HTML元素一出現在頁面上就觸發相應的事件，但當時事件處理程式有可能尚不具備執行條件。
• 擴充套件事件處理程式的作用域鏈在不同的瀏覽器中會導致不同結果。不同的JavaScript引擎遵循的識別符號解析規則略有差異，很可能會在訪問非限定物件成員時出錯。

通過HTML指定事件處理程式會使HTML和JavaScript程式碼緊密耦合。如果要更換事件處理程式，就要改動HTML程式碼和JavaScript程式碼。這正是許多開發人員摒棄HTML事件處理程式，轉而使用JavaScript指定事件處理程式的原因所在。

DOM0級事件處理程式

let btn = document.getElementById('myBtn')
btn.onclick = function(){
    alert('click btn')
}

以這種方式新增的事件處理程式會在事件流的冒泡階段被處理。

DOM2級事件處理程式

用於指定和刪除事件處理程式的操作：addEventListener( )和removeEventListener( )。所有DOM節點都包含這兩個方法，並且它們都接受3個引數：要處理的事件名、作為事件處理程式的函式和一個布林值。最後的布林值引數如果是true，表示在捕獲階段呼叫事件處理程式；如果是false，表示在冒泡階段呼叫事件處理程式。

通過addEventListener( )新增的事件處理程式只能使用removeEventListener( )來移除；移除時傳入的引數與新增處理程式時的引數相同。這也意味著通過addEventListener( )新增的匿名函式將無法移除。

IE事件處理程式

attachEvent( )和detachEvent( )，這兩個方法接受相同的兩個引數，事件處理程式名稱和事件處理程式函式。

在使用DOM0級方法的情況下，事件處理程式會在其所屬元素的作用域內執行；在使用attachEvent( )方法的情況下，事件處理程式會在全域性作用域中執行，因此this等於window。

let btn = document.getElementById('myBtn')
btn.attachEvent('onclick',function(){
    alert(this === window) // true
})

與addEventListener( )類似，attachEvent( )方法也可以為同一個元素新增多個事件處理程式。不過，與DOM方法不同的是，這些事件處理程式不是以新增它們的順序執行，而是以相反的順序被觸發。

事件物件：在觸發DOM上的某個事件時，會產生一個事件物件，這個物件中包含著所有與事件有關的資訊。包括導致事件的元素、事件的型別以及其他與特定事件相關的資訊。

事件偵聽函式相容性

影象元素不一定要從新增到文件後才開始下載，只要設定了src屬性就會開始下載。

DOMContentLoaded事件則在形成完整的DOM樹之後就會觸發，不理會影象、JavaScript檔案、CSS檔案或其他資源是否已經載入完畢。

對“事件處理程式過多”問題的解決方案就是事件委託。事件委託利用了事件冒泡機制。