Step by Step HTML5

298 Chapter 16
You call the function the same way as in the previous example, but this time, the function
returns a value that you want to capture so that you can use it later, as shown here:
var getSum = addTwo(2,5);
With this code, the sum of the two numbers, 2 and 5, would be placed into the variable
getSum, which you could then use later in the program.
You’ll frequently use functions and pass arguments into functions, especially when
working with event handling in JavaScript and jQuery. A JavaScript program of minimal
complexity and size will typically use functions, as well.
With all this background knowledge now complete, it’s time to look at working with
events in JavaScript and jQuery. Events are actions like mouse clicks, keystrokes, and
entering text into a form.
Responding to Events with jQuery and JavaScript
Responding to events with JavaScript is a complex process that involves working with
multiple event models exposed by different Web browsers and multiple versions of the
Document Object Model (DOM) to try to get the correct code to execute at the correct
time. Therefore, rather than spend the next 30 pages on an in-depth discussion of event
handling, I’ll shortcut the learning curve to show you how to handle events with jQuery.
jQuery includes several event-related functions such as .click() for responding to mouse
clicks, .submit() for responding to a form submission, .hover() to respond when a mouse
cursor hovers over an element, and several others. In fact, the .ready() function that you
saw earlier is an event handler. See http://api.jquery.com/category/events for more information
on event handlers, including a list of the available jQuery handler functions.
Earlier in the chapter, you saw the .fadeOut() function in use. That function ran when
the page loaded (or more accurately, when the browser encountered the JavaScript).
To make the element fade out when a user clicks it with the mouse, you need to
attach a click event handler to that element. In jQuery, you do this with the help of
the .click() function, which looks like the following example (I’ve highlighted the relevant
code in bold):
jQuery 101