JavaScript中如何实现自定义事件代码实例详解

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

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

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

其中 options 可以是：

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

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

上面代码表示，在 element 上面触发 customEvent 这个事件。结合起来用就是：

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

JavaScript 自定义事件就是有别于如 click, submit 等标准事件的自行定制的事件，在叙述自定义事件有何好处之前，先来看一个自定义事件的例子：

具体效果可以查看 Demo，在 console 中输入 obj.dispatchEvent(evt)，可以看到 console 中输出“customEvent 事件触发了”，表示自定义事件成功触发。

在这个过程中，createEvent 方法创建了一个空事件 evt，然后使用 initEvent 方法定义事件的类型为约定好的自定义事件，再对相应的元素进行监听，接着，就是使用 dispatchEvent 触发事件了。

没错，自定义事件的机制如普通事件一样——监听事件，写回调操作，触发事件后执行回调。但不同的是，自定义事件完全由我们控制触发时机，这就意味着实现了一种 JavaScript 的解耦。我们可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好。

当然，可能你已经猜到了，上面的代码在低版本的 IE 中并不生效，事实上在 IE8 及以下版本的 IE 中并不支持 createEvent()，而有 IE 私有的 fireEvent() 方法，但遗憾的是，fireEvent 只支持标准事件的触发。因此，我们只能使用一个特殊而简单的方法触发自定义事件。

这个方法的原理实际上是在 DOM 中增加一个自定义属性，同时监听元素的 propertychange 事件，当 DOM 的某个属性的值发生改变时就会触发 propertychange 的回调，再在回调中判断发生改变的属性是否为我们的自定义属性，若是则执行开发者实际定义的回调。从而模拟了自定义事件的机制。

为了使到自定义事件的机制能配合标准事件的监听和模拟触发，这里给出一个完整的事件机制，这个机制支持标准事件和自定义事件的监听，移除监听和模拟触发操作。需要注意的是，为了使到代码的逻辑更加清晰，这里约定自定义事件带有 'custom' 的前缀（例如：customTest，customAlert）。

完整的代码在 Demo。

打开 Demo 后，在 console 中调用 testBox.trigger('customConsole') 自行触发自定义事件，可以看到 console 输出两个提示语，再输入 testBox.remove('customConsole', triggerAgain) 移除对后一个监听，这时再使用 testBox.trigger('customConsole') 触发自定义事件，可以看到 console 只输出一个提示语，即成功移除后一个监听，至此事件机制所有功能正常工作。

以上就是JavaScript中如何实现自定义事件代码实例详解的详细内容，更多请关注Gxl网其它相关文章！