JS事件模拟

Posted on Edited on

事件通常是在由用户和浏览器进行交互时触发，其实通过 Javascript 也可以在任何时间触发特定的事件。这种能力在测试web应用程序的时候，模拟事件是非常有用的。

事件模拟三步

  1. 通过 document.createEvent() 方法创建 event 对象，接收一个参数，即表示要创建的事件类型的字符串：
    • UIEvents：通用的 UI 事件，鼠标事件键盘事件都是继承自UI事件，在 DOM3 级上使用的是 UIEvent 。
    • MouseEvents：通用的鼠标事件，在 DOM3 级上使用的是 MouseEvent 。
    • MutationEvents：通用的突变事件，在 DOM3 级上使用的是 MutationEvent 。
    • HTMLEvents：通用的 HTML 事件，在 DOM3 级上还没有等效的。
  1. 在创建了event对象之后，还需要使用与事件有关的信息对其进行初始化。每种类型的event对象都有一个特殊的方法，为它传入适当的数据就可以初始化该event对象。用 event.init……() 此类行的方法。
  2. 触发事件。这需要使用 dispatchEvent()方法，接收一个参数，即表示要触发的 event 对象。

实例

以模拟鼠标事件为例，首先创建鼠标事件对象的方法 createEvent()传入MouseEvents，返回的对象的方法 initMouseEvent()，接收15个信息：

  1. type（字符串）：事件类型如“click”；
  2. bubble（布尔值）：是否冒泡；
  3. cancelable（布尔值）：是否可取消；
  4. view（AbstractView）：与事件关联的视图，一般为document.defaultView；
  5. detail（整数）：一般为0，一般只有事件处理程序使用；
  6. screenX（整数）：事件相对于屏幕的X坐标；
  7. screenY（整数）；
  8. clientX（整数）：事件相对于视口的X坐标；
  9. clientY（整数）；
  10. ctrlKey（布尔值）：是否按下了Ctrl键，默认为false；
  11. altKey（布尔值）；
  12. shiftKey（布尔值）；
  13. metaKey（布尔值）；
  14. button（整数）：表示按下了哪个鼠标键，默认为0；
  15. relatedTarget（对象）：表示与事件相关的对象。一般只有在模拟mouseover与mouseout时使用。

最后记得把 event 对象传给 dispatchEvent() 方法。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
var btn = document.querySelector("#btn");
//创建event
var event = document.createEvent("MouseEvents");
//初始化event
event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
//click事件绑定事件处理程序
btn.onclick = function () {
    console.log("hello");
}
//触发事件
btn.dispatchEvent(event); //hello
//取消引用
btn.onclick = null;