Mine is admittedly a bit longer in terms of code and less “graceful” looking, but I think it’s got coverage for a lot more of the “problems” that people complain about with event handler adding/removing.

The strategy I used to be able to chain any number of handlers for an event, even duplicate ones, and have the ordering and remove-ability preserved, was using a function closure chain.

Here’s the claims that it makes:
1. Preserves the “this” in handlers to refer to the object the event was fired on.
2. Works on pretty much any browser/version (and doesn’t require any browser sniffing/detection to do so, since it falls back to the old-school onXXX style)
3. Allows mutliple chained event handlers (even duplicate handlers), which execute in a predictable FIFO order, regardless of browser. But duplicate handlers are removed in LIFO order, as I think would be expected.
4. does use expando properties (and closures) on the target object, but manages them in such a way that if an author properly calls unbindEvent() for their events when the page unloads, things should not leak (IE).

Here’s also a working example of the code: http://www.getify.com/test-events.html.

And here’s the code:

var UNDEF = "undefined", JSFUNC = "function";

function bindEvent(obj,eventName,handlerFunc) {
eventName = eventName.toLowerCase();
if (typeof obj[eventName] === JSFUNC) {
(function(ename) { // recursive function to move the chain of signatures down one link to make room for the new handler
if (typeof obj[ename+"_"] === JSFUNC) { // *next* item already a chain
arguments.callee(ename+"_"); // recurse to keep shifting the chain links down
}
obj[ename+"_"] = obj[ename];
})(eventName+"_");

obj[eventName+"_"] = handlerFunc; // store handler signature for removal purposes
var prev_chain = obj[eventName];
obj[eventName] = function() { // insert new link into the chain
prev_chain(); // 'recursively' (through closure wrap-up) call previous link/chain -- FIFO execution
handlerFunc(); // call new link
};
}
else { // just old-school register handler, and store its signature to create the first link of the chain
obj[eventName+"_"] = (obj[eventName] = handlerFunc);
}
}

function unbindEvent(obj,eventName,handlerFunc) {
eventName = eventName.toLowerCase();
if (typeof obj[eventName] === JSFUNC) {
var last_ename = null, ename = eventName+"_"; // start looking for signatures at first "_" level hung off the end of the event name
while (typeof obj[ename]!==UNDEF && obj[ename]!==null) { //loop through all signatures to find the target handler to remove
if (obj[ename] === handlerFunc) { // target handler found, so remove its signature from the chain
while (typeof obj[ename+"_"] === JSFUNC) { // keep going as long as the next higher link in the signature chain is defined
obj[ename] = obj[ename+"_"]; // move the next higher link down one level to replace the existing link
last_ename = ename; // used to keep track of which level/signature-name is the new highest one in the chain
ename += "_"; // move up one link level in the signature chain
}
obj[ename] = null; // the last link of the chain needs to be null'd
try { delete obj[ename]; } catch (err) { } // and deleted

if (last_ename !== null) { // if any chain of signature links still exists, it needs to be re-wrapped into a ball of closure function calls
var chain = obj[last_ename]; // start by capturing the function signature from the last link of the signature chain
ename = last_ename.replace(/_$/,""); // start at the next to last element of the signature chain
while (ename!==eventName) { // work backwards, rolling up the closures level by level, until you reach the beginning of the chain
(function(){ // needs a "local scope block" for proper closure
var prev_chain = chain, handlerFunc = obj[ename];
chain = function() { // re-create the closure wrap-up function representing this link of the signature chain, save for next while-iteration
prev_chain(); // FIFO execution
handlerFunc();
};
})();
ename = ename.replace(/_$/,""); // move back down one level of the signature chain
}
obj[ename] = chain; // entire closure chain re-created, so attach it to the main event handler property so it'll be called directly on event
}
break;
}
else { // target handler not found yet, step up one level of the signature chain
last_ename = ename;
ename += "_";
}
}
if (typeof obj[eventName+"_"] === UNDEF || obj[eventName+"_"] === null) { // clean up -- if the signature chain is now empty (all events removed), remove the main event handler too.
obj[eventName] = null;
try { delete obj[eventName]; } catch (err) { }
}
}
}

No-one should ‘own’ that event in such circumstances; you’ll need global conventions such as ‘onload events should be registered using this-and-such interface’.

I was just trying to illustrate that even though it is good that you try to play nice, other scripts might not and can screw up yours (or each other) anyway.

My more general ‘criticism’ is about the ‘good enough’ part of this article: I argued that for most people your original addEvent wrapper might still be ‘good enough’ and even just using object.onevent=function is ‘good enough’ in most cases. It just all depends on what you think is important and on what you actually need. You just need to be aware of the limitations of the solution you implement, and in my humble opinion most people are just not knowledgeable enough for that.

In general I think that ‘brevity’ should not be such a heavy factor when evaluating cross-browser eventhandling solutions, especially not if you already include several KB of script for other generic purposes.

Try working on a site like where multiple departments with multiple developers own discrete sections of a large website. It’s rare that one developer “owns” the window.onload event.

Being able to overload event handlers safely is far more valuable than the ability to detach handler functions. If you’re attaching so many handlers that you have to detach them to prevent leakage, I’d say that’s a poor design to begin with.

Besides that I personally never use window.onload; I have a DomLoaded class (in my toolbox) and register onload functions to that using DomLoaded.addLoadEvent()