1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
---
title: 事件與DOM
slug: Web/API/Document_Object_Model/Events
translation_of: Web/API/Document_Object_Model/Events
original_slug: Web/API/Document_Object_Model/事件
---
<h2 id="Introduction" name="Introduction">Introduction</h2>
<p>This chapter describes the DOM Event Model. The <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a> interface itself is described, as well as the interfaces for event registration on nodes in the DOM, and <a href="/en-US/docs/Web/API/EventTarget.addEventListener">event listeners</a>, and several longer examples that show how the various event interfaces relate to one another.</p>
<p>There is an excellent diagram that clearly explains the three phases of event flow through the DOM in the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events draft</a>.</p>
<p>Also see <a href="/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Example 5: Event Propagation</a> in the Examples chapter for a more detailed example of how events move through the DOM.</p>
<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Registering event listeners</h2>
<p>There are 3 ways to register event handlers for a DOM element.</p>
<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener"><a href="/en-US/docs/Web/API/EventTarget.addEventListener"><code>EventTarget.addEventListener</code></a></h3>
<pre class="brush: js">// Assuming myButton is a button element
myButton.addEventListener('click', function(){alert('Hello world');}, false);
</pre>
<p>This is the method you should use in modern web pages.</p>
<p>Note: Internet Explorer 6-8 didn't support this method, offering a similar {{domxref("EventTarget.attachEvent")}} API instead. For cross-browser compatibility use one of the many JavaScript libraries available.</p>
<p>More details can be found on the {{domxref("EventTarget.addEventListener")}} reference page.</p>
<h3 id="HTML_attribute" name="HTML_attribute"><a href="/en-US/docs/Web/Guide/HTML/Event_attributes">HTML attribute</a></h3>
<pre class="brush: html"><button onclick="alert('Hello world!')">
</pre>
<p>The JavaScript code in the attribute is passed the Event object via the <code>event</code> parameter. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">The return value is treated in a special way, described in the HTML specification</a>.</p>
<p>This way should be avoided. This makes the markup bigger and less readable. Concerns of content/structure and behavior are not well-separated, making a bug harder to find.</p>
<h3 id="DOM_element_properties" name="DOM_element_properties">DOM element properties</h3>
<pre class="brush: js">// Assuming myButton is a button element
myButton.onclick = function(event){alert('Hello world');};
</pre>
<p>The function can be defined to take an <code>event</code> parameter. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">The return value is treated in a special way, described in the HTML specification</a>.</p>
<p>The problem with this method is that only one handler can be set per element and per event.</p>
<h2 id="Accessing_Event_interfaces">Accessing Event interfaces</h2>
<p>Event handlers may be attached to various objects including DOM elements, document, the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">window object</a>, etc. When an event occurs, an event object is created and passed sequentially to the event listeners.</p>
<p>The {{domxref("Event")}} interface is accessible from within the handler function, via the event object passed as the first argument. The following simple example shows how an event object is passed to the event handler function, and can be used from within one such function.</p>
<pre class="brush: js">function foo(evt) {
// the evt parameter is automatically assigned the event object
alert(evt);
}
table_el.onclick = foo;
</pre>
<h2 id="Subnav">Subnav</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
<li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
<li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
<li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
</ul>
|
