Thursday, February 21st, 2008

Motionbox EventHandler: Event Subscription and Delegation

Category: JavaScript, Library, Prototype

The developers of MotionBox have written a custom Prototype.js based library to handle event delegation and they decided to open source their work.

They told me:

As you know, the technique of listening to events high in the DOM adds a lot of benefits. The two most notable are:

  1. The ability to bind to events before the elements are available in the DOM. This is especially useful for AJAX applications where the DOM is being updated as there is no need to (re)create all your observers. Using this library, the developer doesn’t care if an element exists or not, he/she can simply say “any thing with this class works this way” and “anything with this ID does this” All with a simple interface: MBX.EventHandler.subscribe("#myId", "click", myHandlerFunction);
  2. Since we handle events outside of the usual manner, custom event handling becomes trivial. The subscription interface is exactly the same, and custom events can be fired easily with: MBX.EventHandler.fireCustom(domElement, "my_custom_event_name");

Given the following doc:

  1. <script>
  2. function my_listener(evt) {
  3.    console.dir(evt);
  4. }
  5. </script>
  6. <body>
  7.   <ul id="unordered_list" class="my_ul_class">
  8.     <li id="one" class="my_li_class">First</li>
  9.     <li id="two" class="my_li_class">Second</li>
  10.   </ul>
  11. </body>

You can do the following:

javascript

  1. MBX.EventHandler.subscribe("#one", "click", my_listener);  // this will trigger 'my_listener' only by clicking on the li with the id of "one"
  2.  
  3. MBX.EventHandler.subscribe(".my_li_class", "click", my_listener);  // this will trigger 'my_listener' by clicking either of the LIs below
  4.  
  5. MBX.EventHandler.subscribe([".my_ul_class", "#one"], ["click", "mouseover"], [my_listener, my_second_listener]);
  6.  
  7. // Custom events
  8. MBX.EventHandler.subscribe("#one", "my_custom_event_name", my_listener);
  9.  
  10. // Fire them
  11. MBX.EventHandler.fireCustom($("one"), "my_custom_event_name");

You can get this from SVN or download it directly.

To see it in action, check out Motionbox.com (used a lot on contests and Motionbooks pages –login required).

Posted by Dion Almaer at 8:45 am
5 Comments

+++--
3.9 rating from 34 votes

5 Comments »

Comments feed TrackBack URI

Thanks for the great post Dion. Hope everyone finds the EventHandler as useful as we have. Comments are always appreciated if anyone sees a way to make it better.

Comment by TopperBowers — February 21, 2008

This is very similar to the Reg library Sun is working on.

http://blogs.sun.com/greimer/entry/a_look_at_our_new.

Comment by JustinMeyer — February 21, 2008

i love this and will be using this model in the future. thanks

Comment by AaronHeckmann — February 22, 2008

We fixed a bug in the code that could cause headaches for some people.
The new direct download link is here:

http://motionbox.googlecode.com/files/event_handler-1.0.1.js

Comment by TopperBowers — March 1, 2008

Swish, very swish. Nice approach, I can see myself using this heavily in a couple of web apps I’m writing. Good job.

Comment by Dan F — March 4, 2008

Leave a comment

You must be logged in to post a comment.