When this page loaded three alert boxes were presented. These were called from event handlers bound to the window onload event. They were bound in order: a, b, c; but, triggered out of order. This is because A and C were bound by assignment to the window's onload property and executed first. B was bounded using either attachEvent (in IE) or addEventListener (W3C Compliant browsers) and executed last. Here is the code:

            window.onload = handler_a;
            addEvent(window, 'load', handler_b);
            addEvent(window, 'load', handler_c, true);

AddEvent is our user defined function for binding event handlers. This function can either use the method addEventListener (or attachEvent for IE) or bind by assignment to the object's event. The third parameter indicates the type of binding requested: true for assignment. So, in the code above, handler_c is assigned to window.onload. To not overwrite handler_a, addEvent wraps both handlers in an anonymous function that is assign to window.onload.

The "Show Handler" buttons below displays the content of the object's event property. This is the value returned from window.onload.toString(). Handlers that are bound by attachEvent or addEventListener are included, nor is there away to read them.

Onload Event

Notice that handler B doesn't appear in the string returned from window.onload.toString(). Events bound with addEventListener are handled differently than events bound with either of the other methods. They are not included in the onload property, and they are called last.

Handlers bound with addEventListener (or IE's attachEvent) are called after handlers bound to the object's event

Mixing Inline Handlers with Other Binding Methods

The next section demonstrates how addEvent and removeEvent handle legacy event bindings. Link One (below) has three event handlers, really just code snippets, assigned to the onclick attribute. See the HTML below.

     <a href="javascript:alert('Hi! Default Action here.')" id="link1"
     onclick="alert('now what');
        this.innerHTML = (this.innerHTML == 'Oops!'? 'Link One' : 'Oops!);
        return test1(event);" >Link One</a>

The browser converts the HTML to an event handler assigned to the object's event property, in this case onclick. However, different browsers give slightly different results. Click "Show Handler" below to see how this browser converts the inline event code.

Click the link to see how the event handlers work. Then, add or remove event handlers, test the link, and display code to get a feel for how addEvent and removeEvent work. The check box determines if use of attachEvent or addEventListener should be blocked. Unchecked the method supported by the browser ise used, and checked it is not used.

Link One Onclick Event

This link, Link One, has three onclick inline statements


Whereas, Link Two has no inline handlers, but test1 was bound by assignment to the object's onclick property at start up. Check it out.

Link Two Onclick Event

When binding by assignment, addEvent puts handlers without a return first, and those with a return last. The first handler with a return blocks execution of the remaining handlers.

Stopping the default action with preventDefault (returnValue in IE) doesn't affect execution of subsequent handlers bound to the same event. Try test4.