摘要：事件監(jiān)聽(tīng)器可以被添加到節(jié)點(diǎn)上并在給定事件發(fā)生時(shí)觸發(fā)。可以選擇觸發(fā)階段冒泡捕獲事件機(jī)制標(biāo)準(zhǔn)事件標(biāo)準(zhǔn)規(guī)定事件流包含三個(gè)階段，分別為事件捕獲階段，目標(biāo)階段，事件冒泡階段。返回其事件監(jiān)聽(tīng)器觸發(fā)該事件的元素。清理事務(wù)設(shè)置檢查點(diǎn)的標(biāo)志為。

前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開(kāi)課啦（每周四）。

前面我們已經(jīng)基本掌握常規(guī)的語(yǔ)法語(yǔ)義，以及基本的使用方法。接下來(lái)我們講深入進(jìn)去了解其中內(nèi)在的原理。

事件機(jī)制

事件對(duì)象（Event）

event loop

DOM（Document Object Model——文檔對(duì)象模型）是用來(lái)呈現(xiàn)以及與任意 HTML 或 XML文檔交互的 API。DOM 是載入到瀏覽器中的文檔模型，以節(jié)點(diǎn)樹(shù)的形式來(lái)表現(xiàn)文檔，每個(gè)節(jié)點(diǎn)代表文檔的構(gòu)成部分（例如:頁(yè)面元素、字符串或注釋等等）。
DOM 是萬(wàn)維網(wǎng)上使用最為廣泛的 API 之一，因?yàn)樗试S運(yùn)行在瀏覽器中的代碼訪問(wèn)文件中的節(jié)點(diǎn)并與之交互。節(jié)點(diǎn)可以被創(chuàng)建，移動(dòng)或修改。事件監(jiān)聽(tīng)器可以被添加到節(jié)點(diǎn)上并在給定事件發(fā)生時(shí)觸發(fā)。
DOM 并不是天生就被規(guī)范好了的，它是瀏覽器開(kāi)始實(shí)現(xiàn)JavaScript時(shí)才出現(xiàn)的。這個(gè)傳統(tǒng)的 DOM 有時(shí)會(huì)被稱為 DOM 0。現(xiàn)在， WHATWG 維護(hù)DOM現(xiàn)存標(biāo)準(zhǔn)。
-- MDN

既然 DOM 有版本，那么在他的環(huán)境上事件的支持也是有版本的。文檔

body.onclick 這種定義方式的。

不可以多次監(jiān)聽(tīng)事件，因?yàn)槭琴x值的方式，下次賦值會(huì)覆蓋。

只可以在冒泡階段觸發(fā)

addEventListener 方式定義的。

可以多次監(jiān)聽(tīng)，切按監(jiān)聽(tīng)順序執(zhí)行回調(diào)（有序）

取消監(jiān)聽(tīng)需要同一引用的函數(shù)。舉個(gè)栗子

    // 錯(cuò)誤案例，兩個(gè)方法不是同一引用，導(dǎo)致清除不掉
    document.addEventListener("click", function(){})
    document.removeEventListener("click", function(){})
    
    // 正確案例，同一引用，可以清除。
    function documentClick(){}
    document.addEventListener("click", documentClick)
    document.removeEventListener("click", documentClick)    

可以選擇觸發(fā)階段（冒泡&捕獲） capture

標(biāo)準(zhǔn)事件：EMCAScript 標(biāo)準(zhǔn)規(guī)定事件流包含三個(gè)階段，分別為事件捕獲階段，目標(biāo)階段，事件冒泡階段。
先存?zhèn)€代碼，之后的例子我們用這個(gè)例子。測(cè)試看我這里的 DEMO

    
        click
    

捕獲階段：由外到內(nèi)，觸發(fā)規(guī)律為 html > body > a。
如果想在捕獲階段就觸發(fā)，需要傳入?yún)?shù) {capture: true}

冒泡階段：由內(nèi)到外，觸發(fā)規(guī)律為 a > body > html
這個(gè)階段執(zhí)行是 W3C 默認(rèn)的，等價(jià)于 {capture: false}

圖片來(lái)源-https://www.w3.org/TR/DOM-Lev...
事件的捕獲階段 > 處于目標(biāo)階段 > 事件的冒泡階段 > 事件的默認(rèn)行為
這里為什么要強(qiáng)調(diào)這個(gè)順序呢？

因?yàn)槟J(rèn)行為是在最后面，所以我們都可以用 e.preventDefault() 來(lái)阻止。

基于上條的阻止默認(rèn)事件。在移動(dòng)端滑動(dòng)時(shí)，阻止默認(rèn)事件需要手動(dòng)設(shè)置 passive 為 false。
passive: Boolean，設(shè)置為 true 時(shí)，表示 listener 永遠(yuǎn)不會(huì)調(diào)用 preventDefault()。如果 listener 仍然調(diào)用了這個(gè)函數(shù)，客戶端將會(huì)忽略它并拋出一個(gè)控制臺(tái)警告。

我們真正單擊的元素的事件觸發(fā)不在冒泡和捕獲階段，而在目標(biāo)階段觸發(fā)。 DEMO-冒泡&捕獲階段觸發(fā)事件，可以看到，他是通過(guò)定義時(shí)的先后順序來(lái)觸發(fā)的。

Event 對(duì)象--mdn

IE: event.cancelBubble=true; //阻止事件冒泡

IE: event.returnValue=false; //阻止事件的默認(rèn)行為

獲取事件 window.event

DOM event 子類，根據(jù)不同的事件類型，返回的對(duì)象會(huì)有些許不同，比如 Mouse 類型的，就會(huì)有單擊坐標(biāo)之類的。 KeyboardEvent 之類的就會(huì)有按鍵之類的。

CustomEvent() --mdn

document.body.onclick=function(e){console.log(e)}
var btn=document.body;
var event= new CustomEvent("click");
btn.dispatchEvent(event);

其實(shí)這里我們可以自定義事件的名稱，然后我們就可以實(shí)現(xiàn)一個(gè)發(fā)布訂閱的功能。

document.addEventListener("bus", function(e) { console.log(e, e.detail) });
var event = new CustomEvent("bus", {detail: {LN_type: "lilnong.top"}});
document.dispatchEvent(event);

首先，我們要牢記一件事情 js 是單線程
Event Loop 中文叫事件循環(huán)。是瀏覽器內(nèi)部的一種機(jī)制，javaScript 單線程運(yùn)行時(shí)如何不阻塞 UI。
Javascript 有一個(gè) main thread 主線程和 call-stack 調(diào)用棧(執(zhí)行棧)，所有的任務(wù)都會(huì)被放到調(diào)用棧(棧采用的是后進(jìn)先出的規(guī)則)等待主線程執(zhí)行。

在 JavaScript 中，任務(wù)被分為兩種，一種宏任務(wù)（MacroTask）也叫Task，一種叫微任務(wù)（MicroTask）。