一、Event對(duì)象

1、簡(jiǎn)介

? 事件event對(duì)象是指在瀏覽器中觸發(fā)事件時(shí)，瀏覽器會(huì)自動(dòng)創(chuàng)建一個(gè)event對(duì)象，其中存儲(chǔ)了本次事件相關(guān)的信息，包括事件類型、事件目標(biāo)、觸發(fā)元素等等。瀏覽器創(chuàng)建完event對(duì)象之后，會(huì)自動(dòng)將該對(duì)象作為參數(shù)傳遞給綁定的事件處理函數(shù)，我們可以在事件處理函數(shù)中通過訪問event對(duì)象的屬性和方法，來獲取事件的相關(guān)信息，并做出后續(xù)的邏輯處理。

? 事件可以由用戶操作觸發(fā)，例如：鼠標(biāo)事件、鍵盤事件等等；也可以通過 JS 腳本代碼來觸發(fā)，例如：通過element.click()方法，觸發(fā)對(duì)應(yīng)元素的點(diǎn)擊事件；還可以由API生成，例如：動(dòng)畫完成后觸發(fā)對(duì)應(yīng)事件、視頻播放被暫停時(shí)觸發(fā)對(duì)應(yīng)事件；最后還可以通過自定義事件來進(jìn)行觸發(fā)。這四種方式都會(huì)創(chuàng)建并傳遞event對(duì)象。

? 除了我們自己綁定的事件處理函數(shù)之外，瀏覽器會(huì)對(duì)某些元素的某些事件存在默認(rèn)處理，例如： a 標(biāo)簽的click點(diǎn)擊事件，默認(rèn)處理為跳轉(zhuǎn)到鏈接的地址。當(dāng)然我們也可以通過event對(duì)象的preventDefault() 方法來阻止瀏覽器的默認(rèn)處理。

? 我們還需要注意元素的嵌套關(guān)系，因?yàn)橛捎谠亟Y(jié)構(gòu)上的重疊，事件會(huì)隨著嵌套關(guān)系依次傳遞，也就是事件冒泡和事件捕獲。

2、Event對(duì)象示例

3、常用屬性

① event.bubbles（只讀）

? 該屬性值為布爾值，表示當(dāng)前事件是否會(huì)進(jìn)行冒泡，true表示會(huì)冒泡，false表示不會(huì)冒泡。在前端事件大部分都是默認(rèn)冒泡的，例如：click、mousedown等等；但也有一些特殊事件是默認(rèn)不冒泡的，例如：focus、blur等等。

② event.cancelBubble

? 該屬性值為布爾值，表示是否阻止當(dāng)前事件的冒泡，默認(rèn)為false，不阻止冒泡；設(shè)置為true則表示阻止當(dāng)前事件冒泡。目前該屬性已經(jīng)完全被stopPropagetion()方法所取代，雖然部分瀏覽器處于兼容性的考慮依舊支持該屬性，但后續(xù)隨時(shí)有可能停止支持，因此盡量不要使用該屬性。

③ event.cancelable（只讀）

? 該屬性值為布爾值，表示當(dāng)前事件的默認(rèn)行為是否可以被取消，即是否能通過event.preventDefault()來取消默認(rèn)行為，true表示可以取消，false表示不可以取消。

? 如果是自定義事件，則在初始化事件時(shí)可以聲明該事件是否可以被取消。

④ event.composed（只讀）

? 該屬性值為布爾值，曾用名：scoped，表示當(dāng)前事件是否可以打破屏障，從Shadow DOM冒泡傳遞到普通DOM，如果值為true表示當(dāng)事件可以冒泡，即bubbles屬性為true時(shí)，事件可以從Shadow DOM冒泡傳遞到普通DOM，此時(shí)可以通過composedPath()方法，來獲取事件冒泡的路徑；如果值為false，則表示事件不會(huì)跨越Shadow DOM與普通DOM的屏障進(jìn)行冒泡。

