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

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

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

事件機制

事件對象（Event）

event loop

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

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

body.onclick 這種定義方式的。

不可以多次監(jiān)聽事件，因為是賦值的方式，下次賦值會覆蓋。

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

addEventListener 方式定義的。

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

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

    // 錯誤案例，兩個方法不是同一引用，導(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ī)定事件流包含三個階段，分別為事件捕獲階段，目標(biāo)階段，事件冒泡階段。
先存?zhèn)€代碼，之后的例子我們用這個例子。測試看我這里的 DEMO

    
        click
    

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

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

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

因為默認(rèn)行為是在最后面，所以我們都可以用 e.preventDefault() 來阻止。

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

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

Event 對象--mdn

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

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

獲取事件 window.event

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

CustomEvent() --mdn

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

其實這里我們可以自定義事件的名稱，然后我們就可以實現(xiàn)一個發(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)部的一種機制，javaScript 單線程運行時如何不阻塞 UI。
Javascript 有一個 main thread 主線程和 call-stack 調(diào)用棧(執(zhí)行棧)，所有的任務(wù)都會被放到調(diào)用棧(棧采用的是后進(jìn)先出的規(guī)則)等待主線程執(zhí)行。

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