You might have noticed that you can add only one event handler per event. This might
work well for small scripts or for large scripts in which you handle all the event handling, but
(as you??™ll see when you get into JavaScript libraries in Chapter 4) when using other people??™s
code that might use these events, they might not like it if you try to control everything.
The DOM offers you a solution??”event listeners:
element.addEventListener(event, listener, false);
The event parameter is the event type (such as click, focus or blur, without the on prefix
that you used earlier). The second parameter is the function that should execute when the
event is fired (don??™t use the brackets because the function would fire immediately). The last
parameter is a Boolean indicating whether the event handler should use capturing.
Event Capturing vs. Event Bubbling
As an event is fired, it first works its way down from the document to the element clicked (capturing)
and then works its way back up (bubbling), as demonstrated in Figure 2-4. Using the
CHAPTER 2 n HTML, CSS, AND JAVASCRIPT 44
W3C approach, you can attach the event handler to either process. If you stop the event during
capturing, the event won??™t be fired on any elements on the way down. Likewise, you can
stop the event from continuing up during the bubbling phase.
Figure 2-4. The flow of capturing and bubbling of an event
To stop an event from moving up and down the DOM tree, you can use the event method
stopPropagation:
evt.
Pages:
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97