您的搜索结果

Event

在本文章中

简介

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

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

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

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

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

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

注意: Internet Explorer 6-8 并不支持这个方法，而是提供了类似的 element.attachEvent API 。如果要进行跨浏览器使用，请考虑使用有效的JavaScript 库。

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

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

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

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

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

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

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

事件处理函数可以附加在各种对象上，包括 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;

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.

此页面的贡献者： teoli, ReyCG_sub, ziyunfei, jinyc, TigerSoldier

最后编辑者: teoli, Feb 24, 2015, 3:52:02 PM

另见