符合預期的CoyPan（id: Coy_Pan）
作者：CoyPan，BAT某廠符合預期的FE，正努力成為一名出色的工程師

web中的事件

事件並不是JavaScript的核心部分，他們是在瀏覽器的Web Api中定義的。下面列舉的幾種情況，都屬於發生了事件。

使用者在某個元素上點選滑鼠或懸停游標。
使用者在鍵盤中按下某個按鍵。
使用者調整瀏覽器的大小或者關閉瀏覽器視窗。
一個網頁停止載入。
提交表單。
播放、暫停、關閉影片。
發生錯誤。

我們可以在程式碼中使用事件處理器來處理各種事件。

事件模型

假設我們有這麼一段html程式碼：

<html>
    <body>
        <table>
            <tbody>
            	<tr>
                    <td>Shady Grove</td>
                    <td>Aeolain</td>
                </tr>
                <tr>
                	<td>Over the River, Charile</td>
                    <td>Dorian</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

如果我們點選over the Rive, Charile，整個事件流程如下：

事件會經歷三個階段，上圖中分別由紅色、藍色、綠色標出。第一階段為紅色，事件流從根元素一直走到點選的目標元素，這個過程稱為捕獲。第二階段為藍色。這個階段中，會處理點選事件，為事件加上各種屬性等。第三階段為綠色，事件又回重新回到根元素，這個過程稱為冒泡。在整個事件流中，我們在事件流經過的任何元素上，都能監聽到該事件，從而進行處理。

一般建議在冒泡階段處理事件，這樣可以最大限度的相容各種瀏覽器。

注意：blur、focus、load、unload 等幾個事件不會冒泡。

原因是在於：這些事件僅發生於自身上，而它的任何父節點上的事件都不會產生，所有不會冒泡。

我們可以檢視事件的bubbles屬性，來判斷該事件是否可以冒泡。

事件處理

EventTarget

EventTarget是一個由可以接收事件的物件實現的介面，並且可以為它們建立偵聽器。Web中的所有事件處理器都是由EventTarget"提供"的。

addEventListener

該方法將指定的監聽器註冊到上，當該物件觸發指定的事件時，指定的回撥函式就會被執行。事件目標可以是一個文件上的元素 ,Document和或者任何其他支援事件的物件 (比如 XMLHttpRequest)。其標準語法如下：

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);

type: 字串。表示事件型別，比如: click。

listener：函式。事件觸發時的回撥函式。這個函式會接受一個Event事件物件。這個Event事件物件中，包含了以下重要的屬性和方法（這裡只列舉出常用的）

屬性	值
bubbles	只讀。一個布林值，表示該事件是否能夠在DOM中冒泡。
cancelBubble	透過在一個事件處理程式返回前設定這個屬性的值為真，來阻止事件冒泡。
cancelable	只讀。一個布林值，用來表示這個事件是否可以取消。
currentTarget	只讀。註冊事件監聽的物件。
target	只讀。對事件起源目標的引用。

方法	作用
preventDefault	取消預設事件
stopPropagation	阻止事件冒泡

options ：物件。指定一個listener的配置引數。

屬性	值
capture	布林值。如果為true，表示該listener會在捕獲過程中執行。如果為false，listener會在冒泡過程中執行。預設為false。
once	布林值。預設為false。如果為true，listener只會執行一次，並且執行後會被自動移除。
passive	布林值。如果為true，則無法呼叫preventDefault來阻止預設事件。預設為false。這個屬性有一個需要注意的地方。在safari瀏覽器的頁面滾動事件中，這個值是預設的true。所以要阻止safari中的頁面滾動，需要手動將這個值設為false。

useCapture：布林值，可選。預設為false，事件在冒泡過程中觸發listener。

removeEventListener

刪除使用addEventListener註冊到target上的事件。標準語法：

target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);

為了提高頁面效能，我們在處理完某事件，並且不用繼續監聽該事件時，可以將之前註冊的事件監聽函式移除。需要注意的是，如果註冊事件時，在捕獲或冒泡階段均進行了監聽，那麼移除時需要分別移除。

currentTarget 與 target的區別

在事件處理函式中，我們經常會使用到事件的這兩個屬性。currentTarget表示註冊事監聽的物件。target表示事件起源的物件。舉個例子：

<div id="father">
 	<div id="child1">child1</div>
 	<div id="child2">child2</div>
 	<div id="child3">child3</div>
</div>

document.getElementById('father').addeventListener('click', function(e){
    console.log(e.currentTarget);
    console.log(e.target);
});

我們將事件處理函式繫結在father上。現在，如果我們點選的是child1，由於child1是事件源，那麼e.target就是child1。而我們的事件處理函式是繫結在father上的，所以，e.currentTarget就是father。

這一點在開發過程中需要特別注意。

事件代理

這個概念依賴於這樣一個事實,如果你想要在大量子元素中單擊任何一個都可以執行一段程式碼，您可以將事件監聽器設定在其父節點上，並將事件監聽器氣泡的影響設定為每個子節點，而不是每個子節點單獨設定事件監聽器。舉個例子：

<ul>
	<li>1<li>
    <li>2<li>
    <li>3<li>
    <li>4<li>
    <li>5<li>
    <li>6<li>
    <li>7<li>
    <li>8<li>
    <li>9<li>
</ul>

我們要實現點選每一個li的時候，輸出li內對應的數字，我們當然可以直接在所有的li上分別繫結一個事件。但是這樣會造成記憶體的浪費。我們可以只在ul上繫結一個事件，根據事件的target來獲取當前點選的li，拿到該li內對應的數字。

document.querySelector('ul').addEventListener('click', function(e){
    if(e.target && e.target.nodeName === "LI") {
		console.log(e.target.innerHTML);
	}
});

自定義事件

最新的DOM標準允許我們自定義事件。直接看下面的例子。

var fakeNode = document.createElement('Coy'); // 建立一個自定義元素
var evt = document.createEvent('Event'); // 建立一個自定義事件
var evtType = 'test'; // 自定義事件的型別

// 事件監聽函式
fakeNode.addEventListener(evtType, function(e){ 
    console.log(e); // e.type === 'test';
}, false);

// 初始化事件。
// initEvent用法：event.initEvent(type, bubbles, cancelable);
evt.initEvent(evtType, false, false); 

// 向fakeNode派發evt事件
fakeNode.dispatchEvent(evt);

寫在後面

事件，是前端開發中的一個基礎。雖然比較簡單，但是十分重要。本文總結了web事件的一些知識點，符合預期。