? 關(guān)于Shadow DOM的概念，在下面有進(jìn)行講解。

⑤ event.currentTarget（只讀）

? 該屬性值為一個(gè)DOM，表示當(dāng)前事件所綁定的那個(gè)DOM元素。而且要注意的是，該屬性值只能在事件處理函數(shù)的過程中event.currentTarget直接調(diào)用使用，如果我們通過console.log(event)輸出事件對(duì)象，如同上面的示例，我們會(huì)發(fā)現(xiàn)該屬性值的值為null，無法訪問到正確的值。我們?cè)谡{(diào)試階段，還可以通過在事件處理函數(shù)中設(shè)置debugger暫停代碼執(zhí)行，從而在輸出的event對(duì)象上看到該屬性正確的值。

⑥ event.target（只讀）

? 該屬性值為一個(gè)DOM，表示觸發(fā)當(dāng)前事件的那個(gè)DOM元素。通常情況下該屬性的值與event.currentTarget相同，但是如果當(dāng)前事件是在冒泡或者捕獲階段被調(diào)用，則兩者的值不同，target的值為觸發(fā)事件的DOM，currentTarget的值為綁定事件的DOM。

? 我們還可以借助target屬性實(shí)現(xiàn)事件委托，又稱事件代理，是指在要對(duì)一批子元素設(shè)置類似的事件處理器時(shí)，利用事件冒泡的機(jī)制，將事件處理器綁定到其公共父元素上，然后通過target屬性，來區(qū)分是由哪個(gè)子元素觸發(fā)的事件，并進(jìn)行相應(yīng)的邏輯處理。這樣即可以大大的減少事件處理器的數(shù)量，提高性能，又可以動(dòng)態(tài)地添加或刪除子元素而不需要添加或刪除相應(yīng)的事件處理器，減少代碼復(fù)雜度。

target與currentTarget在冒泡階段對(duì)比

案例代碼：

<div id="divBox">
  <div id="divClick">
    這里觸發(fā)點(diǎn)擊事件
  </div>
</div>

<script>
  // 事件綁定在子元素上 此時(shí) target = 
  document.querySelector('#divClick').addEventListener('click', function (e) {
    console.log(e)
    console.log(e.target)
    console.log(e.currentTarget)
  })
  document.querySelector('#divBox').addEventListener('click', function (e) {
    console.log(e)
    console.log(e.target)
    console.log(e.currentTarget)
  })
</script>

執(zhí)行結(jié)果：

⑦ event.defaultPrevented（只讀）

? 該屬性值為布爾值，表示當(dāng)前事件是否調(diào)用了event.preventDefault()方法，從而阻止了瀏覽器的默認(rèn)行為，true表示已經(jīng)調(diào)用過，false表示還未調(diào)用。

⑧ event.returnValue

? 屬性值為布爾值，表示當(dāng)前事件的默認(rèn)行為是否執(zhí)行，該屬性可讀可寫，true表示正常執(zhí)行，false表示阻止默認(rèn)行為。該屬性是由IE率先引入，最后被收入web規(guī)范，該屬性相當(dāng)于event.defaultPrevented和event.preventDefault()的結(jié)合。

案例代碼：

<a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  id="a0">不阻止默認(rèn)行為</a>
<a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  id="a1">event.returnValue阻止默認(rèn)行為</a>
<a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  id="a2">event.preventDefault()阻止默認(rèn)行為</a>

<script>
  document.querySelector('#a0').addEventListener('click', function (e) {
    // 不阻止默認(rèn)行為
    console.log('不阻止默認(rèn)行為的e.returnValue---', e.returnValue)
    // 打斷點(diǎn) 暫停頁(yè)面跳轉(zhuǎn) 方便查看控制臺(tái)輸出
    debugger
  })
  document.querySelector('#a1').addEventListener('click', function (e) {
     // 阻止默認(rèn)行為
     e.returnValue = false
     console.log('通過returnValue = false阻止默認(rèn)行為的e.returnValue---', e.returnValue)
  })
  document.querySelector('#a2').addEventListener('click', function (e) {
    // 阻止默認(rèn)行為
    e.preventDefault()
    console.log('通過preventDefault()阻止默認(rèn)行為的e.returnValue---', e.returnValue)
  })
</script>

執(zhí)行結(jié)果：

⑨ event.eventPhase（只讀）

? 該屬性值為整數(shù)數(shù)值，表示事件流的當(dāng)前執(zhí)行階段，共分為四個(gè)階段，每個(gè)階段有不同的事件階段常量，如下：

事件流的執(zhí)行過程：

? 當(dāng)我們通過event.eventPhase獲取當(dāng)前事件流的執(zhí)行階段時(shí)，會(huì)直接獲取到當(dāng)前事件階段常量的值，我們可以直接根據(jù)值判斷事件流的執(zhí)行階段，也可以通過對(duì)比event.eventPhase與事件階段常量是否強(qiáng)相等(===)，判斷事件流的執(zhí)行階段。

案例代碼：

<div id="div0">
  <div id="div1">事件流演示</div>
</div>
<script>
   // addEventListener設(shè)置第三個(gè)參數(shù)為true 表示在捕獲階段觸發(fā)事件
    document.querySelector('#div0').addEventListener('click', function (e) {
      console.log('div0--', e)
      // 輸出事件階段常量的值
      console.log('捕獲階段的事件階段常量---', e.eventPhase)
      // 判斷事件階段是否為捕獲階段
      console.log(e.eventPhase === Event.CAPTURING_PHASE)
    }, true)
    // addEventListener設(shè)置第三個(gè)參數(shù)為false或者不設(shè)置 表示在冒泡階段觸發(fā)事件
    document.querySelector('#div0').addEventListener('click', function (e) {
      console.log('div0--', e)
      // 輸出事件階段常量的值
      console.log('冒泡階段的事件階段常量---', e.eventPhase)
      // 判斷事件階段是否為冒泡階段
      console.log(e.eventPhase === Event.BUBBLING_PHASE)
    })
    // 目標(biāo)元素
    document.querySelector('#div1').addEventListener('click', function (e) {
      console.log('div1--', e)
      // 輸出事件階段常量的值
      console.log('到達(dá)目標(biāo)元素的事件階段常量---', e.eventPhase)
      // 判斷事件階段是否為到達(dá)目標(biāo)元素階段
      console.log(e.eventPhase === Event.AT_TARGET)
    })
</script>

執(zhí)行結(jié)果：

⑩ event.timeStamp（只讀）

? 該屬性值為一個(gè)數(shù)值，表示從文檔加載完成，到當(dāng)前事件被觸發(fā)之間的的毫秒數(shù)，Chrome、Safari和Edge返回的是帶有小數(shù)的毫秒數(shù)，F(xiàn)ireFox返回的是不帶小數(shù)的毫秒數(shù)。

? 因?yàn)楦鞔鬄g覽器之間的返回值并不統(tǒng)一，所以不太建議使用該屬性。

