jQuery in Action
96
CHAPTER 4
Events are where it happens!
function say(text) {
$('#console').append('<div>'+text+'</div>');
}
</script>
</head>
<body id="greatgrandpa">
<div id="grandpa">
<div id="pops">
<img id="vstar" src="vstar.jpg"/>
</div>
</div>
<div id="console"></div>
</body>
</html>
This code changes the example of listing 4.2 to use the
DOM
Level 2 Event Model
API
to establish the event handlers. In the ready handler
b
, we use jQuery's pow-
erful abilities to run through every element of the
DOM
tree. On each, we estab-
lish two handlers: one capture handler and one bubble handler. Each handler
emits a message to the console identifying which type of handler it is, the current
element, and the
emits a message to the console identifying which type of handler it is, the current
element, and the
id
of the target element.
With the page loaded into a standards-compliant browser, clicking the image
results in the display in figure 4.5, showing the progression of the event through
the handling phases and the
the handling phases and the
DOM
tree.
Note that, because we defined both capture and bubble handlers for the tar-
get, two handlers were executed for the target and all its ancestor nodes.
Well, now that we've gone through all the trouble to understand that, we
should know that capture handlers are hardly ever used in web pages. The simple
reason for that is that Internet Explorer (still inexplicably the most dominant
browser) doesn't support the
reason for that is that Internet Explorer (still inexplicably the most dominant
browser) doesn't support the
DOM
Level 2 Event Model. Although it does have a
proprietary model corresponding to the bubble phase of the Level 2 standard, it
doesn't support any semblance of a capture phase.
doesn't support any semblance of a capture phase.
Before we look at how jQuery is going to help sort all this mess out, let's briefly
examine the Internet Explorer Model.