JS 中的自定义事件和模拟事件

2020 年 4 月 21 日
筆記
javascript

在 JS 中模拟事件指的是模拟 JS 中定义的一些事件，例如点击事件，键盘事件等。

自定义事件指的是创建一个自定义的，JS 中之前没有的事件。

接下来分别说一下创建这两种事件的方法。

创建自定义事件

创建自定义事件可以使用 Event 和 CustomEvent 两种方法，接下来分别做一下介绍。

1. 利用 Event

MDN Event

Event 用法

event = new Event(typeArg, eventInit);

typeArg：指定事件类型，传递一个字符串。这里的事件类型指的是像点击事件（click）、提交事件（submit）、加载事件（load）等等。

eventInit：可选，也可以以键值对的形式设置以下属性。

　　bubbles：事件是否支持冒泡，传递一个boolean类型的参数，默认值为false。

　　cancelable：是否可取消事件的默认行为，传递一个boolean类型的参数，默认值为false。

　　composed：事件是否会触发shadow DOM（阴影DOM）根节点之外的事件监听器，传递一个boolean类型的参数，默认值为false。

示例

  <section id="Event">
    <div id="root"></div>
    <script type="text/javascript">
      // 创建事件对象
      const newEvent = new Event('customType', { bubbles:true,cancelable:true,composed:true })
      // 获取 DOM 元素
      const div = document.getElementById('root')
      // 绑定事件对象
      document.addEventListener('customType', () => {
        alert('自定式 customType 事件执行了')
      })
      // 触发事件对象(真正开发中可以满足某个条件后才触发事件)
      div.dispatchEvent(newEvent)
    </script>
  </section>

2. 利用 CustomEvent

CustomEvent() 可以像 Event() 那样使用，但它也可以在 Web Workers 中使用（与主线程分离的另一个线程），可以传递跟事件关联的相关值（detail），detail 的默认值为null，类型为any（也就是说可以传递任意类型的参数），这个值就是和事件相关联的值。

通过示例可以很明白地看出来两者的区别。

  <section id="CustomEvent">
    <div id="root"></div>
    <script type="text/javascript">
      // 创建事件对象
      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 事件执行了,${event.detail.log}`)
      })
      // 触发事件对象(真正开发中可以满足某个条件后才触发事件)
      div.dispatchEvent(newEvent)
    </script>
  </section>

可以看到在 event 对象中会有 detail 属性，我们可以输出 detail 属性中的内容。

创建模拟事件

想要模拟用户的点击等行为，可以通过模拟事件来实现。

步骤：

1）在 document 对象上使用 createEvent() 方法创建 event 对象，这个方法接收一个创建类型的字符串，主要有下面四种。

UIevents：一般化的 UI 事件，鼠标和键盘事件都继承自 UI 事件，DOM3 中是 UIEvent。
MouseEvents：鼠标事件，DOM3 中是 MouseEvent。
MutationEvents：DOM 变动事件，DOM3 中是 MutationEvent。
HTMLEvents：HTML 事件。

使

2）初始化事件对象

在使用 document.createEvent() 创建出一个 event 对象之后，event 对象上会得到一个初始化的属性，不同类型的 Event 对象属性名不同，例如 MouseEvent 类型对应的属性就是 initMouseEvent .

3）触发事件

在实际开发中当满足一定条件后我们可以使用 DOM元素.dispatchEvent(event) 来触发事件。

接下来以模拟鼠标点击事件为例，说明一下上面的各个步骤。定义了一个 div 元素，绑定了一个 click 事件处理程序，内容是 alert('我不是用户点击的')，然后再模拟触发 click 事件，可以发现即使在用户不点击时也可以弹出 '我不是用户点击的'.

  <section id="SimulateEvent">
    <div id="root"></div>
    <script type="text/javascript">
      // 获取 DOM 元素
      const div = document.getElementById('root')
      // 绑定事件处理程序
      div.addEventListener('click', () => {
        alert('我不是用户点击的')
      }, false)
      // 创建鼠标事件对象
      const event = document.createEvent('MouseEvents')
      // 初始化事件对象
      event.initMouseEvent('click', true, true, document.defaultView)
      // 触发事件对象(真正开发中可以满足某个条件后才触发事件)
      div.dispatchEvent(event)
    </script>
  </section>

从上面的结果可以看到，即使我们没有点击 div 元素，它也会执行绑定的 click 的事件处理程序，原因就在于我们通过程序模拟了点击事件。

Tags: javascript