Quite a while ago, I wrote an article about jQuery .on() and off() - an improved way of attaching events in jQuery - and still the best way to attach events to DOM elements in jQuery.

Being able to apply and remove events with on() and off() is great, but sometimes there is a requirement to either trigger or remove a subset of events that have been added to an element. For example:

$('.item').on('click', doThisCoolThing);  
$('.item').on('click', doThisOtherCoolThing);

$('.item').trigger('click'); // both functions are triggered  
$('.item').off('click'); // both functions are removed.

Using event namespacing we can assign names to event handlers when we create them, and then use them later on to target specific functionality when we call trigger() or off(). The name you choose for your event namespace should be relevant for the functionality you are calling. For example:

$('.item').on('click.navigate', doThisCoolThing);  
$('.item').on('click.notify', doThisOtherCoolThing);

// only the function assigned to the namespace navigate would be triggered.
$('.item').trigger('click.navigate');  
// only the function assigned to the namespace notify would be removed.
$('.item').off('click.notify');

It’s also possible to use multiple namespaces, like so:

$('.item').on('click.navigate.notify', doThisCoolThing);

// trigger the click event
$('.item').trigger('click.navigate');
function.  
// remove the click event.
$('.item').off('click.notify');

Namespacing events in jQuery has been available for some time and isn’t limited to just on() and off(). It also works with .bind() and .unbind() too.