本文演示了如何创建和分派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()

要向事件对象添加更多数据,可以使用CustomEven,detail属性可用于传递自定义数据
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");
  }
}

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

也可以看看

 

文档标签和贡献者

 最后编辑者: Iamxiaozhu,