Special Events

2,411 views

Published on

Brief presentation about Special Events given at the jQuery February 2010 meetup.

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • I liked the images used in this slide. Cheers!

    http://www.bathroomsinkconsoles.net/
    http://www.bathroomsinkconsoles.net/category/bathroom-sink-consoles/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
2,411
On SlideShare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
15
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

  • 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










  • Special Events

    1. 1. Special Events
    2. 2. Brandon Aaron jQuery Core Contributor Principal Technologist at Nokia http://brandonaaron.net/ http://twitter.com/brandonaaron
    3. 3. Why so special? • Override existing events • Normalize existing events • Enhance existing events • Create new events • Use just like other events
    4. 4. 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
    5. 5. 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); } };
    6. 6. tripleclick usage jQuery('div').bind('tripleclick', function(event) { alert('triple clicked'); }); http://brandonaaron.net/examples/special-events/1
    7. 7. 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
    8. 8. 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; } };
    9. 9. 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 ); } };
    10. 10. 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
    11. 11. 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
    12. 12. 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

    ×