• 基本概念：DOM事件的級別
• DOM事件模型（冒泡和捕獲）
• DOM事件流
• 描述DOM事件捕獲的集體流程
• Event對象的常見應(yīng)用
• 自定義事件

DOM事件類 事件級別

• DOM0 element.onclick=function(){}
• DOM2
  element.addEventListener('click',function(){},false)
• DOM3(增加了多種事件類型，比如鼠標事件，鍵盤事件）
  element.addEventListener('keyup',function(){},false)false默認為冒泡階段

DOM事件模型

就是冒泡和捕獲兩種，捕獲是從上往下，冒泡是從當前元素也就是目標元素往上。

DOM事件流

第一階段：捕獲
第二階段：目標階段
第三階段：冒泡

描述DOM事件捕獲的集體流程

(補充：document.documentElement獲取html這個節(jié)點）
第一個接收到的對象是window，然后傳給document，再傳給html，再傳給目標元素的父級元素，然后傳給目標元素。

然后再往回一層一層冒泡

Event對象的常見應(yīng)用

分別對應(yīng)：
1.阻止默認事件
2.阻止事件冒泡
3.設(shè)置事件優(yōu)先級。阻止事件冒泡并且阻止相同事件的其他偵聽器被調(diào)用。如果有多個相同類型事件的事件監(jiān)聽函數(shù)綁定到同一個元素，當該類型的事件觸發(fā)時，它們會按照被添加的順序執(zhí)行。如果其中某個監(jiān)聽函數(shù)執(zhí)行了 event.stopImmediatePropagation() 方法，則當前元素剩下的監(jiān)聽函數(shù)將不會被執(zhí)行。

            p.addEventListener("click", (event) => {
              alert("我是p元素上被綁定的第二個監(jiān)聽函數(shù)");
              event.stopImmediatePropagation();
              // 執(zhí)行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上綁定的其他click事件的事件監(jiān)聽函數(shù)的執(zhí)行.
            }, false);

            p.addEventListener("click",(event) => {
              alert("我是p元素上被綁定的第三個監(jiān)聽函數(shù)");
              // 該監(jiān)聽函數(shù)排在上個函數(shù)后面，該函數(shù)不會被執(zhí)行
            }, false);

            document.querySelector("div").addEventListener("click", (event) => {
              alert("我是div元素,我是p元素的上層元素");
              // p元素的click事件沒有向上冒泡，該函數(shù)不會被執(zhí)行
            }, false);

4.往往用于事件委托中，獲取當前被點擊的元素
5.當前所綁定的事件對象，如事件委托中所綁定的父級對象。

自定義事件

通過new Event創(chuàng)建自定義事件
dispatchEvent來觸發(fā)事件。

代碼演示：

注意：觸發(fā)的時候，不是事件名，是事件對象。