Delphinidin

Is very similar to working with CSS in HTML. The events are separated from the elements that they are being attached to. In native JavaScript, all of the events are embedded directly into the HTML, which makes it a chore to maintain any custom events and makes it easy to screw something up. You have all of these functions in an external file, but they are added to the elements as inline JavaScript, so if something changes in one element, it has to be updated in all of the elements. With jQuery, all of the element selection and event handling is done outside of the DOM in a JavaScript file.


jQuery supports all of the native JavaScript events, but makes it much easier to integrate them into your Web sites and applications. In this chapter, I review the events that are available to you through the jQuery API, show you each event and how it works, and then walk you through a few real-world scenarios.

UNDERSTANDING EVENTS IN JQUERY
jQuery events are a fundamental piece of any Web site application or Web page. When the Internet first started, it was just static text, images, and hyperlinks. As the technology advanced, we started to see more dynamic Web pages that interacted with a database. As the back-end technologies grew more advanced, so did the front-end, with technologies such as Adobe Flash and JavaScript, which added another dimension of interactivity. Hyperlinks have become rollovers and expanding menus, images have turned into interactive
galleries with editing abilities, and static text has evolved into powerful and dynamic search engines such as the Kayak travel search engine, which offers a map-based view. jQuery allows you to use all of the native JavaScript events to capture user interactions through the keyboard and the mouse, but with less code and in an easier-tounderstand syntax. That's the jQuery way!

- Detecting Complete Loading of The DOM With The Ready() Event
One event that is commonly used to check that the DOM (Document Object Model) has been loaded correctly is the ready() event. This event fires any JavaScript or jQuery code that you declare between its brackets when the DOM is ready. The document ready event handler allows you to put all of your JavaScript jQuery code within this event, either inline or in an external file, to make sure the code is executed when the DOM is ready. An event handler is a function that executes your event as it occurs. It's
very important that you use the document ready event handler to ensure the document has been correctly loaded, before you try to do any DOM manipulation. If you do not use this event, your code probably won't work in the manner that you intended.

$(document).ready() {
alert("The DOM is ready");
});

This event is perfect for checking to be sure that the document is ready, but it doesn't include page assets such as images or video.

- Preloading Images With The Load() Event
Preloading images is practical when you're using many images and you would like them to be available as soon as a user does something on your page. One of the worst experiences for a user is having to wait a long time for images to load on a page. This prevents that from occurring.

- Showing an Alert as a User Leaves a Page
Have you ever wanted to show content to a user when they exit the page? Did you wish you could just give them one more opportunity to entice them with an offer that they couldn't refuse? The jQuery unload event can be used to do just that. This event fires when the user closes their browser window or types a new address into the browser bar. You've probably come across sites that abuse the unload event by hammering you with multiple windows and not letting you leave. That's the wrong way to handle those who wish to leave your site.

Instead, think about a user filling out a form on your site. He completes half of the form and then decides to bail. This is the perfect opportunity to use the unload event to show them an alert asking them if they want to leave. The unload event is not handled correctly in some older browsers. Before pushing any code live, you should always thoroughly test across all the Web browsers that you support to ensure that this event works as you intend it to. The browsers that are in question are versions of Safari versions before 3 and various versions of the Firefox 3 browser — sometimes they don't fire the unload event when the page is closed, so a workaround might be needed for these older browsers.

The unload event uses the bind method to attach the event handler to the event.

$(window).bind('unload', function() {
alert('You have not finished filling out the form. Are you sure you want to
leave?');
});

$(window).bind('unload', function() {
alert('You have not finished filling out the form. Are you sure you want to
leave');
});

A shorthand version of the unload event is outlined in the following example.

$(window).unload(function() {
alert('You have not finished filling out the form. Are you sure you want to
leave?');
});

$(window).unload(function() {
alert('You have not finished filling out the form. Are you sure you want to
leave');
});