使用createEvent和dispatchEvent模拟事件

事件 Event#

一般来说事件都是由用户触发，如鼠标、键盘事件，JavaScript 中通过addEventListener来绑定事件被触发相应的函数

Document.createEvent()#

可以通过createEvent来创建一个指定类型事件，然后通过dispatchEvent来触发它，从而达到模拟事件触发的目的，比如模拟一个屏幕大小变化的过程，代码如下

1
// 创建UIEvents类型事件
2
const evt = document.createEvent("UIEvents");
3
// 定义事件名称resize
4
evt.initEvent("resize", true, false, window, 0);
5
// 触发
6
window.dispatch(evt);

接着可以通过addEventListener来监听

1
window.addEventListener(
2
  "resize",
3
  (e) => {
4
    console.log("触发resize");
5
  },
6
  false
7
);

模拟鼠标点击事件

1
const evt1 = document.createEvent("MouseEvents");
2
evt1.initEvent("click", false, false);
3
window.dispatchEvent(evt1);
4
window.addEventListener("click", (e) => {
5
  console.log("click");
6
});

步骤#

1. document.createEvent(Event type)接收一个 Event type 字符串来创建对应的事件

   • UIEvents UI 事件
   • MouseEvents 鼠标事件
   • MutationEvents DOM 变动事件
   • HTMLEvents HTML 事件

2. 创建 event 对象后，需要调用对应的initEvent进行初始化

   1
   // type 定义事件类型的字符串
   2
   // canBubble 是否冒泡
   3
   // cancelable 是否可以用preventDefault()取消事件
   4
   // view window对象
   5
   // detail 有关事件的详细信息
   6
   initUIEvent(type, canBubble, cancelable, view, detail);

3. 通过window.dispatch(event)触发自定义事件