Head First Ajax

Chapter 4. Multiple Event Handlers: Two’s company

A single event handler isn’t always enough.

Sometimes you’ve got more than one event handler that needs to be called by an event. Maybe you’ve got some event-specific actions, as well as some generic code, and stuffing everything into a single event handler function won’t cut it. Or maybe you’re just trying to build clean, reusable code, and you’ve got two bits of functionality triggered by the same event. Fortunately, we can use some DOM Level 2 methods to assign multiple handler functions to a single event.

An event can have only one event handler attached to it (or so it seems)

Marcy’s page has a problem. We’ve assigned two event handlers to the onmouseover property of her image buttons:

Only the LAST event handler assigned gets run

When you assign two event handlers to the same event, only the last event handler that’s assigned gets run. So on Marcy’s page, mousing over a button triggers onmouseover. Then, that event runs the last handler assigned to it: buttonOver().

Event handlers are just properties

When you assign an event handler to an event on an XHTML element, the handler becomes a property of the element, just like the id or title ...