事件模型 · 學習講義 2019

## 一、監聽函數瀏覽器的事件模型，就是通過監聽函數（listener）對事件做出反應。事件發生后，瀏覽器監聽到了這個事件，就會執行對應的監聽函數。 JavaScript 有三種方法，可以為事件綁定監聽函數。 ### 1.1 HTML 的 on- 屬性 HTML 語言允許在元素的屬性中，直接定義某些事件的監聽代碼。 ~~~ <body onload="doSomething()"> <div onclick="console.log('觸發事件')"> ~~~ 上面代碼為`body`節點的`load`事件、`div`節點的`click`事件，指定了監聽代碼。一旦事件發生，就會執行這段代碼。元素的事件監聽屬性，都是`on`加上事件名，比如`onload`就是`on + load`，表示`load`事件的監聽代碼。注意，這些屬性的值是將會執行的代碼，而不是一個函數。 ~~~  <body onload="doSomething()">  <body onload="doSomething"> ~~~ 一旦指定的事件發生，`on-`屬性的值是原樣傳入 JavaScript 引擎執行。因此如果要執行函數，不要忘記加上一對圓括號。 ### 1.2 元素節點的事件屬性元素節點對象的事件屬性，同樣可以指定監聽函數。 ~~~ window.onload = doSomething; div.onclick = function (event) { console.log('觸發事件'); }; ~~~ 使用這個方法指定的監聽函數，也是只會在冒泡階段觸發。注意，這種方法與 HTML 的`on-`屬性的差異是，它的值是函數名（`doSomething`），而不像后者，必須給出完整的監聽代碼（`doSomething()`）。 ### 1.3 EventTarget.addEventListener() 所有 DOM 節點實例都有`addEventListener`方法，用來為該節點定義事件的監聽函數。 ~~~ window.addEventListener('load', doSomething, false); ~~~ ### 1.4 小結上面三種方法，第一種“HTML 的 on- 屬性”，違反了 HTML 與 JavaScript 代碼相分離的原則，將兩者寫在一起，不利于代碼分工，因此不推薦使用。第二種“元素節點的事件屬性”的缺點在于，同一個事件只能定義一個監聽函數，也就是說，如果定義兩次`onclick`屬性，后一次定義會覆蓋前一次。因此，也不推薦使用。第三種`EventTarget.addEventListener`是推薦的指定監聽函數的方法。它有如下優點： * 同一個事件可以添加多個監聽函數。 * 能夠指定在哪個階段（捕獲階段還是冒泡階段）觸發監聽函數。 * 除了 DOM 節點，其他對象（比如`window`、`XMLHttpRequest`等）也有這個接口，它等于是整個 JavaScript 統一的監聽函數接口。 ## 二、this 的指向監聽函數內部的`this`指向觸發事件的那個元素節點。 ~~~ <button id="btn" onclick="console.log(this.id)">點擊</button> ~~~ 執行上面代碼，點擊后會輸出`btn`。其他兩種監聽函數的寫法，`this`的指向也是如此。 ~~~ // HTML 代碼如下 // <button id="btn">點擊</button> var btn = document.getElementById('btn'); // 寫法一 btn.onclick = function () { console.log(this.id); }; // 寫法二 btn.addEventListener( 'click', function (e) { console.log(this.id); }, false ); ~~~ 上面兩種寫法，點擊按鈕以后也是輸出`btn`。