在 JS 中模擬事件指的是模擬 JS 中定義的一些事件，例如點(diǎn)擊事件，鍵盤事件等。

自定義事件指的是創(chuàng)建一個(gè)自定義的，JS 中之前沒有的事件。

接下來分別說一下創(chuàng)建這兩種事件的方法。

創(chuàng)建自定義事件

創(chuàng)建自定義事件可以使用 Event 和 CustomEvent 兩種方法，接下來分別做一下介紹。

1. 利用 Event

MDN Event

Event 用法

event = new Event(typeArg, eventInit);

typeArg：指定事件類型，傳遞一個(gè)字符串。這里的事件類型指的是像點(diǎn)擊事件（click）、提交事件（submit）、加載事件（load）等等。

eventInit：可選，也可以以鍵值對的形式設(shè)置以下屬性。

　　bubbles：事件是否支持冒泡，傳遞一個(gè)boolean類型的參數(shù)，默認(rèn)值為false。

　　cancelable：是否可取消事件的默認(rèn)行為，傳遞一個(gè)boolean類型的參數(shù)，默認(rèn)值為false。

　　composed：事件是否會(huì)觸發(fā)shadow DOM（陰影DOM）根節(jié)點(diǎn)之外的事件監(jiān)聽器，傳遞一個(gè)boolean類型的參數(shù)，默認(rèn)值為false。

示例

  <section id="Event">
    <div id="root"></div>
    <script type="text/javascript">
      // 創(chuàng)建事件對象
      const newEvent = new Event('customType', { bubbles:true,cancelable:true,composed:true })
      // 獲取 DOM 元素
      const div = document.getElementById('root')
      // 綁定事件對象
      document.addEventListener('customType', () => {
        alert('自定式 customType 事件執(zhí)行了')
      })
      // 觸發(fā)事件對象(真正開發(fā)中可以滿足某個(gè)條件后才觸發(fā)事件)
      div.dispatchEvent(newEvent)
    </script>
  </section>

2. 利用 CustomEvent

CustomEvent() 可以像 Event() 那樣使用，但它也可以在 Web Workers 中使用（與主線程分離的另一個(gè)線程），可以傳遞跟事件關(guān)聯(lián)的相關(guān)值（detail），detail 的默認(rèn)值為null，類型為any（也就是說可以傳遞任意類型的參數(shù)），這個(gè)值就是和事件相關(guān)聯(lián)的值。

通過示例可以很明白地看出來兩者的區(qū)別。

  <section id="CustomEvent">
    <div id="root"></div>
    <script type="text/javascript">
      // 創(chuàng)建事件對象
      const newEvent = new CustomEvent('customType', { 
        bubbles:true,
        cancelable:true,
        composed:true,
        detail: {
          log: '我是 detail 屬性中的'
        }
      })
      // 獲取 DOM 元素
      const div = document.getElementById('root')
      // 綁定事件對象
      document.addEventListener('customType', () => {
        // 打印 event.detail.log 的值
        alert(`自定式 customType 事件執(zhí)行了,${event.detail.log}`)
      })
      // 觸發(fā)事件對象(真正開發(fā)中可以滿足某個(gè)條件后才觸發(fā)事件)
      div.dispatchEvent(newEvent)
    </script>
  </section>

可以看到在 event 對象中會(huì)有 detail 屬性，我們可以輸出 detail 屬性中的內(nèi)容。

創(chuàng)建模擬事件

想要模擬用戶的點(diǎn)擊等行為，可以通過模擬事件來實(shí)現(xiàn)。

步驟：

1）在 document 對象上使用 createEvent() 方法創(chuàng)建 event 對象，這個(gè)方法接收一個(gè)創(chuàng)建類型的字符串，主要有下面四種。

• UIevents：一般化的 UI 事件，鼠標(biāo)和鍵盤事件都繼承自 UI 事件，DOM3 中是 UIEvent。
• MouseEvents：鼠標(biāo)事件，DOM3 中是 MouseEvent。
• MutationEvents：DOM 變動(dòng)事件，DOM3 中是 MutationEvent。
• HTMLEvents：HTML 事件。

使

2）初始化事件對象

在使用 document.createEvent() 創(chuàng)建出一個(gè) event 對象之后，event 對象上會(huì)得到一個(gè)初始化的屬性，不同類型的 Event 對象屬性名不同，例如 MouseEvent 類型對應(yīng)的屬性就是 initMouseEvent .

3）觸發(fā)事件

在實(shí)際開發(fā)中當(dāng)滿足一定條件后我們可以使用 DOM元素.dispatchEvent(event) 來觸發(fā)事件。

接下來以模擬鼠標(biāo)點(diǎn)擊事件為例，說明一下上面的各個(gè)步驟。定義了一個(gè) div 元素，綁定了一個(gè) click 事件處理程序，內(nèi)容是 alert('我不是用戶點(diǎn)擊的')，然后再模擬觸發(fā) click 事件，可以發(fā)現(xiàn)即使在用戶不點(diǎn)擊時(shí)也可以彈出 '我不是用戶點(diǎn)擊的'.

  <section id="SimulateEvent">
    <div id="root"></div>
    <script type="text/javascript">
      // 獲取 DOM 元素
      const div = document.getElementById('root')
      // 綁定事件處理程序
      div.addEventListener('click', () => {
        alert('我不是用戶點(diǎn)擊的')
      }, false)
      // 創(chuàng)建鼠標(biāo)事件對象
      const event = document.createEvent('MouseEvents')
      // 初始化事件對象
      event.initMouseEvent('click', true, true, document.defaultView)
      // 觸發(fā)事件對象(真正開發(fā)中可以滿足某個(gè)條件后才觸發(fā)事件)
      div.dispatchEvent(event)
    </script>
  </section>

從上面的結(jié)果可以看到，即使我們沒有點(diǎn)擊 div 元素，它也會(huì)執(zhí)行綁定的 click 的事件處理程序，原因就在于我們通過程序模擬了點(diǎn)擊事件。