CustomEvent 接口

CustomEvent 接口用于生成自定义的事件实例。那些浏览器预定义的事件，虽然可以手动生成，但是往往不能在事件上绑定数据。如果需要在触发事件的同时，传入指定的数据，就可以使用 CustomEvent 接口生成的自定义事件对象。

浏览器原生提供 CustomEvent() 构造函数，用来生成 CustomEvent 事件实例。

new CustomEvent(type, options)

CustomEvent() 构造函数接受两个参数。第一个参数是字符串，表示事件的名字，这是必须的。第二个参数是事件的配置对象，这个参数是可选的。 CustomEvent 的配置对象除了接受 Event 事件的配置属性，只有一个自己的属性。

• detail ：表示事件的附带数据，默认为 null 。

下面是一个例子。

var event = new CustomEvent('build', { 'detail': 'hello' });

function eventHandler(e) {
  console.log(e.detail);
}

document.body.addEventListener('build', function (e) {
  console.log(e.detail);
});

document.body.dispatchEvent(event);

上面代码中，我们手动定义了 build 事件。该事件触发后，会被监听到，从而输出该事件实例的 detail 属性（即字符串 hello ）。

下面是另一个例子。

var myEvent = new CustomEvent('myevent', {
  detail: {
    foo: 'bar'
  },
  bubbles: true,
  cancelable: false
});

el.addEventListener('myevent', function (event) {
  console.log('Hello ' + event.detail.foo);
});

el.dispatchEvent(myEvent);

上面代码也说明，CustomEvent 的事件实例，除了具有 Event 接口的实例属性，还具有 detail 属性。