详解JavaScript中的自定义事件编写

我们可以自定义事件来实现更灵活的开发，事件用好了可以是一件很强大的工具，基于事件的开发有很多优势（后面介绍）。

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

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

var event = new Event('build');// Listen for the event.elem.addEventListener('build', function (e) { ... }, false);// Dispatch the event.elem.dispatchEvent(event);

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

var myEvent = new CustomEvent(eventname, options);

其中 options 可以是：

{  detail: {    ...  },  bubbles: true,  cancelable: false}

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

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

element.dispatchEvent(customEvent);

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

// add an appropriate event listenerobj.addEventListener("cat", function(e) { process(e.detail) });// create and dispatch the eventvar event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});obj.dispatchEvent(event);

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

// 绑定自定义事件$(element).on('myCustomEvent', function(){});// 触发事件$(element).trigger('myCustomEvent');此外，你还可以在触发自定义事件时传递更多参数信息：$( "p" ).on( "myCustomEvent", function( event, myName ) { $( this ).text( myName + ", hi there!" );});$( "button" ).click(function () { $( "p" ).trigger( "myCustomEvent", [ "John" ] );});

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

<div id="testBox"></div>// 创建事件var evt = document.createEvent('Event');// 定义事件类型evt.initEvent('customEvent', true, true);// 在元素上监听事件var obj = document.getElementById('testBox');obj.addEventListener('customEvent', function(){  console.log('customEvent 事件触发了');}, false);

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

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