In this article by Troy Miles, author of the book jQuery Essentials, we will learn that an event is the occurrence of anything that the system considers significant. It can originate in the browser, the form, the keyboard, or any other subsystem, and it can also be generated by the application via a trigger. An event can be as simple as a key press or as complex as the completion of an Ajax request.

(For more resources related to this topic, see here.)

While there are a myriad of potential events, events only matter when the application listens for them. This is also known as hooking an event. By hooking an event, you tell the browser that this occurrence is important to you and to let you know when it happens. When the event occurs, the browser calls your event handling code passing the event object to it. The event object holds important event data, including which page element triggered it. Let’s take a look at the first learned and possibly most important event, the ready event.

The ready event

The first event that programmers new to jQuery usually learn about is the ready event, sometimes referred to as the document ready event. This event signifies that the DOM is fully loaded and that jQuery is open for business. The ready event is similar to the document load event, except that it doesn’t wait for all of the page’s images and other assets to load. It only waits for the DOM to be ready. Also, if the ready event fires before it is hooked, the handler code will be called at least once unlike most events. The .ready() event can only be attached to the document element. When you think about it, it makes sense because it fires when the DOM, also known as Document Object Model is fully loaded.

The .ready() event has few different hooking styles. All of the styles do the same thing—hook the event. Which one you use is up to you. In its most basic form, the hooking code looks similar to the following:

$(document).ready(handler);

As it can only be attached to the document element, the selector can be omitted. In which case the event hook looks as follows:

$().ready(handler);

However, the jQuery documentation does not recommend using the preceding form. There is still a terser version of this event’s hook. This version omits nearly everything, and it is only passing an event handler to the jQuery function. It looks similar to the following:

$(handler);

While all of the different styles work, I only recommend the first form because it is the most clear. While the other forms work and save a few bytes worth of characters, they do so at the expense of code clarity. If you are worried about the number of bytes an expression uses, you should use a JavaScript minimizer instead. It will do a much more thorough job of shrinking code than you could ever do by hand.

The ready event can be hooked as many times as you’d like. When the event is triggered, the handlers are called in the order in which they were hooked. Let’s take a look at an example in code.

// ready event style no# 1
$(document).ready(function () {
console.log("document ready event handler style no# 1");
// we're in the event handler so the event has already fired.
// let's hook it again and see what happens
$(document).ready(function () {
   console.log("We get this handler even though the ready event
   has already fired");
});
});
// ready event style no# 2
$().ready(function () {
console.log("document ready event handler style no# 2");
});
// ready event style no# 3
$(function () {
console.log("document ready event handler style no# 3");
});

In the preceding code, we hook the ready event three times, each one using a different hooking style. The handlers are called in the same order that they are hooked. In the first event handler, we hook the event again. As the event has been triggered already, we may expect that the handler will never be called, but we would be wrong. jQuery treats the ready event differently than other events. Its handler is always called, even if the event has already been triggered. This makes the ready event a great place for initialization and other code, which must be run.

Hooking events

The ready event is different as compared to all of the other events. Its handler will be called once, unlike other events. It is also hooked differently than other events. All of the other events are hooked by chaining the .on() method to the set of elements that you wish to use to trigger the event. The first parameter passed to the hook is the name of the event followed by the handling function, which can either be an anonymous function or the name of a function. This is the basic pattern for event hooking. It is as follows:

$(selector).on('event name', handling function);

The .on() method and its companion the .off() method were first added in version 1.7 of jQuery. For older versions of jQuery, the method that is used to hook the event is .bind(). Neither the .bind() method nor its companion the .unbind() method are deprecated, but .on() and .off() are preferred over them. If you are switching from .bind(), the call to .on() is identical at its simplest levels. The .on() method has capabilities beyond that of the .bind() method, which requires different sets of parameters to be passed to it.

If you would like for more than one event to share the same handler, simply place the name of the next event after the previous one with a space separating them:

$("#clickA").on("mouseenter mouseleave", eventHandler);

Unhooking events

The main method that is used to unhook an event handler is .off(). Calling it is simple; it is similar to the following:

$(elements).off('event name', handling function);

The handling function is optional and the event name is also optional. If the event name is omitted, then all events that are attached to the elements are removed. If the event name is included, then all handlers for the specified event are removed. This can create problems. Think about the following scenario. You write a click event handler for a button. A bit later in the app’s life cycle, someone else also needs to know when the button is clicked. Not wanting to interfere with already working code, they add a second handler. When their code is complete, they remove the handler as follows:

$('#myButton').off('click');

As the handler was called using only using the event name, it removed not only the handler that it added but also all of the handlers for the click event. This is not what was wanted. Don’t despair however; there are two fixes for this problem:

function clickBHandler(event){
console.log('Button B has been clicked, external');
}
$('#clickB').on('click', clickBHandler);
$('#clickB').on('click', function(event){
console.log('Button B has been clicked, anonymous');
// turn off the 1st handler without during off the 2nd
$('#clickB').off('click', clickBHandler);
});

The first fix is to pass the event handler to the .off() method. In the preceding code, we placed two click event handlers on the button named clickB. The first event handler is installed using a function declaration, and the second is installed using an anonymous function. When the button is clicked, both of the event handlers are called. The second one turns off the first one by calling the .off() method and passing its event handler as a parameter. By passing the event handler, the .off() method is able to match the signature of the handler that you’d like to turn off. If you are not using anonymous functions, this fix is works well. But, what if you want to pass an anonymous function as the event handler? Is there a way to turn off one handler without turning off the other? Yes there is, the second fix is to use event namespacing.

Summary

In this article, we learned a lot about one of the most important constructs in modern web programming—events. They are the things that make a site interactive.

Resources for Article:

Further resources on this subject:

• Preparing Your First jQuery Mobile Project[article]
• Building a Custom Version of jQuery[article]
• Learning jQuery[article]