事件的本質是程序各個組成部分之間的一種通信方式，也是異步編程的一種實現。DOM 支持大量的事件。 ## 一、概述 DOM 的事件操作（監聽和觸發），都定義在`EventTarget`接口。所有節點對象都部署了這個接口。 該接口主要提供三個實例方法。 * `addEventListener`：綁定事件的監聽函數 * `removeEventListener`：移除事件的監聽函數 * `dispatchEvent`：觸發事件 ## 二、EventTarget.addEventListener() `EventTarget.addEventListener()`用于在當前節點或對象上，定義一個特定事件的監聽函數。一旦這個事件發生，就會執行監聽函數。 ~~~ target.addEventListener(type, listener[, useCapture]); ~~~ 該方法接受三個參數。 * `type`：事件名稱，大小寫敏感。 * `listener`：監聽函數。事件發生時，會調用該監聽函數。 * `useCapture`：布爾值，表示監聽函數是否在捕獲階段（capture）觸發。 下面是一個例子。 ~~~ function hello() { console.log('Hello world'); } var button = document.getElementById('btn'); button.addEventListener('click', hello, false); ~~~ 上面代碼中，`button`節點的`addEventListener`方法綁定`click`事件的監聽函數`hello`，該函數只在冒泡階段觸發。 ## 三、EventTarget.removeEventListener() `EventTarget.removeEventListener`方法用來移除`addEventListener`方法添加的事件監聽函數。 ~~~ div.addEventListener('click', listener, false); div.removeEventListener('click', listener, false); ~~~ `removeEventListener`方法的參數，與`addEventListener`方法完全一致。它的第一個參數“事件類型”，大小寫敏感。 注意，`removeEventListener`方法移除的監聽函數，必須是`addEventListener`方法添加的那個監聽函數，而且必須在同一個元素節點，否則無效。 ## 四、EventTarget.dispatchEvent() `EventTarget.dispatchEvent`方法在當前節點上觸發指定事件，從而觸發監聽函數的執行。 ~~~ target.dispatchEvent(event) ~~~ `dispatchEvent`方法的參數是一個`Event`對象的實例。 ~~~ para.addEventListener('click', hello, false); var event = new Event('click'); para.dispatchEvent(event); ~~~ 上面代碼在當前節點觸發了`click`事件。