jQuery Events

jQuery Events

Contents

  1. Introduction
  2. jQuery’s event API
  3. Event delegation
  4. Namespaced events
  5. Resources

1. Introduction

One of javascript’s very powerful features is events. These are actions that can be detected by javascript and form the core of any javascript application. Examples of common events are

  • A mouse click
  • Mousing over a hot spot on the web page
  • Submitting an HTML form
  • A keystroke
  • onload and unload – fired when a user enters/leaves the page

These days, unfortunately, due to a browser war late 1990s between Netscape and Microsoft, two different, incompatible, event models exist. Luckily, jQuery (and other libraries too) provides an event API and hides the different event implementations.


2. jQuery’s event API

At this moment, jQuery 1.7 has just been released and provides a brand new event API. The old functions bind, unbind, live, die, delegate and undelegate are now depregated and replaced by just two functions: on and off.
Below is a list showing the old and new event binding methods:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
$('a').bind('click', myHandler);
$('a').on('click', myHandler);

$('form').bind('submit', { val: 42 }, fn);
$('form').on('submit', { val: 42 }, fn);

$(window).unbind('scroll.myPlugin');
$(window).off('scroll.myPlugin');

$('.comment').delegate('a.add', 'click', addNew);
$('.comment').on('click', 'a.add', addNew);

$('.dialog').undelegate('a', 'click.myDlg');
$('.dialog').off('click.myDlg', 'a');

$('a').live('click', fn);
$(document).on('click', 'a', fn);

$('a').die('click');
$(document).off('click', 'a');

The main reason given for this rewrite was the need to improve the performance for event delegation.

Below are two sections digging a little bit deeper into jQuery’s event API.


3. Event delegation

When a page grows in size and complexity, incorrect binding of an event-callback to an event can have a major impact on the responsiveness of a web application. For example, binding a click handler to each item in a very huge list is a real performance killer! The solution however is simple, “Event Delegation”.
So instead of doing

1
$('#myList li').on('click', function(e){ /* do something */ }) ;

you should bind the callback function to the parent of these items, like this

2
$('#myList').on('click', 'li', function(e){ /* do something */ }) ;

Now the event is delegated and just bound once


4. Namespaced events

jQuery provides a system for namespacing bound events for easier triggering and removal. Simply add a classname to your event when you declare it

1
2
$('#clickMe').on('click.groupA', callbackFun1) ;
$('#clickMe').on('click.groupB', callbackFun1) ;

To trigger the event the namespace should be mentioned explicitly, or no namespace at all. For example:

3
4
5
$('#clickMe').trigger('click') ; // trigg
ers both handlers
$('#clickMe').trigger('click.groupA') ; // triggers callbackFunc1
$('#clickMe').trigger('click.groupB') ; // trigegrs callbackFunc2

Also the removal of one event handler is easy now

6
$('#clickMe').off('click.groupB') ;

5. Resources

Comments are closed.