Event

Event接口表示在DOM中发生的任何事件; 一些是用户生成的（例如鼠标或键盘事件），而其他由API生成(例如指示动画已经完成运行的事件，视频已被暂停等等)。有许多类型的事件，其中一些使用基于主要事件接口的其他接口。事件本身包含所有事件通用的属性和方法。

本章介绍了 DOM Event 模型。主要包括 Event 接口本身的描述以及在DOM节点上的事件注册， event listeners ，还有说明各种事件接口如何关联的一些较长的例子。

此处，我们向您推荐一个非常棒的框图，它在 DOM Level 3 Events draft 中，清楚了表明了DOM 事件流程的3个阶段。

要获取 DOM 中有关事件流程的更多的细节，也可以参考  Example 5: Event Propagation 。

注册事件帧听器

有三种方式可以为DOM元素注册事件处理函数。

EventTarget.addEventListener

// Assuming myButton is a button element
myButton.addEventListener('click', function(){alert('Hello world');}, false);

您可以在现代web页面中使用该方法。

在  EventTarget.addEventListener 参考文档页面，您可以获得更多的细节。

HTML 属性

<button onclick="alert('Hello world!')">

在属性中的JavaScript 代码，是通过 event 参数传入 Event 对象的。 在HTML规范中，其返回值会以一种特殊的方式被处理。

我们应该避免使用这种方式。因为它会使标记数量变大，而可读性却较差。 内容/结构 和 行为之间没有很好的分离，使得在处理bug时非常困难。

DOM 元素属性

// Assuming myButton is a button element
myButton.onclick = function(event){alert('Hello world');};

该函数在定义时，可以传入一个 event 形式的参数。 在HTML 规范中，其返回值会以一种特殊的方式被处理。

这种方法的问题在于每个元素和事件只能设置一个处理函数。

DOM Event 接口

事件处理函数可以附加在各种对象上，包括 DOM元素，window 对象 等。当事件发生时， event 对象就会被创建并依次传递给事件监听器。

在处理函数中，将event对象作为第一个参数参数，可以访问 DOM Event 接口。下面简单的实例则简单说明了 event对象是如何传入事件处理函数，在函数中是如何被使用的。

function foo(evt) {
  // the evt parameter is automatically assigned the event object
  alert(evt);
}
table_el.onclick = foo;

DOM event 子类

属性

Event.bubbles 只读

一个布尔值，用来表示该事件是否在DOM中冒泡。

Event.cancelBubble

Event.stopPropagation() 以前的别名。通过在一个事件处理程序返回前设置这个属性的值为真，来阻止事件的传播。

Event.cancelable 只读

一个布尔值，用来表示这个时间是否可以取消。

Event.composed 只读

A Boolean value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.

Event.currentTarget 只读

当前注册事件的对象的引用。这是一个这个事件目前需要传递到的对象（译者：大概意思就是注册这个事件监听的对象）。这个值会在传递的途中进行改变。

Event.deepPath 

一个由事件流经过了的 DOM Node 组成的 Array 

Event.defaultPrevented 只读

一个布尔值，表示了是否已经执行过了event.preventDefault()（译者：其实应该就是是否已经阻止默认行为）

Event.eventPhase 只读

指示事件流正在处理哪个阶段。

Event.explicitOriginalTarget 只读

The explicit original target of the event (Mozilla-specific).

Event.originalTarget 只读

The original target of the event, before any retargetings (Mozilla-specific).

Event.returnValue

A non-standard alternative (from old versions of Microsoft Internet Explorer) to Event.preventDefault() and Event.defaultPrevented.

Event.scoped 只读

A Boolean indicating whether the given event will bubble across through the shadow root into the standard DOM. This property has been renamed to composed.

Event.srcElement

A non-standard alias (from old versions of Microsoft Internet Explorer) for Event.target.

Event.target 只读

对事件起源目标的引用。

Event.timeStamp 只读

The time at which the event was created, in milliseconds. By specification, this value is time since epoch, but in reality browsers' definitions vary; in addition, work is underway to change this to be a DOMHighResTimeStamp instead.

Event.type 只读

事件的名称（不区分大小写）。

Event.isTrusted 只读

Indicates whether or not the event was initiated by the browser (after a user click for instance) or by a script (using an event creation method, like event.initEvent)

方法

event.initEvent

Initializes the value of an Event created through the DocumentEvent interface.

event.preventBubble 已废弃 Gecko 24

Prevents the event from bubbling. Obsolete, use event.stopPropagation instead.

event.preventCapture 已废弃 Gecko 24

Obsolete, use event.stopPropagation instead.

event.preventDefault

Cancels the event (if it is cancelable).

event.stopImmediatePropagation

For this particular event, no other listener will be called. Neither those attached on the same element, nor those attached on elements which will be traversed later (in capture phase, for instance)

event.stopPropagation

Stops the propagation of events further along in the DOM.

参考

• 有效的事件类型: Event reference
•  Event 目标的比较  (目标 vs 当前目标 vs 相关目标 vs 初始目标)
• 创建和触发自定义事件
• 为Firefox 插件的开发者准备：
  • Listening to events in Firefox extensions
  • Listening to events on all tabs
• Mozilla related events in real life at wiki.mozilla.org