前言

想必大家对于JS当中的事件并不陌生了。我们通过html或dom的方式指定某个事件的处理程序，然后当某个特定的场景（如点击、聚焦、输入等）发生时在触发这些处理程序。每当这个时候我就在想能否有办法可以定制一个事件，又或是摆脱特定场景的桎梏，能够自由的触发一个事件。想要实现这些效果就需要跳到另一个角度去看JS当中的事件。

1.JS事件的本质

JS中事件的本质其实就是一个对象，因此不同类型的事件就对应了不同的类，例如click事件源自 MouseEvent类，键盘事件源自KeyboardEvent类，聚焦事件源自FocusEvent类。而上述的这些类型追本溯源又都继承自Event类。因此通过Event类，或者它的派生类，我们就可以自己通过编程的方式创建一个事件。

所有的事件类都接收两个参数：typeArg和eventinit。

typeArg 用于指定事件名称
eventinit 可选，它是一个用于指定事件的相关信息的集合，这些信息会在事件处理程序的 event对象中体现出来。注意不同事件类型的eventinit集合中所接收的字段不同，请查阅相关文档。

那么此时我就已经可以自己创建一个click事件：

JavaScript 复制代码

const myClickEvent = new MouseEvent('click',{
    bubbles:true,//是否冒泡
    cancelable:true,//是否可取消
    clientX:10,//事件触发时鼠标在浏览器窗口中的位置
    clientY:20,
})

2.事件派发

现在我们已经能够自己创建一个事件，但仅仅如此还不能实现事件模拟，因为我们创建的事件还无法使用。想要使用事件，就要通过EventTarget.dispatchEvent()方法进行事件派发。

EventTarget是事件目标类型，它有三个方法addEventListener、removeEventListener和dispatchEvent。所有可能的事件目标，例如 Element、document、window，都会实现这三个方法。

因此我们就可以使用dispatchEvent()方法将之前创建的click事件派发给某个元素。

JavaScript 复制代码

document.getElementById('eventButton').dispatchEvent(myClickEvent)

3.事件模拟

有了上两节的知识，此时我们就可以实现事件模拟了：

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
  <body>
    <button id="eventButton">事件按钮</button>
    <script>
      const eventButton = document.getElementById('eventButton')

      // 监听事件
      eventButton.addEventListener('click', function (event) {
        console.log('event', event)
        console.log('this', this)
      })

      // 创建一个点击事件
      const myClickEvent = new MouseEvent('click', {
        bubbles: true, //是否冒泡
        cancelable: true, //是否可取消
        clientX: 10, //事件触发时鼠标在浏览器窗口中的位置
        clientY: 20,
      })

      // 派发创建的点击事件
      eventButton.dispatchEvent(myClickEvent)
    </script>
  </body>
</html>

上面的代码中，无需点击按钮即可自动触发它的点击事件。

并且事件对象中的clientX、clientY属性，正是我们创建点击事件时所设置的值

4.自定义事件

在前面我们实现了模拟事件，那么如果我们不是想模拟一个现有的事件，而是想创建一个自定义的事件又应该如何实现呢？

可以使用Event类来创建自定义事件。

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      button {
        width: 80px;
        height: 30px;
      }

      div {
        width: 500px;
        height: 500px;
        background-color: red;
        visibility: hidden;
      }
    </style>
  </head>
  <button onclick="handleClick()">显示元素</button>
  <div id="element1"></div>
  <body>
    <script>
      const div = document.getElementById('element1')

      //监听show事件
      div.addEventListener('show', (e) => {
        alert(`元素${e.target.id}显示成功`)
      })

      //创建一个show事件   
      const myEvent = new Event('show')

      //当点击按钮时,显示div元素,并触发其show事件   
      function handleClick() {
        div.style.visibility = 'visible'
        div.dispatchEvent(myEvent)
      }
    </script>
  </body>
</html>

在上面的代码中我创建了一个自定义的show事件，当点击按钮时就会显示元素div并触发div的show事件。

如果想要给事件对象添加自定义的数据，那就可以利用CustomEvent类型来创建自定义事件。CustomEvent是专门的自定义事件类型，它的eventinit参数中有一个字段detail可以让我们用于传递数据。

JavaScript 复制代码

const myEvent = new CustomEvent('transfer',{
    detail:'机密数据'
})

window.addEventListener('transfer',(event)=>{
    console.log(event.detail);
})

window.dispatchEvent(myEvent)

参考资料

JS模拟事件与自定义事件

前言

1.JS事件的本质

2.事件派发

3.事件模拟

4.自定义事件