案例代碼：

<div style="width: 200px;height: 30px;" id="div2">點(diǎn)擊獲取事件發(fā)生時(shí)的毫秒數(shù)</div>

<script>
  // 獲取事件發(fā)生時(shí)的毫秒數(shù)
    document.querySelector('#div2').addEventListener('click', function (e) {
      console.log('事件發(fā)生時(shí)的毫秒數(shù)---', e.timeStamp)
    })
</script>

執(zhí)行結(jié)果：

? event.type（只讀）

? 該屬性值是一個(gè)字符串，表示當(dāng)前事件的類型，不區(qū)分大小寫。

案例代碼：

<div style="width: 200px;height: 30px;" id="div3">
  點(diǎn)擊獲取事件的type屬性
</div>

<script>
  // 獲取事件的type屬性
    document.querySelector('#div3').addEventListener('click', function (e) {
      console.log('事件的type屬性---', e.type)
    })
</script>

執(zhí)行結(jié)果：

? event.isTrusted（只讀）

? 該屬性值是一個(gè)布爾值，表示當(dāng)前事件是由用戶行為觸發(fā)，還是通過JS腳本觸發(fā)，true表示用戶行為觸發(fā)，false表示腳本觸發(fā)。

案例代碼：

<div style="width: 200px;height: 30px;" id="div4">點(diǎn)擊獲取事件的isTrusted屬性</div>
<div id="div5"></div>

