The DOM Event Model

One of the keys to creating dynamic web pages is the use of event handlers. These allow you to execute specific script code in response to user or system initiated actions.

Most events relate to the browser GUI, such as mouse movements, button or key clicks and updates to form inputs. These are usually tied to a specific page element. Others relate to browser actions such as when a document or image completes loading.

Some objects have default actions defined for certain events, such as clicking on a hypertext link. The browser's normal action in that event is to load the URL associated with the link.

In any case, all events follow the same model. The DOM provides methods for capturing events so you can perform your own actions in response to them. It also provides an Event object which contains information specific to a given event that can be used by your event processing code.

Assigning Event Handlers

There are several ways to set up the capture of an event on an object using either HTML or scripting. In each case, you assign a function to handle the specific event when it occurs.

HTML Tag Attributes

Many HTML tags have intrinsic events associated with them. You can define script code to be executed when one of these events occurs using the event name as an attribute. For example,

<span style="background-color:yellow;"
 onmouseover="this.style.backgroundColor='black';this.style.color='white'"
 onmouseout="this.style.backgroundColor='yellow';this.style.color=''">
Sample element with mouse event handlers.
</span>

You can try it out on the text below:

Sample element with mouse event handlers.

Here, two different events are captured, mouseover and mouseout. the value assigned to the corresponding attributes is a string containing JavaScript code. Note the use of single quotes (') for string constants within the double quotes (") used to delimit the attribute value.

The script code for both events simply changes the text and background colors on the element's style. The keyword this keyword refers to the object that fired the event. Here it refers to the SPAN element.

It was stated before that when you set up capturing for an event, you assign a function to be called to handle that event. This seems to contradict the example above where the event code is simply a couple of JavaScript statements. However, the browser actually creates an anonymous function for the handler with those statements in it.

You can see this for yourself with another example. Click on the text below:

You should see an alert box with a function definition. The actual definition will vary according to browser but it will contain a single statement, the one defined in the HTML:

function name(argument_list) {
  alert(this.onclick);
}

This corresponds to the code set on the ONCLICK attribute:

<span style="background-color:yellow;"
 onclick="alert(this.onclick)">Sample element with an onclick event
handler.</span>

function onclick(event) {
  alert(this.onclick);
}

function anonymous() {
  alert(this.onclick);
}

 function anonymous(event) {
  alert(this.onclick);
}

Scripting

You can also assign event handlers to elements in the DOM using client-side scripting. Like other element attributes, events are represented as properties of the element object so you can set their value just like any other attribute.

The main difference is that unlike most attributes, which take a string value, event handlers must be set using a function reference. Here's an example,

and the code behind it:

<span id="sample1" style="background-color:yellow;">Sample element with
mouse event handlers.</span>

... JavaScript code ...

function highlight(event) {

  this.style.backgroundColor='black';
  this.style.color='white';
}

function normal(event) {

  this.style.backgroundColor='yellow';
  this.style.color='';
}

document.getElementById('sample1').onmouseover = highlight;
document.getElementById('sample1').onmouseout  = normal;

Note that the onmouseover property is set to highlight, i.e., the name of the function without parenthesis. This represents the Function object for highlight which is what the event property expects, a reference to the function to call when the event is fired.

If highlight() had been used instead, the browser would call the function and assign whatever value it returned as the event handler. In this particular case, an error would result in the function execution because this has no meaning in the given context.

Next