jQuery Topics
jQuery Awesome
jQuery Delicious
jQuery Buzz

jQuery Special Events; Virtually… not in Real Life

Monday, March 29, 2010
Tagged: ,
By jQuery Aggregator on Monday, March 29, 2010 — Comments

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:

PLAIN TEXT
JAVASCRIPT:

  1.  
  2. (function($){
  3.  
  4.   // A collection of elements to which the tripleclick event is bound.
  5.   var elems = $([]);
  6.  
  7.   // Click speed threshold, defaults to 500.
  8.   $.tripleclickThreshold = 500;
  9.  
  10.   // Special event definition.
  11.   $.event.special.tripleclick = {
  12.     setup: function(){
  13.       // Initialize the element plugin data, including clicks counter and
  14.       // last-clicked timestamp.
  15.       $(this).data( ‘tripleclick’, { clicks: 0, last: 0 } );
  16.  
  17.       // Add this element to the internal collection.
  18.       elems = elems.add( this );
  19.  
  20.       // If this is the first element to which the event has been bound,
  21.       // bind a handler to document to catch all ‘click’ events.
  22.       if ( elems.length === 1 ) {
  23.         $(document).bind( ‘click’, click_handler );
  24.       }
  25.     },
  26.     teardown: function(){
  27.       // Remove all element plugin data.
  28.       $(this).removeData( ‘tripleclick’ );
  29.  
  30.       // Remove this element from the internal collection.
  31.       elems = elems.not( this );
  32.  
  33.       // If this is the last element removed, remove the document ‘click’
  34.       // event handler that "powers" this special event.
  35.       if ( elems.length === 0 ) {
  36.         $(document).unbind( ‘click’, click_handler );
  37.       }
  38.     }
  39.   };
  40.  
  41.   // This function is executed every time an element is clicked.
  42.   function click_handler( event ) {
  43.     var elem = $(event.target),
  44.  
  45.       // Get plugin data stored on the element.
  46.       data = elem.data( ‘tripleclick’ );
  47.  
  48.     // If more than `threshold` time has passed since the last click, reset
  49.     // the clicks counter.
  50.     if ( event.timeStamp – data.last> $.tripleclickThreshold ) {
  51.       data.clicks = 0;
  52.     }
  53.  
  54.     // Update the element’s last-clicked timestamp.
  55.     data.last = event.timeStamp;
  56.  
  57.     // Increment the clicks counter. If the counter has reached 3, trigger
  58.     // the "tripleclick" event and reset the clicks counter to 0. Trigger
  59.     // bound handlers using triggerHandler so the event doesn’t propagate.
  60.     if ( ++data.clicks === 3 ) {
  61.       elem.trigger( ‘tripleclick’ );
  62.       data.clicks = 0;
  63.     }
  64.   };
  65.  
  66. })(jQuery);
  67.  

There is a lot in his article, so give it a once over.

Read the full/original article at Ajaxian » jQuery

    Related Posts

    Comments are closed.

    « Previous post:
    Next post:  »
    jQuery Resources

    Learn more about jQuery

    jQuery News & Links

    I only just found out that the jQuery validation plugins has a validation rule called “remote” which can be used ...

    jQuery function to check if horizontal scroll is present – hasHScrollBar() – (or vertical check below also, util function to ...

    jQuery function to Set any DOM Element to Top View (bring to front) using CSS Z-Index property.

    Is it possible to declare arrays in JavaScript object literal notation? Example 1 – this works with arrays Declaration: Storage ...

    To get the a variables type using jQuery there is a jQuery function called .type() which returns “array”, “string”, “number”, ...

    In this post you can find tutorials which explain step by step different API use cases with jQuery like Google ...

    For valuable work on creation of sites you need a good comfortable editor necessarily. There are many requiring paid products ...

    Today we are sharing with you a collection of awesome jQuery Camera Photo plugins. They offer a range of image ...

    Back in the day, if you saw something that was animated on a website it was automatically assumed to be ...

    In this post, we have compiled a list of 10 jQuery HTML5 Audio players available today, most allow native audio ...

    jQuery Mobile is a powerful framework for making mobile web applications. But can we use it to convert existing desktop ...

    I have jotted a quick post on a Basic JavaScript Regular Expression Example to give beginners out there a taste ...

    In April 2012′s edition of Interestingly Random JavaScript, jQuery and Web Development we bring you some very cool stuff such ...

    In this post we are sharing you a roundup of 10 really jQuery plugins as of today. Pretty cool plugins ...

    As always expected from the jQuery community, the compilation we have for you today are some good and impressive recently ...

    A collection of jQuery PNG/JPEG/GIF plugins that enables image animation, cartoon-like background, etc… let them help you design displays for ...

    A collection of JavaScript/jQuery Zip/File/Compressor plugins that allows you to minify your JS code and compress your JS files ready ...

    Quick jQuery code snippet on how to keep an element in view. For demo scroll down on any page on ...

    Here is what I think is the best and most reliable way to load jQuery library and jQuery UI Libraries. ...

    jQuery code snippet which outputs all attributes of element using the default .attr() function on any dom element(s). usage: output:

    More Links & News

    Community Resources

    Use jQuery and the Google Maps API to create your own map application.

    Super cool and easy way to get stylish tooltips with jQuery.

    The right way to include the jQuery library in WordPress.

    Share a resource