<script>
   // 獲取用戶手動(dòng)觸發(fā)時(shí)事件的isTrusted屬性
    document.querySelector('#div4').addEventListener('click', function (e) {
      console.log('用戶手動(dòng)觸發(fā)時(shí)事件的isTrusted屬性---', e.isTrusted)
      // 設(shè)置定時(shí)器模擬腳本觸發(fā)事件
      setTimeout(() => {
        document.querySelector('#div5').click();
      }, 1000)
    })
    // 獲取腳本觸發(fā)時(shí)事件的isTrusted屬性
    document.querySelector('#div5').addEventListener('click', function (e) {
      console.log('腳本觸發(fā)時(shí)事件的isTrusted屬性---', e.isTrusted)
    })
</script>

執(zhí)行結(jié)果：

4、常用方法

① event.composedPath()

? 該方法用來獲取當(dāng)前事件的事件傳播路徑，從觸發(fā)元素到最外層Window，而且阻止冒泡的方法不會(huì)影響到事件的傳播路徑。如果Shadow DOM根節(jié)點(diǎn)觸發(fā)事件，并且ShadowRoot.mode是關(guān)閉的，則獲取的路徑中將不包括Shadow DOM節(jié)點(diǎn)。

案例代碼：

<div id="div0">
  <div id="div0Son">
    驗(yàn)證target和currentTarget
  </div>
</div>

<script>
    // 獲取事件對(duì)象的事件路徑
    document.querySelector('#div0Son').addEventListener('click', function (e) {
      // 阻止事件冒泡 但并不會(huì)影響事件的傳播路徑
      e.stopPropagation()
      // 通過e.composedPath()獲取事件對(duì)象的事件路徑
      console.log(e.composedPath())
    })
</script>

執(zhí)行結(jié)果：

② event.preventDefault()

? 該方法用來取消當(dāng)前事件的默認(rèn)行為，當(dāng)然如果當(dāng)前事件存在冒泡行為，即bubbles屬性為true，那么事件的冒泡行為還是會(huì)繼續(xù)向上傳播，不會(huì)被影響。

案例代碼：

<div id="div1">
  <input type="checkbox" id="checkbox">
</div>

<script>
    // 阻止多選按鈕的默認(rèn)行為
    document.querySelector('#checkbox').addEventListener('click', function (e) {
      e.preventDefault()
    })
    // 驗(yàn)證阻止默認(rèn)行為后是否會(huì)繼續(xù)冒泡
    document.querySelector('#div1').addEventListener('click', function (e) {
      console.log('阻止默認(rèn)行為后會(huì)繼續(xù)冒泡')
    })
</script>

執(zhí)行結(jié)果：

③ event.stopPropagation()

? 該方法用來阻止當(dāng)前事件在捕獲階段和冒泡階段中的傳播，如果點(diǎn)擊了子元素，但是在子元素中阻止了事件的冒泡，那么父元素對(duì)應(yīng)的事件不會(huì)被觸發(fā)；如果點(diǎn)擊了子元素，但是在父元素中阻止了事件的捕獲傳播，那么子元素對(duì)應(yīng)的事件將不會(huì)被觸發(fā)。

案例代碼：

