Ben Alman has a mother of a post on his special events work for jQuery. I have a special penchant for custom events and the like, even though I have abused them just as I did in the old days of AOP! :)
What are special events?
The jQuery special events API is a fairly flexible system by which you can specify bind and unbind hooks as well as default actions for custom events. In using this API, you can create custom events that do more than just execute bound event handlers when triggered—these “special” events can modify the event object passed to event handlers, trigger other entirely different events, or execute complex setup and teardown code when event handlers are bound to or unbound from elements.
He does into intrigue detail on the API and gets to show you how to implement the hello world of custom events: tripleclick:
-
-
(function($){
-
-
// A collection of elements to which the tripleclick event is bound.
-
var elems = $([]);
-
-
// Click speed threshold, defaults to 500.
-
$.tripleclickThreshold = 500;
-
-
// Special event definition.
-
$.event.special.tripleclick = {
-
setup: function(){
-
// Initialize the element plugin data, including clicks counter and
-
// last-clicked timestamp.
-
$(this).data( ‘tripleclick’, { clicks: 0, last: 0 } );
-
-
// Add this element to the internal collection.
-
elems = elems.add( this );
-
-
// If this is the first element to which the event has been bound,
-
// bind a handler to document to catch all ‘click’ events.
-
if ( elems.length === 1 ) {
-
$(document).bind( ‘click’, click_handler );
-
}
-
},
-
teardown: function(){
-
// Remove all element plugin data.
-
$(this).removeData( ‘tripleclick’ );
-
-
// Remove this element from the internal collection.
-
elems = elems.not( this );
-
-
// If this is the last element removed, remove the document ‘click’
-
// event handler that "powers" this special event.
-
if ( elems.length === 0 ) {
-
$(document).unbind( ‘click’, click_handler );
-
}
-
}
-
};
-
-
// This function is executed every time an element is clicked.
-
function click_handler( event ) {
-
var elem = $(event.target),
-
-
// Get plugin data stored on the element.
-
data = elem.data( ‘tripleclick’ );
-
-
// If more than `threshold` time has passed since the last click, reset
-
// the clicks counter.
-
if ( event.timeStamp – data.last> $.tripleclickThreshold ) {
-
data.clicks = 0;
-
}
-
-
// Update the element’s last-clicked timestamp.
-
data.last = event.timeStamp;
-
-
// Increment the clicks counter. If the counter has reached 3, trigger
-
// the "tripleclick" event and reset the clicks counter to 0. Trigger
-
// bound handlers using triggerHandler so the event doesn’t propagate.
-
if ( ++data.clicks === 3 ) {
-
elem.trigger( ‘tripleclick’ );
-
data.clicks = 0;
-
}
-
};
-
-
})(jQuery);
-
There is a lot in his article, so give it a once over.
