1. Special Events
Beyond Custom Events

2. Brandon Aaron
jQuery Core Contributor
Senior Developer at Simpli.fi
http://brandonaaron.net/
http://twitter.com/brandonaaron

3. Special Events
Beyond Custom Events

4. jQuery Events
• Passing extra data to events
$('div')
.bind('click', { test: true }, function(event, data) {
var bindData = event.data && event.data.test,
triggerData = data && data.test;
console.log(bindData, triggerData);
})
.trigger('click', { test: true });

5. jQuery Events
• Event namespaces provide easy unbinding
$('input')
.bind('focus.myplugin', fn)
.bind('blur.myplugin', fn);
$('input').unbind('.myplugin');

6. jQuery Events
• Any event type
$('div')
.bind('myevent', { test: true }, function(event, data) {
var bindData = event.data && event.data.test,
triggerData = data && data.test;
console.log(event.type, bindData, triggerData);
})
.trigger('myevent', { test: true });

7. Why so special?
• Override existing events
• Normalize existing events
• Enhance existing events
• Create new events
• Use just like other events

8. setup and teardown
• Runs once per an event type per an element
• return false; to tell jQuery to handle the
event binding instead
• Available since 1.2.2
jQuery.event.special.tripleclick = {
setup: function(data, namespaces) {
var elem = this;
},
teardown: function(namespaces) {
var elem = this;
}
};
http://brandonaaron.net/blog/2009/03/26/special-events

9. jQuery.event.special.tripleclick = {
setup: function(data, namespaces) {
var elem = this, $elem = jQuery(elem);
$elem.bind('click', jQuery.event.special.tripleclick.handler);
},
teardown: function(namespaces) {
var elem = this, $elem = jQuery(elem);
$elem.unbind('click', jQuery.event.special.tripleclick.handler);
},
handler: function(event) {
var elem = this, $elem = jQuery(elem), clicks = $elem.data('clicks') || 0;
clicks += 1;
if ( clicks === 3 ) {
clicks = 0;
// set event type to "tripleclick"
event.type = "tripleclick";
// let jQuery handle the triggering of "tripleclick" event handlers
jQuery.event.handle.apply(this, arguments)
}
$elem.data('clicks', clicks);
}
};

10. tripleclick usage
jQuery('div').bind('tripleclick', function(event) {
alert('triple clicked');
});
http://brandonaaron.net/examples/special-events/1

11. add and remove
• Runs once for every event handler added
• Has the ability to change the event handler,
data, and namespaces
• Available since 1.4.2 (technically since 1.4 but changed in 1.4.2)
http://brandonaaron.net/blog/2009/06/4/jquery-edge-new-special-event-hooks
http://brandonaaron.net/blog/2010/02/25/special-events-the-changes-in-1-4-2

12. jQuery.event.special.multiclick = {
add: function( details ) {
var handler = details.handler,
data = details.data,
namespace = details.namespace;
},
remove: function( details ) {
var handler = details.handler,
data = details.data,
namespace = details.namespace;
}
};

13. jQuery.event.special.multiclick = {
add: function( details ) {
var handler = details.handler,
data = details.data,
threshold = data && data.threshold || 1,
clicks = 0;
// replace the handler
details.handler = function(event) {
// increase number of clicks
clicks += 1;
if ( clicks === threshold ) {
// required number of clicks reached, reset
clicks = 0;
// call the actual supplied handler
handler.apply( this, arguments );
}
};
},
setup: function( data, namespaces ) {
jQuery( this ).bind( "click", jQuery.event.special.multiclick.handler );
},
teardown: function( namespaces ) {
jQuery( this ).unbind( "click", jQuery.event.special.multiclick.handler );
},
handler: function( event ) {
// set correct event type
event.type = "multiclick";
// trigger multiclick handlers
jQuery.event.handle.apply( this, arguments );
}
};

14. multiclick usage
$('div')
.bind("multiclick", { threshold: 5 }, function( event ) {
alert( "Clicked 5 times" );
})
.bind("multiclick", { threshold: 3 }, function( event ) {
alert( "Clicked 3 times" );
});
http://brandonaaron.net/examples/special-events-the-changes-in-1-4-2/1

15. one more example
jQuery.event.special.click = {
setup: function() {
jQuery( this ).css( 'cursor', 'pointer' );
return false;
},
teardown: fuction() {
jQuery( this ).css( 'cursor', '' );
return false;
}
};
http://brandonaaron.net/blog/2009/06/17/automating-with-special-events

16. one more hook
• A default action for custom events
• Just like native default actions
• event.preventDefault() does what it says
jQuery.event.special.destroy = {
_default: function(event) {
jQuery(event.target).remove();
}
};
http://benalman.com/news/2010/03/jquery-special-events/

17. links
http://brandonaaron.net/
http://twitter.com/brandonaaron
http://brandonaaron.net/blog/2009/03/26/special-events
http://brandonaaron.net/examples/special-events/1
http://brandonaaron.net/blog/2009/06/4/jquery-edge-new-special-event-hooks
http://brandonaaron.net/blog/2010/02/25/special-events-the-changes-in-1-4-2
http://brandonaaron.net/examples/special-events-the-changes-in-1-4-2/1
http://benalman.com/news/2010/03/jquery-special-events/