簡述 DOM 事件模型及DOM 事件機制

捕獲

<div class='爺爺'>
    <div class='爸爸'>
        <div class='兒子'></div>
    </div>
</div>
複製代碼

捕獲從 爺爺 => 爸爸 => 兒子 看有沒有函數監聽

冒泡

冒泡從 兒子 => 爸爸 => 爺爺 看有沒有函數監聽

冒泡事件

微軟提出的 事件由子元素傳遞到父元素的過程，叫作冒泡

捕獲事件

網景提出的 事件由父元素到子元素傳遞的過程，叫作捕獲

捕獲與冒泡

W3C標準 首先 捕獲 ，再冒泡

綁定在被點擊元素的事件是按照代碼的順序發生的，其餘非綁定的元素則是經過冒泡或者捕獲的觸發。按照W3C的標準，先發生捕獲事件，後發生冒泡事件。因此事件的總體順序是：非目標元素捕獲 -> 目標元素代碼順序 -> 非目標元素冒泡

事件綁定 API addEventListener

W3C: baba.addEventListener('click',fn,bool)
複製代碼

若是不傳bool值 默認爲false，冒泡

若是 bool 值爲 true， 捕獲

target 與 currentTarget 區別

e.target 用戶操做的元素
e.currentTarget 程序員監聽的元素
複製代碼

取消冒泡

捕獲不能取消，冒泡能夠 e.stopPropagation 中斷冒泡