jQuery Namespaced Event Delegation

This is not a new topic. But it is a topic that not many seem to know about or use very often. It is useful though when you need it.

Event Handlers

We all know how to create event handlers in jQuery. You know, “When I click a button then some action occurs” events like this:

$('button.notify').on('click', function () {
    // Action: Something cool happens here
})

Now, have you ever needed to remove or “turn off” an event handler from an element? It is not something one would really do that often… Perhaps you built some sort of jQuery-driven dashboard where you need to enable/disable various events on the fly. I dunno. Anyways, it is equally easy to accomplish:

$('button.notify').off('click')

Now that button will no longer do anything when you click it.

Multiple Events on One Element

In some cases, you might need multiple events bound to an element, like this:

$('button.notify').on('click', function () {
    // Action 1: Do something interesting here
})
$('button.notify').on('click', function () {
    // Action 2: Another cool thing happens here
})

What if we needed to disable one of those events but not the other? We can’t just do this anymore:

$('button.notify').off('click')

That’s no good because that just destroyed both of the event handlers. Now, neither of them work.

Namespacing

Well jQuery has this thing called Namespaced Event Handlers. This allows you to use custom namespaces in order to separate out your event handlers. Sound confusing? It’s not. Check it out:

$('button.notify').on('click.action1', function () {
    // Action 1: Do something interesting here
})
$('button.notify').on('click.action2', function () {
    // Action 2: Another cool thing happens here
})

Same code as above, except see how the events are now click.action1 and click.action2 ? Now I can easily control those event handlers independently of each other, which is the entire purpose of this:

$('button.notify').off('click.action1')

With that code, “Action 1” has been turned off, but the “Action 2” event handler is still active. Cool huh?

You can choose any string for the namespace. It could be 'click.burrito' or 'click.rocketship'. Any string works. This works for any of jQuery’s supported events: click, mouseenter, keydown, etc.

Conclusion

As I said, this is not a new topic. It’s been in jQuery since 1.4.3 (2010!). But it’s not a topic that I’ve seen discussed many times either. I feel like it’s kind of a hidden gem. It’s one of those features where you didn’t know you needed it until you actually needed it.

One of the most obviously places to utilize this is if you are writing a custom jQuery plugin. You would always want to use something like 'click.myPlugin' so that you have complete control over your event handler, including turning it .off(), without affecting other plugins or any other custom jQuery event handlers the user is making for his webpage.

Have fun!