Events are where it happens!

This lesson covers

• The event models as implemented by the browsers
• The jQuery event model
• Binding event handlers to DOM elements
• Event delegation
• Namespacing events
• The Event object instance
• Triggering event handlers under script control
• Registering proactive event handlers

Like many other GUI management systems, the interfaces presented by HTML web pages are asynchronous and event-driven, even if the protocol used to deliver them to the browser, HTTP, is wholly synchronous in nature. Whether a GUI is implemented as a desktop program using Java Swing, X11, or the .NET Framework, or as a page in a web application using HTML and JavaScript, the program steps are pretty much the same:

1.  Set up the user interface.

2.  Wait for something interesting to happen.

3.  React accordingly.

4.  Go to step 2.

The first step sets up the display of the user interface; the others define its behavior. In web pages, the browser handles the setup of the display in response to the markup (HTML) and style (CSS) that you send to it. The script you include in the page defines the behavior of the interface, although it can change the user interface (UI) as well.

This script takes the form of event listeners, also referred as event handlers (although there’s a subtle technical difference), that react to the various events that occur while the page is displayed. These events could be generated by the system (such as timers or the completion of asynchronous requests) but are often the result of some user activity (such as moving the mouse, clicking a button of the mouse, entering text via the keyboard, or even touch gestures). Without the ability to react to these events, the World Wide Web’s greatest use might be limited to showing pictures.

Although HTML itself does define a small set of built-in semantic actions that require no scripting on your part (such as reloading pages as the result of clicking an anchor tag or submitting a form via a submit button), any other behaviors that you wish your pages to exhibit require you to handle the various events that occur as your users interact with those pages.

In this lesson, we’ll examine the various ways that browsers expose these events and how they allow you to establish handlers to control what happens when these events occur. In addition, we’ll look at the challenges that you face due to the multitude of differences between the browser event models. Then you’ll see how jQuery cuts through the browser-induced fog to relieve you of these burdens.

JavaScript you need to know!

One of the benefits that jQuery brings to web pages is the ability to implement a great deal of scripting-enabled behavior without having to write a lot of script yourself. jQuery handles the nuts-and-bolts details so that you can concentrate on the job of making your applications do what they need to do!

Up to this point, the ride has been pretty painless. You needed only rudimentary JavaScript skills to code and understand the jQuery examples we introduced in the previous lessons. In this lesson and the lessons that follow, you must understand a handful of important fundamental JavaScript concepts to make effective use of the jQuery library.

Depending on your background, you may already be familiar with these concepts, but some page authors may have been able to get pretty far without a firm grasp of them—the very flexibility of JavaScript makes such a situation possible. Before we proceed, it’s time to make sure that you’ve wrapped your head around these core concepts.

If you’re already comfortable with the workings of the JavaScript Object and Function and have a good handle on concepts like function contexts and closures, you may want to continue reading this and the upcoming lessons. If these concepts are unfamiliar or hazy, we strongly urge you to turn to the appendix to help you get up to speed on these necessary concepts and then come back.