JavaScript & jQuery: The Missing Manual ... - Robert Guajardo

Using Events the
jQuery Way
Selection Event Anonymous function
$('a').mouseover(function() {
// your code goes in here
} ) ;
End of statement
End of mouseover( ) function
End of anonymous function
Beginning of
anonymous function
164 javascript & jquery: the missing manual
Figure 5-2:
In jQuery, an event works like a function,
so you can pass an argument to the event.
You can think of an anonymous function,
then, as an argument—like a single piece of
data that’s passed to a function. If you think
of it that way, it’s easier to see how all of
the little bits of punctuation fit together. For
example, in the last line, the } marks the end
of the function (and the end of the argument
passed to the mouseover function); the ) is
the end of the mouseover() function; and the
semicolon is the end of the entire statement
that began with the selector $(‘a’).
Here’s a simple example. Assume you have a web page with a link that has an ID
of menu applied to it. When a visitor moves his mouse over that link, you want a
hidden list of additional links to appear—assume that the list of links has an ID of
submenu. So what you want to do is add a mouseover event to the menu, and then
call a function that shows the submenu. The process breaks down into four steps:
1. Select the menu:
$('#menu')
2. Attach the event:
$('#menu').mouseover();
3. Add an anonymous function:
$('#menu').mouseover(function() {
}); // end mouseover
You’ll encounter lots of collections of closing brace, closing parenthesis, and
semicolons—});—which frequently mark the end of an anonymous function
inside a function call. Since you see them everywhere, it’s always a good idea to
add a JavaScript comment—in this example, // end mouseover—to specify what
that trio of punctuation means.
4. Add the necessary actions (in this case, it’s showing the submenu):
$('#menu').mouseover(function() {
$('#submenu').show();
}); // end mouseover
A lot of people find the crazy nest of punctuation involved with anonymous
functions very confusing (that last }); is always a doozy). And it is confusing,
but the best way to get used to the strange world of JavaScript is through lots of
practice, so the following hands-on tutorial should help reinforce the ideas just
presented.
Note: The show() function is discussed in the next chapter on page 187.
www.it-ebooks.info