摘要：中的所有事件處理器都是由提供的。事件觸發(fā)時(shí)的回調(diào)函數(shù)。一個(gè)布爾值，表示該事件是否能夠在中冒泡。注冊(cè)事件監(jiān)聽(tīng)的對(duì)象。對(duì)事件起源目標(biāo)的引用。方法作用取消默認(rèn)事件阻止事件冒泡對(duì)象。用法向派發(fā)事件寫(xiě)在后面事件，是前端開(kāi)發(fā)中的一個(gè)基礎(chǔ)。

本文首發(fā)于公眾號(hào)：符合預(yù)期的CoyPan

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

用戶(hù)在某個(gè)元素上點(diǎn)擊鼠標(biāo)或懸停光標(biāo)。

用戶(hù)在鍵盤(pán)中按下某個(gè)按鍵。

用戶(hù)調(diào)整瀏覽器的大小或者關(guān)閉瀏覽器窗口。

一個(gè)網(wǎng)頁(yè)停止加載。

提交表單。

播放、暫停、關(guān)閉視頻。

發(fā)生錯(cuò)誤。

我們可以在代碼中使用事件處理器來(lái)處理各種事件。

假設(shè)我們有這么一段html代碼：

    
        

            

                

                    
Shady Grove
                    
Aeolain
                
                

                    
Over the River, Charile
                    
Dorian
                
            
        
    

如果我們點(diǎn)擊over the Rive, Charile，整個(gè)事件流程如下：

事件會(huì)經(jīng)歷三個(gè)階段，上圖中分別由紅色、藍(lán)色、綠色標(biāo)出。第一階段為紅色，事件流從根元素一直走到點(diǎn)擊的目標(biāo)元素，這個(gè)過(guò)程稱(chēng)為捕獲。第二階段為藍(lán)色, 稱(chēng)為目標(biāo)階段。這個(gè)階段中，會(huì)處理點(diǎn)擊事件，為事件加上各種屬性等。第三階段為綠色，事件又回重新回到根元素，這個(gè)過(guò)程稱(chēng)為冒泡。在整個(gè)事件流中，我們?cè)谑录鹘?jīng)過(guò)的任何元素上，都能監(jiān)聽(tīng)到該事件，從而進(jìn)行處理。

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

注意：blur、focus、load、unload 等幾個(gè)事件不會(huì)冒泡。
原因是在于：這些事件僅發(fā)生于自身上，而它的任何父節(jié)點(diǎn)上的事件都不會(huì)產(chǎn)生，所有不會(huì)冒泡。
我們可以查看事件的bubbles屬性，來(lái)判斷該事件是否可以冒泡。

EventTarget

EventTarget是一個(gè)由可以接收事件的對(duì)象實(shí)現(xiàn)的接口，并且可以為它們創(chuàng)建偵聽(tīng)器。Web中的所有事件處理器都是由EventTarget"提供"的。

addEventListener

該方法將指定的監(jiān)聽(tīng)器注冊(cè)到?EventTarget?上，當(dāng)該對(duì)象觸發(fā)指定的事件時(shí)，指定的回調(diào)函數(shù)就會(huì)被執(zhí)行。 事件目標(biāo)可以是一個(gè)文檔上的元素?Element,Document和Window或者任何其他支持事件的對(duì)象 (比如?XMLHttpRequest)。其標(biāo)準(zhǔn)語(yǔ)法如下：

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

type: 字符串。表示事件類(lèi)型，比如: click。

listener：函數(shù)。事件觸發(fā)時(shí)的回調(diào)函數(shù)。這個(gè)函數(shù)會(huì)接受一個(gè)Event事件對(duì)象。這個(gè)Event事件對(duì)象中，包含了以下重要的屬性和方法（這里只列舉出常用的）

options ：對(duì)象。指定一個(gè)listener的配置參數(shù)。

useCapture：布爾值，可選。默認(rèn)為false，事件在冒泡過(guò)程中觸發(fā)listener。

removeEventListener

刪除使用addEventListener注冊(cè)到target上的事件。標(biāo)準(zhǔn)語(yǔ)法：

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

為了提高頁(yè)面性能，我們?cè)谔幚硗昴呈录⑶也挥美^續(xù)監(jiān)聽(tīng)該事件時(shí)，可以將之前注冊(cè)的事件監(jiān)聽(tīng)函數(shù)移除。需要注意的是，如果注冊(cè)事件時(shí)，在捕獲或冒泡階段均進(jìn)行了監(jiān)聽(tīng)，那么移除時(shí)需要分別移除。

currentTarget 與 target的區(qū)別

在事件處理函數(shù)中，我們經(jīng)常會(huì)使用到事件的這兩個(gè)屬性。currentTarget表示注冊(cè)事監(jiān)聽(tīng)的對(duì)象。target表示事件起源的對(duì)象。舉個(gè)例子：

     
child1
     
child2
     
child3


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

我們將事件處理函數(shù)綁定在father上。現(xiàn)在，如果我們點(diǎn)擊的是child1，由于child1是事件源，那么e.target就是child1。而我們的事件處理函數(shù)是綁定在father上的，所以，e.currentTarget就是father。

這一點(diǎn)在開(kāi)發(fā)過(guò)程中需要特別注意。

這個(gè)概念依賴(lài)于這樣一個(gè)事實(shí),如果你想要在大量子元素中單擊任何一個(gè)都可以運(yùn)行一段代碼，您可以將事件監(jiān)聽(tīng)器設(shè)置在其父節(jié)點(diǎn)上，并將事件監(jiān)聽(tīng)器氣泡的影響設(shè)置為每個(gè)子節(jié)點(diǎn)，而不是每個(gè)子節(jié)點(diǎn)多帶帶設(shè)置事件監(jiān)聽(tīng)器。舉個(gè)例子：

    
1

    
2

    
3

    
4

    
5

    
6

    
7

    
8

    
9

我們要實(shí)現(xiàn)點(diǎn)擊每一個(gè)li的時(shí)候，輸出li內(nèi)對(duì)應(yīng)的數(shù)字，我們當(dāng)然可以直接在所有的li上分別綁定一個(gè)事件。但是這樣會(huì)造成內(nèi)存的浪費(fèi)。我們可以只在ul上綁定一個(gè)事件，根據(jù)事件的target來(lái)獲取當(dāng)前點(diǎn)擊的li，拿到該li內(nèi)對(duì)應(yīng)的數(shù)字。

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

最新的DOM標(biāo)準(zhǔn)允許我們自定義事件。直接看下面的例子。

var fakeNode = document.createElement("Coy"); // 創(chuàng)建一個(gè)自定義元素
var evt = document.createEvent("Event"); // 創(chuàng)建一個(gè)自定義事件
var evtType = "test"; // 自定義事件的類(lèi)型

// 事件監(jiān)聽(tīng)函數(shù)
fakeNode.addEventListener(evtType, function(e){ 
    console.log(e); // e.type === "test";
}, false);

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

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

事件，是前端開(kāi)發(fā)中的一個(gè)基礎(chǔ)。雖然簡(jiǎn)單，但是十分重要。

歡迎關(guān)注我的公眾號(hào): 符合預(yù)期的CoyPan
做一名符合預(yù)期的FE