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);
}
};
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 );
}
};
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/
Contributing since Aug 2006
Contribute number of plugins like Live Query and bgiframe
Maintain a blog to share knowledge
Nokia in March as a senior technologist to explore the mobile web
Nokia investing significantly in web technologies