Category Archives: Projects

Personal and community projects.

DOM 2 Events

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.srcElement;
    // Handle other cross-browser issues

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) {

There’s no need to check for evt || window.event, nor any need to check for || 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
Interface EventListener
Interface Event
initEvent() (not supported)

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.

Firefox S5

I’m currently working on a project known as Firefox S5 within the SpreadFirefox community with the goal of designing and developing a large collection of useful presentation slides and designs to be used by anyone doing a presentation about Firefox using Eric Meyer’s S5. There will not, however, be just one slide show for every one to use as is; it is intended that presenters will mix ‘n’ match slides and pick a design to suit their own specific needs.

There are already 5 fantastic designs under development and there is a discussion about the direction in which to structure the content. Although the project is in its infancy, it popularity has exploded beyond my wildest expectations. From it’s humble beginnings as an idea I blogged about to being the first featured project on SFX, Firefox has great potential.

I’ve set up the demonstration slides which will be updated with new content and styles as they’re made available. If you’d like to get involved with this project, please feel free to add your ideas to the Firefox S5 wiki or discussion page or leave your comments here.