The Document Object Model Level 2 defines several interfaces for an event handling model, called DOM 2 Events, that is far superior to the traditional model used by most web developers around the world. In the traditional model, you assign an event handler to an object using the onevent properties. e.g. window.onload = fn;. This has many limitations, with the most annoying being that it only accepts one event handler.

In the past, many attempts have been made to work around these issues, with one of the most widely known being Scott Andrew LePera’s Crossbrowser DOM Scripting: Event Handlers. Recently, Peter-Paul Koch wrote an article entitled addEvent() Considered Harmful. Following this, he launched a competition for someone to rewrite the addEvent() function and write a new removeEvent() function to address the issues with the original.

A few days ago, after I heard about addEvent(), I began work on a new script to address many of the issues with it. The result is beyond anything that was expected for the competition. In fact, I’m pretty sure it’s beyond what most mere mortals even considered possible: I implemented much of the DOM 2 Events interfaces in IE!

What does that mean exactly? Well, it means that you can now use the W3C’s superior DOM2 model across browsers without any of the mess. For example, a script that used to be written like this:

var foo = document.getElementById("foo");
foo.onclick = go;

function go(evt) {
    evt = evt || window.event;
    target = evt.target || evt.srcElement;
    // Handle other cross-browser issues
    doSomething(target);
    ...
}

That can now be reduced to this much more sane method from the DOM2 interfaces:

var foo = document.getElementById("foo");
foo.addEventListener("click", go, false);

function go(evt) {
    doSomething(evt.target);
    ...
}

There’s no need to check for evt || window.event, nor any need to check for evt.target || evt.srcElement. Much of that cross-browser incompatibility mess is taken care of by my script. All that you, the authors, have to do is work with the standard DOM 2 interfaces! You can take a look at the heavily commented script and also my entry for PPK’s competition, which nicely demonstrates the script in action.

The following interfaces, properties and functions are supported from DOM 2 events:

Interface EventTarget

addEventListener

dispatchEvent

removeEventListener

Interface EventListener

handleEvent

Interface Event

PhaseType Constants (CAPTURE_PHASE, AT_TARGET and BUBBLE_PHASE)

bubbles

cancelable

currentTarget

eventPhase

target

timeStamp

type

initEvent() (not supported)

preventDefault()

stopPropagation()

Along with these event interfaces, there are a number of other interfaces I implemented including a fully conforming .getElementsByClassName() function, as defined in the Web Apps 1 for both the Document and Element interfaces, a prototype implementation of DOMTokenString() and many more, all availble in my DOM example script repositiory.