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 EventTargetaddEventListenerdispatchEventremoveEventListenerInterface EventListenerhandleEventInterface EventPhaseTypeConstants (CAPTURE_PHASE,AT_TARGETandBUBBLE_PHASE)bubblescancelablecurrentTargeteventPhasetargettimeStamptypeinitEvent()(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.