Compare Revisions

DOM Events

Change Revisions

Revision 40794:

Revision 40794 by Neil on

Revision 40795:

Revision 40795 by OsamaBinLogin on

Title:
DOM Events
DOM Events
Slug:
DOM_Client_Object_Cross-Reference/DOM_Events
DOM_Client_Object_Cross-Reference/DOM_Events
Tags:
DOM, Event
DOM, Event
Content:

Revision 40794
Revision 40795
nn8       
9    </p>
10    <p>
11      &nbsp;
12    </p>
13    <h1>
14      DOM Events
15    </h1>
16    <p>
nn18    </p>
19    <h3>
20      Overview
21    </h3>
22    <p>
23      Events are things that happen to DOM elements in your page,
 > such as mouse clicks or errors when an image fails to load. &nbs
 >p;An event happens, the browser sends the event to whoever was cl
 >icked on (or whatever). &nbsp;If you've set a handler (a function
 > or piece of code) on that element, it gets called and you can do
 > nefarious things in the handler. &nbsp;Cool.
24    </p>
25    <p>
26      More specifically, the event is sent to the element it happ
 >ened in, plus all the elements that enclose it. &nbsp;For instanc
 >e, say you had a div you wanted to act like a button:
27    </p>
28    <pre>
29&lt;div onclick=getACupcake()&gt;
30  I &lt;b&gt;Really&lt;/b&gt; want a cupcake!
31&lt;/div&gt;
32</pre>
33    <p>
34      If the human clicks on the word <strong>Really</strong>, fi
 >rst the event is delivered to the &lt;b&gt;. &nbsp;That has no ha
 >ndler, so it's delivered to the &lt;div&gt;. &nbsp;That handler c
 >an, if it wants, let outer elements try to handle the event, too,
 > or it can cancel it.
35    </p>
36    <p>
37      In fact, the event traverses twice; first it travels from t
 >he window down to the target element (called Capture) and then it
 > travels back up to the window again (called Bubbling). &nbsp;And
 >, there are two ways to set a handler: capture and bubble. &nbsp;
 >For instance, capture can allow a big element to intercept all cl
 >icks to its child elements, before they get it. &nbsp;Unfortunate
 >ly, IE doesn't implement capture so it's effectively unavailable 
 >for many web authors. &nbsp;
38    </p>
39    <h3>
40      Handlers
41    </h3>
42    <p>
43      When a handler gets called, it gets passed to it an Event o
 >bject, which has lots of fields that tell about the event, such a
 >s which keystroke was hit, what the mouse coordinates were, what 
 >the time was when the event happened, etc. &nbsp;Where you get th
 >is event object depends on your browser and how you set the event
 > handler. &nbsp;There are, sigh, too many ways to set an event ha
 >ndler, each with its own quirks.
44    </p>
45    <h4>
46      Inline
47    </h4>
48    <p>
49      &nbsp;
50    </p>
51    <p>
52      &nbsp;
53    </p>&lt;meta charset="utf-8"/&gt;
54    <pre style="margin-top: 0px; margin-right: 0px; margin-bottom
 >: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px
 >; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px
 >; border-right-width: 1px; border-bottom-width: 1px; border-left-
 >width: 1px; border-top-style: solid; border-right-style: solid; b
 >order-bottom-style: solid; border-left-style: solid; border-top-c
 >olor: rgb(223, 236, 241); border-right-color: rgb(223, 236, 241);
 > border-bottom-color: rgb(223, 236, 241); border-left-color: rgb(
 >223, 236, 241); overflow-x: auto; overflow-y: auto; font: normal 
 >normal normal 12px/normal 'Courier New', 'Andale Mono', monospace
 >; color: rgb(37, 34, 29);">
55&lt;div onclick='getACupcake(event)'&gt;<br>
56</pre>
57    <p>
58      This first way is often the easiest; it just calls your JS 
 >code in quotes. &nbsp;(Actually you can get away without the quot
 >es if there's no spaces in your code, but that's not recommended.
 >) &nbsp;Actually, it makes a wrapper routine that gets your code 
 >snippet spliced into it.
59    </p>
60    <p>
61      Unfortunately, IE works differently from other browsers. &n
 >bsp;In IE, the <strong>event</strong> global has the event object
 >. &nbsp;In Firefox and other browsers, the event is passed in as 
 >an argument. &nbsp;If you do it like the above, you'll never know
 > the difference. &nbsp;
62    </p>
63    <h4>
64      addEventListener()
65    </h4>
66    <p>
67      The classy way to set a handler is to use addEventListener(
 >) on the target.
68    </p>
69    <pre>
70document.getElementById('cupcakeButton').addEventListener('click'
 >, getACupcake);
71</pre>
72    <p>
73      &nbsp;
74    </p>&lt;meta charset="utf-8"/&gt;
75    <p>
76      If you use this way, you can actually add multiple handlers
 > for the same event on the same target. &nbsp;You then can remove
 > them if you need to with removeEventListener(). &nbsp;
77    </p>
78    <p>
79      Unfortunately, IE works differently from other browsers. &n
 >bsp;There is no addEventListener() function, instead use attachEv
 >ent() like this:
80    </p>
81    <p>
82      <span class="Apple-style-span" style="font-family: 'Courier
 > New', 'Andale Mono', monospace; line-height: normal; font-size: 
 >12px; white-space: pre;">document.getElementById('cupcakeButton')
 >.addEventListener('click', getACupcake);</span>
83    </p>
84    <p>
85      &nbsp;
86    </p>&lt;meta charset="utf-8"/&gt;
87    <p>
88      &nbsp;
89    </p>
90    <p>
91      &nbsp;
92    </p>&lt;meta charset="utf-8"/&gt;
93    <h4>
94      the old way
95    </h4>
96    <p>
97      The old way is to just assign it like this:
98    </p>
99    <pre>
100document.getElementById('cupcakeButton').onclick = getACupcake;
101</pre>
102    <p>
103      This has problems and is deprecated, I think, but it still 
 >works.
n1009      <li>{{ Note("gecko-dom") }} <a href="en/DOM">Gecko DOM Refen1104      <li>{{ Note("gecko-dom") }} <a href="/en/DOM" title="en/DOM
>rence</a>>">Gecko DOM Reference</a>
t1021        <li>Copyright Information: © 2007 by individual MDC contrt1116        <li>Copyright Information: © 2007 by individual MDC contr
>ibutors (see history); content available under a <a href="Project>ibutors (see history); content available under a <a href="/Projec
>:en/Copyrights">Creative Commons license</a>>t:en/Copyrights" title="Project:en/Copyrights">Creative Commons l
 >icense</a>

Back to History