Special Events: Beyond Custom Events
- 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/
Editor's Notes
- #3: 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