Namespace Your Events

http://www.learningjquery.com/2007/09/namespace-your-events

Namespace Your Events

read  12 comments

by   Brandon Aaron

A common pattern in jQuery plugin development is the need to undo what the plugin has done. This is usually handled through a method prefixed with "un". Another common pattern is the use of anonymous functions for event handlers. Unbinding events is easy with jQuery but unbinding a single event handler requires the use of a named function. jQuery 1.2 now provides another option for binding and unbinding events: event namespaces.

A Plugin

As a very simple example, let's say I wrote a plugin called "clicked". It provides two methods:clicked   and  unclicked . The  clicked   method attaches an event to all matched elements that when clicked adds a class name of "clicked" to the clicked element. The  unclicked   method removes the "clicked" classes it might have set and the  clicked   event handlers it attached. Here is the code:

PLAIN TEXT

JavaScript:

1. ( function ( $ ) {
2.     $. fn . extend ( {
3.         clicked :   function ( )   {
4.               return   this . bind ( 'click' ,   function ( )   {
5.                 $ ( this ) . addClass ( 'clicked' ) ;
6.               } ) ;
7.           } ,
8.         unclicked :   function ( )   {
9.             retun   this . removeClass ( 'clicked' ) . unbind ( 'click' ) ;
10.           }
11.       } ) ;
12. } ) ( jQuery ) ;

You could use the plugin by calling it like this:

PLAIN TEXT

JavaScript:

1. $ ( 'div' ) . clicked ( ) ;

And if you wanted to stop using the plugin, you could just call  unclicked :

PLAIN TEXT

JavaScript:

1. $ ( 'div' ) . unclicked ( ) ;

So far, so good.

A Problem

But let's say I'm also using another plugin that attaches a click event to the same elements that the clicked plugin does. Calling  unclicked   would unbind all the click events, including those bound by your own code or another plugin.

A Solution: Event Namespacing

Event namespacing provides a way to manage specific event handlers. For example, a plugin could namespace its event handlers to make them easier to unbind while still using anonymous functions. To namespace an event, just suffix the event type with a period and a name ("type.namespace ").

Here is the clicked plugin again, but this time using event namespaces:

PLAIN TEXT

JavaScript:

1. ( function ( $ ) {
2.     $. fn . extend ( {
3.         clicked :   function ( )   {
4.               return   this . bind ( 'click.clicked' ,   function ( )   {
5.                 $ ( this ) . addClass ( 'clicked' ) ;
6.               } ) ;
7.           } ,
8.         unclicked :   function ( )   {
9.             retun   this . removeClass ( 'clicked' ) . unbind ( 'click.clicked' ) ;
10.           }
11.       } ) ;
12. } ) ( jQuery ) ;

Now it only unbinds the events that it bound in the first place, leaving any other bound events alone.