The Javascript DOM

19. Event Listeners

Adding a standard DOM event listener to a web page is fairly straightforward Javascript. The first thing we need to consider is that not all browsers support this yet so we will want to include a test to see if this "feature" is supported.

Let's start by looking at an example. This code adds an event listener to the object in the web page identified by the id 'myfield' (provided that the browser supports event listeners). The event that the event listener is triggered by in this example is a keyup event. Note that when we use event listeners we do not add the word on to the front the way that we did with traditional event handlers.

The third parameter which we have set to false relates to the order in which events are captured. The useCapture parameter is set to true when we want the outermost event listener to capture the event first and then pass it down the line toward the most specific object for which the event was triggered. With it set to false the most specific object handles the event first and then propogates it up the line to any more general objects that also have event listeners listening for this event. Actually since each individual event listener has this parameter those with it set true are run first from the most general to the most specific and are then followed by those with it set to false from the most specific to the most general.

The actual function that is called works identically with what we used with the traditional approach. The function receives one argument automatically that contains the event itself allowing us to access information about the event from within that function.

In addition to the usual properties of the event that you may want to access (eg. e.keyCode and e.shiftKey) there are several more which sometimes come in handy when events are attached this way.

• e.target identifies the element that triggered the event (since the same function can be attached to multiple objects)
• e.type identifies the type of event that was triggered eg. 'keyup' (since the same function can be triggered for different events)
• e.button identifies which mouse button was pressed for mouse events (0 = left button, 1 = centre button, 2 = right button)

Of course you can use these with the traditional method too but the way theat event listeners are written means that you are more likely to need them.

There are also a couple of event methods that you may need to use with your event listener to help control the new event handling functionality that this approach provides.

• e.stopPropogation() prevents the event from being passed through to further event listeners that may otherwise have received the event
• e.preventDefault() stops the calling object from performing any action that it would have otherwise performed after the event listener finished (this is the equivalent of 'return false;' at the end of a function called from a traditional event handler)

Of course Internet Explorer doesn't (yet) support the standard DOM event listener approach so we'll look at the IE equivalent in the next tutorial.