Conclusion

Building upon the jQuery knowledge that you’ve gained so far, this lesson introduced you to the world of event handling.

You learned that there are vexing challenges to implementing event handling in web pages, but such handling is essential for creating pages in interactive web applications. Not insignificant among those challenges is the fact that there are three event models that each operate in different ways across the set of modern popular browsers.

The legacy Basic Event Model, also informally termed the DOM Level 0 Event Model, enjoys somewhat browser-independent operation to declare event listeners, but the implementation of the listener functions requires divergent browser-dependent code in order to deal with differences in the Event instance. Although simple, this model limits you to only one listener for any event type on a particular DOM element.

You can avoid this deficiency by using the DOM Level 2 Event Model, a more advanced and standardized model in which an API binds handlers to their event types and DOM elements. Versatile though this model is, it’s supported only by standards-compliant browsers such as Chrome, Firefox, Internet Explorer 9 and above, Safari, and Opera.

For Internet Explorer 8 and below, an API-based proprietary event model that provides a subset of the functionality of the DOM Level 2 Event Model is available.

Coding all event handling in a series of if statements—one clause for the standard browsers and one for older versions of Internet Explorer—is a good way to drive yourself to early dementia. Luckily, jQuery comes to the rescue and saves you from that fate.

The library provides a general on() method to establish event listeners of any type on any element, as well as event-specific convenience methods such as change() and click(). These methods operate in a browser-independent fashion and normalize the Event instance passed to the handlers with the standard properties and methods most commonly used in event listeners.

jQuery also provides the means to remove event handlers by exposing the off() method, or cause them to be triggered under script control. As if all that wasn’t enough, jQuery provides the possibility of using the on() method to assign handlers proactively to elements that may not even exist yet.

Finally, we discussed how to create custom events and namespacing events, explaining the advantages and the use cases for these features.

In this lesson, we looked at a few examples of using events in your pages, and we explored a comprehensive example that demonstrated many of the concepts that you’ve learned up to this point. In the next lesson, we’ll look at how to put together the concepts explained so far to create a nice application built on top of jQuery.