<div id="div2">
  <div id="div2Son">
    驗(yàn)證stopPropagation()方法阻止事件冒泡傳播
  </div>
</div>
<div id="div3">
  <div id="div3Son">
    驗(yàn)證stopPropagation()方法阻止事件捕獲傳播
  </div>
</div>

<script>
    // 驗(yàn)證stopPropagation()方法阻止事件冒泡
    document.querySelector('#div2Son').addEventListener('click', function (e) {
      console.log('子元素阻止事件冒泡');
      e.stopPropagation()
    })
    // 驗(yàn)證stopPropagation()方法阻止事件冒泡后父元素是否接收到冒泡的事件
    document.querySelector('#div2').addEventListener('click', function (e) {
      console.log('父元素是否接收到冒泡的事件')
    })
    // 驗(yàn)證stopPropagation()方法阻止事件捕獲傳播
    document.querySelector('#div3').addEventListener('click', function (e) {
      console.log('父元素阻止事件捕獲傳播');
      e.stopPropagation()
    }, true)
    // 驗(yàn)證stopPropagation()方法阻止事件捕獲后子元素是否接收到捕獲的事件
    document.querySelector('#div3Son').addEventListener('click', function (e) {
      console.log('子元素是否接收到捕獲傳播的事件')
    }, true)
</script>

執(zhí)行結(jié)果：

④ event.stoplmmediatePropagation()

? 該方法用來阻止當(dāng)前事件的其他事監(jiān)聽器被觸發(fā)，如果我們通過addEventListener()方法給同一個(gè)事件，增加多個(gè)事件監(jiān)聽器，那當(dāng)該事件被觸發(fā)時(shí)，多個(gè)事件監(jiān)聽器會(huì)按照添加的順序依次執(zhí)行。但如果我們?cè)谄渲心硞€(gè)事件監(jiān)聽器綁定的函數(shù)中，執(zhí)行event.stoplmmediatePropagation()方法，那么位于該事件監(jiān)聽器之后的其他監(jiān)聽器將不會(huì)被觸發(fā)。

案例代碼：

<div id="div4">
  驗(yàn)證stopImmediatePropagation()法
</div>

<script>
  // 驗(yàn)證stopImmediatePropagation()方法
    document.querySelector('#div4').addEventListener('click', function (e) {
      console.log('第一個(gè)事件監(jiān)聽器');
    })
    document.querySelector('#div4').addEventListener('click', function (e) {
      console.log('第二個(gè)事件監(jiān)聽器');
      // 阻止后續(xù)事件監(jiān)聽器的執(zhí)行
      e.stopImmediatePropagation()
    })
    document.querySelector('#div4').addEventListener('click', function (e) {
      console.log('第三個(gè)事件監(jiān)聽器');
    })
</script>

執(zhí)行結(jié)果：

5、Shadow DOM

? Shadow DOM 是Web components 的核心內(nèi)容，用于構(gòu)建獨(dú)立的web組件，可以將一個(gè)DOM樹和相應(yīng)的CSS樣式封裝隔離起來，與頁(yè)面的常規(guī)DOM相互隔離，不會(huì)出現(xiàn)影響和沖突。然后可以將封裝的Shadow DOM附加到常規(guī)的DOM節(jié)點(diǎn)上。操作Shadow DOM 的方式與常規(guī)DOM并無太大區(qū)別，都可以給DOM添加子節(jié)點(diǎn)、設(shè)置屬性，以及為節(jié)點(diǎn)添加自己的樣式。唯一有所不同的是：Shadow DOM內(nèi)部的元素除了設(shè)置 :focus-within之外，設(shè)置其他任何屬性都不會(huì)影響到常規(guī) DOM。

? Shadow DOM 有以下四個(gè)主要概念：

