An Open-Source Event Handler

Topper — Wed, 20 Feb 2008 15:32:40 +0000

Event delegation and bubbling seems to have become a little bit of a hot-topic lately. We've been using a custom-written prototype.js based library for a while here at Motionbox and after reading some articles on Ajaxian and others, we've decided to open-source the library.

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:

PLAIN TEXT

JavaScript:

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:

PLAIN TEXT

JavaScript:

MBX.EventHandler.fireCustom(domElement, "my_custom_event_name");

The docs for the library are here: http://code.google.com/p/motionbox/wiki/EventHandlerDocumentation

The files can be checked out here (SVN): http://motionbox.googlecode.com/svn/javascript/event_handler/trunk
or downloaded here: ~~http://motionbox.googlecode.com/files/event_handler-1.0.0.js~~
http://motionbox.googlecode.com/files/event_handler-1.0.1.js

You can see it in action throughout Motionbox.com (used a lot on our contests and Motionbooks pages: http://motionbox.com/contests/valentines and http://motionbox.com/motionbooks/new --login required).

Quoting a code example from the docs:

PLAIN TEXT

HTML:

function my_listener(evt) {
console.dir(evt);
}
id="unordered_list" class="my_ul_class">
id="one" class="my_li_class">First

     id="two" class="my_li_class">Second

You can now:

PLAIN TEXT

JavaScript:

MBX.EventHandler.subscribe("#one", "click", my_listener); // this will trigger 'my_listener' only by clicking on the li with the id of "one"
// or
MBX.EventHandler.subscribe(".my_li_class", "click", my_listener); // this will trigger 'my_listener' by clicking either of the LIs below
// All three of the required arguments may be an array:
MBX.EventHandler.subscribe([".my_ul_class", "#one"], ["click", "mouseover"], [my_listener, my_second_listener]);

NOTE: Remember that you can subscribe to these IDs or classes at ANY time after the MBX.EventHandler object is available (well before the dom is ready).

Since we are handling these events outside of the normal browser implementation, you are not confined to browser events:

PLAIN TEXT

JavaScript:

MBX.EventHandler.subscribe("#one", "my_custom_event_name", my_listener);
// which you could then fire with:
MBX.EventHandler.fireCustom($("one"), "my_custom_event_name");
// fireCustom also allows the optional extension of custom events with any data of your choosing:
MBX.EventHandler.fireCustom($("one"), "my_custom_event_name", {'customAttribute': "this is cool"});

See the complete docs here: http://code.google.com/p/motionbox/wiki/EventHandlerDocumentation

Topper's Blog » event

An Open-Source Event Handler