创建和触发 events

本文演示了如何创建和分发（dispatch） 事件。

创建自定义事件 (Custom events)

Events 可以使用 Event构造函数 创建如下:

var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);

// Dispatch the event.
elem.dispatchEvent(event);

绝大多数现代浏览器中都会支持这个构造函数（Internet Explorer 例外）。 要了解更为复杂的方法，可参考下面的 过时的方法  一节。

添加自定义数据 – CustomEvent()

To add more data to the event object, the CustomEvent interface exists and the detail property can be used to pass custom data.
CustomEvent 接口可以为 event 对象添加更多的数据。例如，event 可以创建如下：

var event = new CustomEvent('build', { 'detail': elem.dataset.time });

下面的代码允许你在事件监听器中访问更多的数据：

function eventHandler(e) {
  log('The time is: ' + e.detail);
}

过时的方法

这种过时的创建事件的方法使用了受 Java启发的API。下面的代码给出了一个例子：

// Create the event.
var event = document.createEvent('Event');

// Define that the event name is 'build'.
event.initEvent('build', true, true);

// Listen for the event.
document.addEventListener('build', function (e) {
  // e.target matches document from above
}, false);

// target can be any Element or other EventTarget.
document.dispatchEvent(event);

触发内置 events

下面的例子演示了一个在单选框上点击（click）的模拟（就是说在程序里生成一个click事件），这个模拟点击使用了DOM方法. 参见这个动态示例

function simulateClick() {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.getElementById('checkbox'); 
  var canceled = !cb.dispatchEvent(event);
  if (canceled) {
    // A handler called preventDefault.
    alert("canceled");
  } else {
    // None of the handlers called preventDefault.
    alert("not canceled");
  }
}

浏览器兼容性

See also

• document.createEvent()
• Event.initEvent()
• EventTarget.dispatchEvent()
• EventTarget.addEventListener()