javascript

CHAPTER 9 ■ LISTENING FOR EVENTS
function thwart(e) {
if (e.preventDefault) {
thwart = function(e) {
e.preventDefault();
};
} else {
thwart = function(e) {
e.returnValue = false;
};
}
thwart(e);
}
The first time thwart() runs, it does a lot of work. But thereafter, thwart() runs snappily since its
block contains but one statement. In Internet Explorer 9, Firefox, Safari, Chrome, and Opera, that would
be e.preventDefault(), and in Internet Explorer or earlier that would be e.returnValue = false.
Preventing an Event from Traversing the DOM Tree
Now then, in Internet Explorer 9, Firefox, Safari, Chrome, and Opera, an event object descends the DOM
tree to the element an event happened on. Then turns tail and ascends the DOM tree. So, the event
object passes by any ancestor of the target of the event two times. On the other hand, in Internet
Explorer 8 or earlier, the event object passes by any ancestor one time, that is, while bubbling upward
through the DOM tree. Therefore, if you register event listeners for a certain kind of event, say a click, on
nodes that are on different tiers of the DOM tree, all of those could potentially run when a click event
occurs.
There ought to be a way to prevent an event object from traversing any further through the DOM
tree to avoid triggering additional event listeners, right? And there is. Just as with preventing default
actions, you do so by calling a method for Internet Explorer 9, Firefox, Safari, Chrome, and Opera and by
writing a member for Internet Explorer 8 or earlier. The DOM method is named stopPropagation(), and
the Internet Explorer 8 or earlier member is named cancelBubble. Note that Internet Explorer 9 and
Opera implement both stopPropagation() and cancelBubble. With this in mind, we can write a lazy
loader to do the job by changing some identifiers in thwart().
Now cut and paste thwart(). Then change the identifier thwart to burst in four places:
function burst(e) {
if (e.preventDefault) {
burst = function(e) {
e.preventDefault();
};
} else {
burst = function(e) {
e.returnValue = false;
};
}
burst(e);
}
Next, change the identifier for the DOM method from preventDefault to stopPropagation in two
places:
function burst(e) {
if (e.stopPropagation) {
355