JQuery: DOM 3 level event model

Today we’re going to talk (briefly) about the last DOM event level which isn’t still supported by all browsers. DOM 3 level event builds on level 2 and adds some new features. Most of the things we’ve mentioned in the previous post still hold. For instance, the propagation model we’ve discussed is still there, as you can see from the following picture (which I’ve found in the DOM 3 level spec):


The DOM 3 level clarified several principles introduced by DOM 2 level spec and added some new event types. Besides that, it also updated several interfaces and it  has event added a new interface for custom events: I’m talking about the CustomEvent interface.

With custom events introduced, you can focus on the behavior you’d like to have instead of the markup that you use for implementing that piece of functionality. For instance, suppose you’ve got a collapsible panel. In that case, I’d say that the expected events would be collapse and expand, right? Since JQuery is (sort of – more about this in the next post) compatible with the DOM 3 level model, then I guess this is a good time to show a quick sample of how this might work. Take a look at the following HTML:

<h3>Custom events</h3>
 <p>This is some hidden content</p>
 <p>And more hidden content</p>
<input type="button" id="expand" value="Expand" />
<input type="button" id="collapse" value="Collapse" />

The idea is to click one of the buttons and get the desired behavior (ie, expand and hide the contents of the div). Now, take a look at the code of the buttons:

$("#expand").click(function() {
$("#collapse").click(function() {

I guess that this is new, right? Clicking the expand button will trigger the expand event on existing divs. As you know,there really isn’t  any DOM expand event,so this is  a custom event. Since we’re using JQuery, we don’t have to worry with every detail associated with the creation of the custom event nor with firing the event (yes, it does involve some javascript code, but I’ll leave that exercise to you). Notice that we just call trigger and pass it a method. And that’s it. Btw, we could even simplify the triggering by using something like this:


The advantage of doing this is that we would be firing the expand event on all existing elements.

Handling the event is also simple: we can simply rely on our old friend, the bind method. Take a look at the code that hooks up the custom event:

$("div").bind("expand", function(data) {
$("div").bind("collapse", function(data) {

Don’t worry with the show and hide methods for now (we’ll talk about them in the future, when we look at animations!). Hooking up a handler is really simple too: we start by getting a reference to the div (since we have only one, we use the div selector) and then use the bind to hook up the anonymous function with the custom event.

By now you must be thinking that you didn’t really get much from using custom events. If you think in terms of LOC, then you’re right. However, since we’re concentrating in custom events, we end up building a new model based on *behavior*. With this model, we get independence from the markup and form the traditional events. 

And I guess that’s all for now. Since we’ve already looked at the existing DOM levels, I guess we can go back to JQuery and see how compatible it is with the existing DOM level standards. Keep tuned for more on JQuery.


~ by Luis Abreu on August 3, 2009.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: