# Event 對象 ## 概述 事件發生以后，會產生一個事件對象，作為參數傳給監聽函數。瀏覽器原生提供一個`Event`對象，所有的事件都是這個對象的實例，或者說繼承了`Event.prototype`對象。 `Event`對象本身就是一個構造函數，可以用來生成新的實例。 ```javascript event = new Event(type, options); ``` `Event`構造函數接受兩個參數。第一個參數`type`是字符串，表示事件的名稱；第二個參數`options`是一個對象，表示事件對象的配置。該對象主要有下面兩個屬性。 - `bubbles`：布爾值，可選，默認為`false`，表示事件對象是否冒泡。 - `cancelable`：布爾值，可選，默認為`false`，表示事件是否可以被取消，即能否用`Event.preventDefault()`取消這個事件。一旦事件被取消，就好像從來沒有發生過，不會觸發瀏覽器對該事件的默認行為。 ```javascript var ev = new Event( 'look', { 'bubbles': true, 'cancelable': false } ); document.dispatchEvent(ev); ``` 上面代碼新建一個`look`事件實例，然后使用`dispatchEvent`方法觸發該事件。 注意，如果不是顯式指定`bubbles`屬性為`true`，生成的事件就只能在“捕獲階段”觸發監聽函數。 ```javascript // HTML 代碼為 // <div><p>Hello</p></div> var div = document.querySelector('div'); var p = document.querySelector('p'); function callback(event) { var tag = event.currentTarget.tagName; console.log('Tag: ' + tag); // 沒有任何輸出 } div.addEventListener('click', callback, false); var click = new Event('click'); p.dispatchEvent(click); ``` 上面代碼中，`p`元素發出一個`click`事件，該事件默認不會冒泡。`div.addEventListener`方法指定在冒泡階段監聽，因此監聽函數不會觸發。如果寫成`div.addEventListener('click', callback, true)`，那么在“捕獲階段”可以監聽到這個事件。 另一方面，如果這個事件在`div`元素上觸發。 ```javascript div.dispatchEvent(click); ``` 那么，不管`div`元素是在冒泡階段監聽，還是在捕獲階段監聽，都會觸發監聽函數。因為這時`div`元素是事件的目標，不存在是否冒泡的問題，`div`元素總是會接收到事件，因此導致監聽函數生效。 ## 實例屬性 ### Event.bubbles，Event.eventPhase `Event.bubbles`屬性返回一個布爾值，表示當前事件是否會冒泡。該屬性為只讀屬性，一般用來了解 Event 實例是否可以冒泡。前面說過，除非顯式聲明，`Event`構造函數生成的事件，默認是不冒泡的。 `Event.eventPhase`屬性返回一個整數常量，表示事件目前所處的階段。該屬性只讀。 ```javascript var phase = event.eventPhase; ``` `Event.eventPhase`的返回值有四種可能。 - 0，事件目前沒有發生。 - 1，事件目前處于捕獲階段，即處于從祖先節點向目標節點的傳播過程中。 - 2，事件到達目標節點，即`Event.target`屬性指向的那個節點。 - 3，事件處于冒泡階段，即處于從目標節點向祖先節點的反向傳播過程中。 ### Event.cancelable，Event.cancelBubble，event.defaultPrevented `Event.cancelable`屬性返回一個布爾值，表示事件是否可以取消。該屬性為只讀屬性，一般用來了解 Event 實例的特性。 大多數瀏覽器的原生事件是可以取消的。比如，取消`click`事件，點擊鏈接將無效。但是除非顯式聲明，`Event`構造函數生成的事件，默認是不可以取消的。 ```javascript var evt = new Event('foo'); evt.cancelable // false ``` 當`Event.cancelable`屬性為`true`時，調用`Event.preventDefault()`就可以取消這個事件，阻止瀏覽器對該事件的默認行為。 如果事件不能取消，調用`Event.preventDefault()`會沒有任何效果。所以使用這個方法之前，最好用`Event.cancelable`屬性判斷一下是否可以取消。 ```javascript function preventEvent(event) { if (event.cancelable) { event.preventDefault(); } else { console.warn('This event couldn\'t be canceled.'); console.dir(event); } } ``` `Event.cancelBubble`屬性是一個布爾值，如果設為`true`，相當于執行`Event.stopPropagation()`，可以阻止事件的傳播。 `Event.defaultPrevented`屬性返回一個布爾值，表示該事件是否調用過`Event.preventDefault`方法。該屬性只讀。 ```javascript if (event.defaultPrevented) { console.log('該事件已經取消了'); } ``` ### Event.currentTarget，Event.target 事件發生以后，會經過捕獲和冒泡兩個階段，依次通過多個 DOM 節點。因此，任意事件都有兩個與事件相關的節點，一個是事件的原始觸發節點（`Event.target`），另一個是事件當前正在通過的節點（`Event.currentTarget`）。前者通常是后者的后代節點。 `Event.currentTarget`屬性返回事件當前所在的節點，即事件當前正在通過的節點，也就是當前正在執行的監聽函數所在的那個節點。隨著事件的傳播，這個屬性的值會變。 `Event.target`屬性返回原始觸發事件的那個節點，即事件最初發生的節點。這個屬性不會隨著事件的傳播而改變。 事件傳播過程中，不同節點的監聽函數內部的`Event.target`與`Event.currentTarget`屬性的值是不一樣的。 ```javascript // HTML 代碼為 // <p id="para">Hello <em>World</em></p> function hide(e) { // 不管點擊 Hello 或 World，總是返回 true console.log(this === e.currentTarget); // 點擊 Hello，返回 true // 點擊 World，返回 false console.log(this === e.target); } document.getElementById('para').addEventListener('click', hide, false); ``` 上面代碼中，`<em>`是`<p>`的子節點，點擊`<em>`或者點擊`<p>`，都會導致監聽函數執行。這時，`e.target`總是指向原始點擊位置的那個節點，而`e.currentTarget`指向事件傳播過程中正在經過的那個節點。由于監聽函數只有事件經過時才會觸發，所以`e.currentTarget`總是等同于監聽函數內部的`this`。 ### Event.type `Event.type`屬性返回一個字符串，表示事件類型。事件的類型是在生成事件的時候指定的。該屬性只讀。 ```javascript var evt = new Event('foo'); evt.type // "foo" ``` ### Event.timeStamp `Event.timeStamp`屬性返回一個毫秒時間戳，表示事件發生的時間。它是相對于網頁加載成功開始計算的。 ```javascript var evt = new Event('foo'); evt.timeStamp // 3683.6999999995896 ``` 它的返回值有可能是整數，也有可能是小數（高精度時間戳），取決于瀏覽器的設置。 下面是一個計算鼠標移動速度的例子，顯示每秒移動的像素數量。 ```javascript var previousX; var previousY; var previousT; window.addEventListener('mousemove', function(event) { if ( previousX !== undefined && previousY !== undefined && previousT !== undefined ) { var deltaX = event.screenX - previousX; var deltaY = event.screenY - previousY; var deltaD = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2)); var deltaT = event.timeStamp - previousT; console.log(deltaD / deltaT * 1000); } previousX = event.screenX; previousY = event.screenY; previousT = event.timeStamp; }); ``` ### Event.isTrusted `Event.isTrusted`屬性返回一個布爾值，表示該事件是否由真實的用戶行為產生。比如，用戶點擊鏈接會產生一個`click`事件，該事件是用戶產生的；`Event`構造函數生成的事件，則是腳本產生的。 ```javascript var evt = new Event('foo'); evt.isTrusted // false ``` 上面代碼中，`evt`對象是腳本產生的，所以`isTrusted`屬性返回`false`。 ### Event.detail `Event.detail`屬性只有瀏覽器的 UI （用戶界面）事件才具有。該屬性返回一個數值，表示事件的某種信息。具體含義與事件類型相關。比如，對于`click`和`dblclick`事件，`Event.detail`是鼠標按下的次數（`1`表示單擊，`2`表示雙擊，`3`表示三擊）；對于鼠標滾輪事件，`Event.detail`是滾輪正向滾動的距離，負值就是負向滾動的距離，返回值總是3的倍數。 ```javascript // HTML 代碼如下 // <p>Hello</p> function giveDetails(e) { console.log(e.detail); } document.querySelector('p').onclick = giveDetails; ``` ## 實例方法 ### Event.preventDefault() `Event.preventDefault`方法取消瀏覽器對當前事件的默認行為。比如點擊鏈接后，瀏覽器默認會跳轉到另一個頁面，使用這個方法以后，就不會跳轉了；再比如，按一下空格鍵，頁面向下滾動一段距離，使用這個方法以后也不會滾動了。該方法生效的前提是，事件對象的`cancelable`屬性為`true`，如果為`false`，調用該方法沒有任何效果。 注意，該方法只是取消事件對當前元素的默認影響，不會阻止事件的傳播。如果要阻止傳播，可以使用`stopPropagation()`或`stopImmediatePropagation()`方法。 ```javascript // HTML 代碼為 // <input type="checkbox" id="my-checkbox" /> var cb = document.getElementById('my-checkbox'); cb.addEventListener( 'click', function (e){ e.preventDefault(); }, false ); ``` 上面代碼中，瀏覽器的默認行為是單擊會選中單選框，取消這個行為，就導致無法選中單選框。 利用這個方法，可以為文本輸入框設置校驗條件。如果用戶的輸入不符合條件，就無法將字符輸入文本框。 ```javascript // HTML 代碼為 // <input type="text" id="my-input" /> var input = document.getElementById('my-input'); input.addEventListener('keypress', checkName, false); function checkName(e) { if (e.charCode < 97 || e.charCode > 122) { e.preventDefault(); } } ``` 上面代碼為文本框的`keypress`事件設定監聽函數后，將只能輸入小寫字母，否則輸入事件的默認行為（寫入文本框）將被取消，導致不能向文本框輸入內容。 ### Event.stopPropagation() `stopPropagation`方法阻止事件在 DOM 中繼續傳播，防止再觸發定義在別的節點上的監聽函數，但是不包括在當前節點上其他的事件監聽函數。 ```javascript function stopEvent(e) { e.stopPropagation(); } el.addEventListener('click', stopEvent, false); ``` 上面代碼中，`click`事件將不會進一步冒泡到`el`節點的父節點。 ### Event.stopImmediatePropagation() `Event.stopImmediatePropagation`方法阻止同一個事件的其他監聽函數被調用，不管監聽函數定義在當前節點還是其他節點。也就是說，該方法阻止事件的傳播，比`Event.stopPropagation()`更徹底。 如果同一個節點對于同一個事件指定了多個監聽函數，這些函數會根據添加的順序依次調用。只要其中有一個監聽函數調用了`Event.stopImmediatePropagation`方法，其他的監聽函數就不會再執行了。 ```javascript function l1(e){ e.stopImmediatePropagation(); } function l2(e){ console.log('hello world'); } el.addEventListener('click', l1, false); el.addEventListener('click', l2, false); ``` 上面代碼在`el`節點上，為`click`事件添加了兩個監聽函數`l1`和`l2`。由于`l1`調用了`event.stopImmediatePropagation`方法，所以`l2`不會被調用。 ### Event.composedPath() `Event.composedPath()`返回一個數組，成員是事件的最底層節點和依次冒泡經過的所有上層節點。 ```javascript // HTML 代碼如下 // <div> // <p>Hello</p> // </div> var div = document.querySelector('div'); var p = document.querySelector('p'); div.addEventListener('click', function (e) { console.log(e.composedPath()); }, false); // [p, div, body, html, document, Window] ``` 上面代碼中，`click`事件的最底層節點是`p`，向上依次是`div`、`body`、`html`、`document`、`Window`。