dispatch js实现_(转)js原生自定义事件的触发dispatchEvent

1. 对于标准浏览器，其提供了可供元素触发的方法：element.dispatchEvent(). 不过，在使用该方法之前，我们还需要做其他两件事，及创建和初始化。因此，总结说来就是：

举个例子：

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对象。

与自定义事件的函数有 Event、CustomEvent 和 dispatchEvent

直接自定义事件，使用 Event 构造函数：

CustomEvent 可以创建一个更高度自定义事件，还可以附带一些数据，具体用法如下：

其中 options 可以是：

其中 detail 可以存放一些初始化的信息，可以在触发的时候调用。其他属性就是定义该事件是否具有冒泡等等功能。

内置的事件会由浏览器根据某些操作进行触发，自定义的事件就需要人工触发。dispatchEvent 函数就是用来触发某个事件：

使用自定义事件需要注意兼容性问题，而使用 jQuery 就简单多了：

2. 对于IE浏览器，由于向下很多版本的浏览器都不支持document.createEvent()方法，因此我们需要另辟蹊径(据说IE有document.createEventObject()和event.fireEvent()方法，但是不支持自定义事件~~)。

IE浏览器有不少自给自足的东西，例如下面要说的这个"propertychange"事件，顾名思意，就是属性改变即触发的事件。例如文本框value值改变，或是元素id改变，或是绑定的事件改变等等。

dom.evtAlert = "2012-04-01";

这个，当我们需要触发自定义事件的时候，只要修改DOM上自定义的evtAlert属性的值即可：

此时就会触发dom上绑定的onpropertychange事件，又因为修改的属性名正好是"evtAlert", 于是自定义的fn就会被执行。这就是IE浏览器下事件触发实现的完整机制，应该说讲得还是蛮细的。

自定义事件的删除与触发事件不同，事件删除，各个浏览器都提供了对于的时间删除方法，如removeEventListener和detachEvent。不过呢，对于IE浏览器，还要多删除一个事件，就是为了实现触发功能额外增加的onpropertychange事件：

来自司司徒正美的一段代码：

参考：http://www.zhangxinxu.com/wordpress/2012/04/js-dom%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/