Handling Events
jQuery helps you add event listeners to the objects you select. These are similar to the DOM events but are somewhat easier to work with and provide greater flexibility. In addition, jQuery defines its own events for animating the display of information. These animations make your page more appealing to users.
Let’s start by looking at the .ready() function. This is a key jQuery event that can be used to wrap code you want to execute when the DOM has fully loaded and is ready for work. You write this event as $(document).ready(function(){...}). There is also a shorthand version of this method written as $(function(){...}). The following shows an example.
$(document).ready(function () {
$('#footer').css('background-color', 'lightgray'),
});
Wait for an Asset to Load
Note that the $(document).ready() method will execute once the DOM tree has loaded. It will not wait for other assets such as images to finish loading. Typically, this is preferred. However, if you need to run your code only after a certain asset is loaded (such as checking the size of an image), you can attach your event directly to the image load using either $('#my-img').load(function(){...}) or the similar $('#my-img').on('load', function(){...}).
jQuery, like the DOM, allows you to listen for events raised by elements of the page. The biggest difference, however, is that jQuery abstracts all the cross-browser issues that can often make working with events difficult. It handles these issues on your behalf.
Recall that there are a few options for adding events from the DOM: using addEventListener() (preferred), adding to the selected element using dot notation (distTxt.onblur = calculateSpeed), and adding directly inside the HTML (<input id="distance" onblur="javascript: calculateSpeed();" />. Each approach is applicable to jQuery, too.
First, jQuery uses .on() to explicitly add an event listener method to an event. Consider the Event sample from the “Document Object Model (DOM)” section that used Listing 18.2. The following registers events for both input elements once the DOM has loaded.
$('document').ready(function () {
$('#distance').on('blur', calculateSpeed);
$('#time').on('blur', calculateSpeed);
});
This explicit event registration can be replaced with a less formal version using jQuery, as in the following.
$(function () {
$('#distance').blur(calculateSpeed);
$('#time').blur(calculateSpeed);
});
jQuery defines its own events for working with a web page and its actions. Most of these map to a similar DOM event. The following lists just some of the many events to which you might need to subscribe. (This is not a complete reference.)
Window (browser) events—error, resize, scroll
Document events—ready, load, unload
Form events—select, change, submit, blur
Keyboard events—keydown, keypress, keyup, focusout
Mouse events—click, dblclick, mouseover, hover, toggle
Media events (such as video playback)—canplay, durationchange, ended, pause, playing, progress, volumechange