Event

简介

本章介绍了 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

A boolean indicating whether the event bubbles up through the DOM or not.

event.cancelBubble

A boolean indicating whether the bubbling of the event has been canceled or not.

event.cancelable

A boolean indicating whether the event is cancelable.

event.currentTarget

A reference to the currently registered target for the event.

event.defaultPrevented

Indicates whether or not event.preventDefault() has been called on the event.

event.eventPhase

Indicates which phase of the event flow is being processed.

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.target

A reference to the target to which the event was originally dispatched.

event.timeStamp

The time that the event was created.

event.type

The name of the event (case-insensitive).

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