JQuery_ Novice to Ninja - Earle Castledine [142]
The jQuery library provides us with two mechanisms for dealing with this problem: event unbinding and event namespacing. Event unbinding lets us remove event handlers from objects, and event namespacing provides a way for us to break our event handlers into logical groups that can be unbound without affecting other events. This is especially useful when we’re developing plugins.
Event unbinding is simple: we use the bind action to add events to an object, so we use the unbind action to remove them! There are three ways we can use unbind: to remove all events from objects in a selection, to remove all events of a particular type from our selection, or to remove one specific event handler. Here’s the first form:
$('p').unbind();
This will remove all event handlers associated with all paragraphs on the page. It’s a little extreme—more commonly, we’ll just want to remove events of a certain type. For example, to remove of all the mouseover events, we pass the event type into the unbind action:
$('p').unbind('mouseover');
And finally, to unbind a single event handler, we pass the function we want to unbind. This is a little more complicated, because we need to have named the function when we bound it. For our example, we bind two functions to the click event. We then unbind one of the events:
chapter_09/13_event_unbinding/script.js (excerpt)
var doToggle = function() { $(this).toggle(); };
var doSlide = function() { $(this).slideToggle(); };
$('p')
.click(doToggle)
.click(doSlide);
$('p').unbind('click', doToggle);
Thanks to our unbind call, any subsequent clicking on the paragraph tags would still trigger the doSlide method, but no longer trigger the doToggle method.
Note: Shorthand Unbinding?
You can also use the shorthand click and mouseover methods to bind events, so are there unclick and unmouseover shorthand methods too? Nope. Those methods used to exist in jQuery, a long time ago, but they were removed because they made the core API a lot bigger, and were very seldom necessary.
As extensive as all those unbinding options seem, they’re unable to cater for all situations. When you’re doing lots of binding and unbinding, it’s easy to lose track of what’s going on—so jQuery provides a way to group related events together via event namespacing. Namespaced events can be triggered independently of other events of the same type, and all events in the same namespace can be unbound with a single command.
To define a namespace, you append a period (.) and your namespace name to the event you want to attach a handler to. Without doing anything further, the event will work just like a regular non-namespaced event; but you now have a handle that you can use to be more specific about which events are fired, without needing to maintain a reference to each event’s function (as we did above):
chapter_09/14_event_namespacing/script.js (excerpt)
$('p').bind('mouseover.colorize', function() {
$(this).css('background-color', 'lemonchiffon')
})
.bind('mouseout.colorize', function() {
$(this).css('background-color', '');
})
.click(function() {
$(this)
.trigger('mouseout.colorize')
.unbind('.colorize');
});
In this example, we’ve bound regular mouseover and mouseout event handlers to every paragraph on the page. This creates a simple and convincing highlight effect as the user moves a mouse over the elements. But there’s an extra trick to this highlight: when the user clicks on an element, the highlight will be removed.
When the click occurs, the user will be hovering over the element; if we remove the handlers, the mouseout code will never run and the element will remain highlighted. To combat this, we trigger the mouseout manually. Because we’ve namespaced the event, we can specify that only the mouseout code relating to our effect