• Shadow host：一個(gè)常規(guī)的DOM節(jié)點(diǎn)，Shadow DOM將會(huì)附加在該節(jié)點(diǎn)上。
• Shadow tree：一個(gè)DOM樹，即Shadow DOM 內(nèi)部的DOM結(jié)構(gòu)。
• Shadow boundary：Shadow DOM與常規(guī)DOM的分界線，是 Shadow DOM 結(jié)束的地方，也是常規(guī) DOM 開始的地方。
• Shadow root ：Shadow tree所代表的DOM樹的根節(jié)點(diǎn)。

Shadow DOM主要概念圖解：

? 雖然Shadow DOM看起來比較陌生，但這并不是一個(gè)新特性，瀏覽器很早之前便在使用該特性，例如：<video>標(biāo)簽，雖然我們?cè)贒OM中只能看到一個(gè)單獨(dú)的標(biāo)簽，但其實(shí)在該標(biāo)簽的Shadow DOM中，包含了進(jìn)度條、播放按鈕、倍速按鈕等DOM結(jié)構(gòu)。 Firefox（從版本 63 開始）、Chrome、Opera 、 Safari、Edge 都默認(rèn)支持 Shadow DOM。

二、自定義事件

1、簡(jiǎn)介

? 在日常開發(fā)中我們通常使用的都是瀏覽器提前定義好的事件，例如：點(diǎn)擊事件click、失去焦點(diǎn)事件blur等等。當(dāng)這些基礎(chǔ)事件不能滿足我們的業(yè)務(wù)需求時(shí)，我們也可以通過創(chuàng)建自定義Event事件對(duì)象來自定義相關(guān)事件。

? 目前實(shí)現(xiàn)自定義事件的方式有兩種：Event()構(gòu)造函數(shù)和CustomEvent()構(gòu)造函數(shù)。

? 觸發(fā)自定義事件的方式為：element.dispatchEvent(event)。

2、Event()

? 構(gòu)造函數(shù)Event(typeArg[,eventInit])用來創(chuàng)建一個(gè)新的event事件對(duì)象，該構(gòu)造函數(shù)擁有兩個(gè)參數(shù)：第一個(gè)參數(shù)typeArg為必填參數(shù)，參數(shù)值為DOMString類型，表示所創(chuàng)建事件的名稱；第二個(gè)參數(shù)eventInit為可選參數(shù)，參數(shù)值為EventInit類型的對(duì)象數(shù)據(jù)，擁有三條可選屬性：① bubbles：屬性值為Boolean類型，默認(rèn)值為false，表示創(chuàng)建的事件是否能進(jìn)行冒泡。② cancelable：屬性值為Boolean類型，默認(rèn)值為false，表示創(chuàng)建的事件的行為是否可以被preventDefault()取消。③ composed： 屬性值為為Boolean類型，默認(rèn)值為false，表示創(chuàng)建的事件是否可以穿透Shadow DOM 與常規(guī)DOM的屏障，進(jìn)行冒泡。

案例代碼：

<div class="div1">
  <div class="div1Son">
    驗(yàn)證自定義事件
  </div>
</div>

<script>
    // 1、創(chuàng)建一個(gè)支持冒泡，支持取消，支持穿透 的look事件
    let myEvent = new Event('look', { "bubbles": true, "cancelable": true, "composed": true });
    // 2、監(jiān)聽自定義事件
    document.querySelector('.div1Son').addEventListener('look', function (e) {
      console.log('監(jiān)聽到自定義事件----', e.type)
    })
    // 3、利用點(diǎn)擊事件 去觸發(fā)自定義事件
    document.querySelector('.div1Son').addEventListener('click', function (e) {
      // 觸發(fā)自定義事件
      document.querySelector('.div1Son').dispatchEvent(myEvent)
    })
    // 4、監(jiān)聽父元素是否收到冒泡的自定義事件
    document.querySelector('.div1').addEventListener('look', function (e) {
      console.log('父元素是否收到冒泡的自定義事件----', e.type)
    })
</script>

執(zhí)行結(jié)果：

3、CustomEvent()

