JavaScript® 24-Hour Trainer

Chapter 19. Using Standard DOM and IE Event Handlers

One problem with DOM Level 0 event handlers is that only one function can be assigned to an event handler; assigning another function to the same event handler property overwrites any previous function value assigned to that property. This isn't such a big problem if you own all the code within the web page, as you can write one function that calls as many functions as needed, like the following code:

onload = function() {
    doSomething();
    doSomethingElse();
    andDoSomethingElse();
};

But if you use code written by a third party, it might rely on the same event handler for initialization, like this:

// code from third party module or library
onload = function() {
    initializeLibrary();
};

If that is the case, the outcome will be one of the following: Either your function overwrites the third party's function or vice versa. Nice, eh? It is fortunate that there is a solution to this particular problem, enabling you to add as many event handlers to a specific event as you want. Unfortunately, the solution varies between browsers that support the standard DOM event model (Firefox, Chrome, Safari, Opera, and Internet Explorer 9) and those that support the Internet Explorer (IE) event model (versions 8 and below; version 9 supports both event models).

STANDARD EVENT HANDLERS

The standard event model, specified in DOM Level 2, centers around two methods that are members of virtually every element object in the DOM. They are addEventListener() and ...