JavaScript之模拟事件（事件）

模拟事件

浏览器事件的相关信息有：Event对象、事件类型、事件处理程序。那么模拟出的事件也应该有这些信息。

DOM中的事件模拟

模拟事件的步骤：

第一步：通过document.createEvent()方法创建event对象。

可以在document对象上使用 createEvent()方法创建 event事件对象。该方法接收一个参数，表示事件类型的字符串。DOM2中字符串是以复数表示的，在DOM3中字符串是以单数表示。表示事件类型的字符串有：DOM2中表示事件类型的字符串

• UIEvents：UI事件，鼠标事件与键盘事件继承于UI事件。DOM3中是UIEvents
• MouseEvents：鼠标事件。DOM3中是MouseEvent
• MutationEvents：变动事件
• HTMLEvents：HTML事件，没有对应的DOM3级

第二步：初始化创建的event对象。使用initMouseEvent、initKeyboardEvent、initMutationEvent并加上与事件有关的信息分别初始化鼠标、键盘、变动事件对象。

与初始化事件对象有关的常见属性有：

• type：表示触发事件的类型
• bubble：表示是否应该冒泡，建议设置为true。
• cancelable：表示是否只可以取消事件，建议设置为true。
• view：表示事件视图。

第三步：使用 dispatchEvent()触发模拟的事件。该方法接收一个参数，该参数就是创建的事件对象。这个方法由页面中的一个元素调用使用。

模拟鼠标事件

使用