? 構(gòu)造函數(shù)CustomEvent(typeArg[,customEventInit])用來創(chuàng)建一個(gè)新的CustomEvent事件對(duì)象，該構(gòu)造函數(shù)擁有兩個(gè)參數(shù)：第一個(gè)參數(shù)typeArg為必填參數(shù)，參數(shù)值為DOMString類型，表示所創(chuàng)建事件的名稱；第二個(gè)可選參數(shù)customEventInit，參數(shù)值為CustomEventInit 類型的對(duì)象數(shù)據(jù)，擁有四條可選屬性：① bubbles：屬性值為Boolean類型，默認(rèn)值為false，表示創(chuàng)建的事件是否能進(jìn)行冒泡。② cancelable：屬性值為Boolean類型，默認(rèn)值為false，表示創(chuàng)建的事件的行為是否可以被preventDefault()取消。③ composed： 屬性值為為Boolean類型，默認(rèn)值為false，表示創(chuàng)建的事件是否可以穿透Shadow DOM 與常規(guī)DOM的屏障，進(jìn)行冒泡。④ detail：屬性值為任意類型的數(shù)據(jù)，默認(rèn)值為null，通常用來表示與當(dāng)前事件相關(guān)的信息。

? Event 接口是 CustomEvent 接口的父級(jí)接口，因此 CustomEvent 繼承了 Event 的所有屬性和方法，并且在 Event 的基礎(chǔ)上添加了一個(gè) detail 屬性，用于在事件處理程序中傳遞自定義數(shù)據(jù)。除此之外，CustomEvent 還允許我們?cè)谑录?duì)象上添加自定義屬性和方法，以便在事件處理程序中使用。這使得我們可以創(chuàng)建更靈活、更具體的事件類型，并在事件處理程序中訪問和操作事件對(duì)象。

? 總的來說：CustomEvent 是自定義的事件類型，可操作性強(qiáng)，可以更好地滿足開發(fā)人員的特定需求，而 Event 則更適合表示標(biāo)準(zhǔn)的、通用的事件類型，可操作性弱。

案例代碼：

<div class="div2">
  <div class="div2Son">
    驗(yàn)證CustomEvent()構(gòu)造函數(shù)創(chuàng)建自定義事件
  </div>
</div>

<script>
    // 利用CustomEvent()構(gòu)造函數(shù)創(chuàng)建自定義事件
    // 1、創(chuàng)建一個(gè)支持冒泡，支持取消，支持穿透，具有自定義屬性 的look事件
    let myEvent2 = new CustomEvent('look', {
      "bubbles": true, "cancelable": true, "composed": false, detail: {
        info: '這是CustomEvent的detail屬性', // 自定義屬性
        getTime: function () { // 自定義方法
          return new Date()
        }
      }
    });
    // 2、監(jiān)聽自定義事件
    document.querySelector('.div2Son').addEventListener('look', function (e) {
      console.log('監(jiān)聽到自定義事件----', e)
      console.log('調(diào)用自定義事件上的自定義方法----', e.detail.getTime())
    })
    // 3、利用點(diǎn)擊事件 去觸發(fā)自定義事件
    document.querySelector('.div2Son').addEventListener('click', function (e) {
      // 觸發(fā)自定義事件
      document.querySelector('.div2Son').dispatchEvent(myEvent2)
    })
    // 4、監(jiān)聽父元素是否收到冒泡的自定義事件
    document.querySelector('.div2').addEventListener('look', function (e) {
      console.log('父元素是否收到冒泡的自定義事件----', e.type)
    })
</script>

執(zhí)行結(jié)果：

三、相關(guān)資料

事件參考

Event

CustomEvent

shadow DOM

:focus-within

總結(jié)

到此這篇關(guān)于JavaScript事件Event對(duì)象(屬性、方法、自定義事件)的文章就介紹到這了,更多相關(guān)JS事件Event對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論