js自定义事件

定义与触发

在JavaScript前端开发中，我们经常调用click、mouseup等基本事件。有的时候，为了满足特定功能的要求，我们需要自定义事件，这就要说到自定义事件的运作机制。
对于标准浏览器，其提供了可供元素触发的方法：element.dispatchEvent(). 使用该方法之前需要进行创建和初始化。因此，总结说来就是：

document.createEvent()
event.initEvent()
element.dispatchEvent()

具体详解

// 创建
var evt = document.createEvent("HTMLEvents");
// 初始化，事件类型，是否冒泡，是否阻止浏览器的默认行为
evt.initEvent("alert", false, false);

// 触发
dom.dispatchEvent(evt);

createEvent()方法返回新创建的Event对象，支持一个参数，表示事件类型，具体见下表：

参数	事件接口	初始化方法
HTMLEvents	HTMLEvent	initEvent()
MouseEvents	MouseEvent	initMouseEvent()
UIEvents	UIEvent	initUIEvent()

initEvent()方法用于初始化通过DocumentEvent接口创建的Event的值。支持三个参数：initEvent(eventName, canBubble, preventDefault). 分别表示事件名称，是否可以冒泡，是否阻止事件的默认操作。

dispatchEvent()就是触发执行了，dom.dispatchEvent(eventObject), 参数eventObject表示事件对象，是createEvent()方法返回的创建的Event对象。