创建和触发 events

本文演示了如何创建和分派DOM事件。这些事件通常称为合成事件,而不是浏览器本身触发的事件。

创建自定义事件

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);
}

老式的方式

警告: 这种创建 events 的方式已经过时了。请使用 event 构造函数来替代。

早期的创建事件的方法使用了受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);

触发内置事件

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

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

 动态事例

<input type="checkbox" id="checkbox"/><label for="checkbox">Checkbox</label>
<!-- Simulate click -->
<input type="button" onclick="simulateClick();" value="Simulate click"/>
<!-- Add a click handler that calls preventDefault -->
<input type="button" onclick="addHandler();" value="Add a click handler that calls preventDefault"/>
<!-- Remove the click handler that calls preventDefault -->
<input type="button" onclick="removeHandler();" value="Remove the click handler that calls preventDefault"/>
function preventDef(event) {
  event.preventDefault();
}

function addHandler() {
  document.getElementById("checkbox").addEventListener("click", 
    preventDef, false);
}

function removeHandler() {
  document.getElementById("checkbox").removeEventListener("click",
    preventDef, false);
}

function simulateClick() {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var cb = document.getElementById("checkbox"); 
  var canceled = !cb.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Event() constructor 15 11 9 11.60 6
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? 6

也可以看看

文档标签和贡献者

 此页面的贡献者: xgqfrms-GitHub, ZhengYinBo, carllx, timwangdev, FredWe, ReyCG_sub
 最后编辑者: xgqfrms-GitHub,