jQuery in Action
112
CHAPTER 4
Events are where it happens!
We use the following script to establish mouse event handlers for the second set of
areas (Outer 2 and its Inner 2 child) on the hover.html example page:
areas (Outer 2 and its Inner 2 child) on the hover.html example page:
$('#outer2').hover(report,report);
As with the first set of areas, the
report()
function is established as the mouseover
and mouseout handlers for Outer 2. But unlike the first set of areas, when we pass
the mouse pointer over the boundaries between Outer 2 and Inner 2, neither of
these handlers is invoked. This is useful for those situations where we have no
need to react when the mouse pointer passes over child elements.
the mouse pointer over the boundaries between Outer 2 and Inner 2, neither of
these handlers is invoked. This is useful for those situations where we have no
need to react when the mouse pointer passes over child elements.
With all these event-handling tools under our belts, let's use what we've
learned so far and look at an example page that makes use of them, as well as
some of the other jQuery techniques that we've learned from previous chapters!
some of the other jQuery techniques that we've learned from previous chapters!
4.3 Putting events (and more) to work
Now that we've covered how jQuery brings order to the chaos of dealing with dis-
parate event models across browsers, let's work an example page that puts the
knowledge that we've gained so far to use. This page uses not only events but also
some jQuery techniques that we've explored in earlier chapters, including some
heavy-weight jQuery selectors.
parate event models across browsers, let's work an example page that puts the
knowledge that we've gained so far to use. This page uses not only events but also
some jQuery techniques that we've explored in earlier chapters, including some
heavy-weight jQuery selectors.
The page that we'll create in this section is a small part of an online order form
for an Asian restaurant named Bamboo Asian Grille. For brevity, we're going to
restrict ourselves to the appetizer section of the menu, but you can apply the les-
sons learned to the remainder of the menu form, which you can complete to
practice your jQuery skills.
restrict ourselves to the appetizer section of the menu, but you can apply the les-
sons learned to the remainder of the menu form, which you can complete to
practice your jQuery skills.
Command syntax: hover
hover(overListener,outListener)
Establishes handlers for the mouseover and mouseout events for matched elements. These
handlers only fire when the area covered by the elements is entered and exited, ignoring
transitions to child elements.
handlers only fire when the area covered by the elements is entered and exited, ignoring
transitions to child elements.
Parameters
overListener
(Function) The function to become the mouseover handler.
outListener
(Function) The function to become the mouseout handler.
Returns
The wrapped set.
The wrapped set.