Namespace Your Events with the help of jQuery

In daily coding, binding an event to an element is simply and autonomous routine. Most of time developers select the element with jQuery, attach the event with on method or event's keyword and never think about if any other methods are also attached to same element with the very same event.

Think about an input field. You want to add a clearing option when user entered information to field as well as you want to count the characters.

// binding clearing option methods 
$('.input').on('keyup', clearingMethods);

// binding counting methods
$('.input').on('keyup', countingMethods)

These both methods will work together perfectly. However, espacially while creating plugins, it is very important to seperate your events from other bindings. Because, in such cases, there will some method unbinding or destroy the plugin events.

Using the $(el).off(event) will remove not only your plugin's indicating event but also other methods which are using the same event. Having namespaced events will prevent messing other methods that are not related to your plugin.

It is very easy binding your events with a namespace in jQuery. The trick is, adding your namespace to original event with a dot (.). Thats all!

// normal event binding
$(el).on('keyup', callback);

// namespaced event binding
$(el).on('keyup.namespace', callback);

Same as the binding your event, unbinding the namespaced event as follows:

// unbinds all 'keyup' events 
$(el).off('keyup');

// only removes the specified event in namespace, 
// other 'keyup' events will still continue working
$(el).off('keyup.namespace');

Further reading