The Javascript DOM

18. DOM Event Processing

The standard DOM way of attaching events to objects within a web page gets around both the need to place any Javaascript into the objects in the page itself and it also allows for the same event to trigger multiple processes at the same time. This is done by adding eventListeners to the web page instead of using the old style event handlers. Most modern web browsers support event listeners but Internet Explorer has not yet been updated to support them yet and supports its own proprietary attachEvent method of doing the same thing instead.

We'll start by looking at how both of these methods of attaching events work in this tutorial and will look at each separately and how to combine them together in the next few tutorials.

When you attach an event to an object using the traditional method you can only attach one event handler for each event to an individual object and if you try to attach more than one then only the last one defined will be activated because the functions will effectively overwrite one another leaving only the last one actually in the code that can run. Using event listeners or attaching events the new way uses a different method of providing the link between the object and the event and allows us to attach more than one event of the same type to the same object. This means that with scripts that use the DOM way of attaching events we don't need to worry about what events may have been attached already and this will make combining multiple scripts on the same page easier as there is less room for them to conflict with one another.

The other difference from the traditional method is that the event doesn't only get triggered on the most specific tag but also triggers the same event on any containers that surround that tag. Let's look at an example of some HTML to help understand what this means.

This example HTML would presumably would have other attributes and content - I've just trimmed it down here to contain the essentials needed for this discussion. Let's consider if we attach the same type of event to each of the three tags. With the traditional way of attaching events the event it is difficult to say whether the event attached to the outer and/or middle tag will be triggered as well as the inner one and if they are then the order in which they are triggered can be different for different browsers. With the DOM method of attaching events we are provided both with a way of specifying the order of triggering the events and also a way to selectively stop at a given level when required.

The DOM method of attaching events gives us control over when and how event processing is performed in many ways that are not possible where the traditional method of embedding the event handlers into the HTML is used.