Previous Tips:

• jQuery Tip #1 - Defining a Context When Using Selectors
• jQuery Tip #2 - Manipulating the DOM in a Loop
• jQuery Tip #3 – Using the data() Function

jQuery provides several different functions that can be used to handle events. Choices include shortcut functions such as click() and hover(), the live() function, the delegate() function, and the bind() function. The live() and delegate() functions can be used to handle event bubbling scenarios such as rows in a table being clicked, while the shortcut functions act as wrappers around the bind() function.

jQuery 1.7+ includes a new function named on() that wraps the previous event handler functions into one convenient API that can be used to handle everything from simple events to more complex event bubbling scenarios. An example of using on() to handle a simple click event is show next.

$('#myButton').on('click', function () {
    alert('Clicked the Button');
}); 

You can always use the shortcut click() function as well. I generally prefer the shortcut functions when handling single events since I can eliminate quotes from the code but that’s just my personal preference.

When handling multiple events on() is quite useful. You can use its mapping functionality as shown next to map events to callback functions:

$('#MyTable tr').on({
    mouseenter: function () {
        $(this).toggleClass('over');
        //perform other functionality needed during mouseenter
    },
    mouseleave: function () {
        $(this).toggleClass('over');
        //perform other functionality needed during mouseleave
    }
});

The on() function can also be used in place of live() or delegate() to detect when a child of a given parent container has been clicked. For example, when a table has a large number of rows that need event handlers to detect when a user clicks them or hovers over them, the on() function can be used. Rather than attaching an event handler to 1000 rows, on() can be used to attach a single event handler (or map event handlers) that handles row events to the containing table's tbody element. An example of using on() for this purpose is shown next:

$('#customerTable tbody').on('click', 'tr', function() {
    alert('Clicked a Row');
}); 

This code will cause click events triggered within a table to bubble up to the containing tbody element which handles them. It's very efficient to handle events this way because only 1 event handler is added yet 1000s of potential row events can be handled. Future rows that are dynamically added to the table are also handled automatically. If you're wondering what happened to jQuery's delegate() function (which does the same type of thing), it can still be used. However, on() is now the preferred event function to use with jQuery 1.7+. To remove one or more events associated with a DOM node you can use the off() function.

Live Example

If you’re interested in learning more about jQuery or JavaScript check out my jQuery Fundamentals or Structuring JavaScript Code courses from Pluralsight. We also offer onsite/online training options as well at http://www.thewahlingroup.com.

Conclusion

jQuery provides many different options for handling events including shortcut functions, live(), delegate(), bind(), and on(). Although they all get the job done, if you’re using jQuery 1.7 or higher it’s recommended that you use the new on() function for your event handling needs.