jQuery in Action
100
CHAPTER 4
Events are where it happens!
</script>
</head>
<body>
<img id="vstar" src="vstar.jpg"/>
<div id="console"></div>
</body>
</html>
The changes to this code, limited to the body of the ready handler, are minor but
significant
significant
b
. We create a wrapped set consisting of the target
<img>
element and
apply three
bind()
commands to it--remember, jQuery chaining lets us apply
multiple commands in a single statement--each of which establishes a click event
handler on the element.
handler on the element.
Loading the page into a standards-compliant browser and clicking the image
result in the display of figure 4.6, which not surprisingly, is the exact same result
we saw in figure 4.3 (except for the
we saw in figure 4.3 (except for the
URL
and window caption).
Perhaps more importantly, when loaded into Internet Explorer, it also works
as shown in figure 4.7. This was not possible using the code from listing 4.3 with-
out adding a lot of browser-specific testing and branching code to use the correct
event model for the current browser.
out adding a lot of browser-specific testing and branching code to use the correct
event model for the current browser.
At this point, page authors who have wrestled with mountains of browser-
specific event-handling code in their pages are no doubt singing "Happy Days
Are Here Again" and spinning in their office chairs. Who could blame them?
Are Here Again" and spinning in their office chairs. Who could blame them?
Figure 4.6 Using the jQuery Event Model allows us to specify multiple event
handlers as in the DOM Level 2 Model.
handlers as in the DOM Level 2 Model.