Section 26.4. Event Handling

26.4. Event Handling

With HTML 4.0, we were given the ability to tie scripts to certain events triggered on a web page. The most famous use of events is still probably JavaScript rollovers on links, triggered by the onmouseover and onmouseout events. Of course, CSS can handle that much easier now, but it doesn't render events useless, as there are many we can tap into (see Table 26-5) and put to good use.

Table 26-5. Common events

Event handler	Event
onblur	An element loses focus (note: buggy).
onchange	The content of a field changes.
onclick	The mouse clicks an object.
onerror	An error occurs when loading a document or an image.
onfocus	An element gets focus.
onkeydown	A keyboard key is pressed.
onkeypress	A keyboard key is pressed or held down.
onkeyup	A keyboard key is released.
onload	A page or an image is finished loading.
onmousedown	A mouse button is pressed.
onmousemove	The mouse is moved.
onmouseout	The mouse is moved off an element.
onmouseover	The mouse is moved over an element.
onmouseup	A mouse button is released.
onsubmit	The submit button is clicked on a form.

Tapping into events is not all that difficult to do. That said, there are good ways and bad ways. The old way to tap into an event was to place it inline as an attribute of the element you wanted the event handled on:

     <a href="http://www.oreilly.com"       onmouseover="window.status='Go to the O\'Reilly website';       return true;" onmouseout="window.status='';       return true;">O&#8217;Reilly</a> 

In this example, we are updating the status bar of the browser window with the text "Go to the O'Reilly website" when the mouse passes over the O'Reilly link and resetting it when the mouse moves off of it. This example also goes against the central tenet of web standards: separation of content from presentation and behavior.

This particular means of event handling is just poor form, but there are plenty of examples on the Web of event handling actually decreasing the accessibility and usability of the page. Take this hypothetical example:

     <a href="#"       onclick="popup('http://www.oreilly.com');">O&#8217;Reilly</a> 

Apart from the use of what we can only imagine is a pop-up function (which has its own accessibility and usability issues), what is wrong with this picture? What happens to that link if a user doesn't have JavaScript enabled in her browser? It doesn't work, plain and simple.

When we work with events, we need to be considerate of our users and conscious of any potential limitations they may have. After all, if they can't use your site, it is unlikely they will stay, let alone return.

There are better ways to write this link. This example still keeps the behavior and the content tied together, but at least it degrades gracefully:

     <a href="http://www.oreilly.com"       onclick="popup(this.href); return false;">O&#8217;Reilly</a> 

The onclick event handler is now using the DOM (discussed in Chapter 27) to access the href of the anchor element and pass that to the pop-up function. If JavaScript were not available or disabled, the link would function as links normally do, opening the target in the current window.

An even better way to handle events is outside of the (X)HTML altogether. Using methods discussed in Chapter 27, you can identify elements on the page and tie events to them. Here's a little sneak peek at how:

     function setPopups( ){       var links = document.getElementsByTagName( 'a' );       for( var i=0; i < links.length; i++ ){         if( links[i].href.indexOf( 'http://' ) != -1 ){           links[i].onclick = function( ){                                popup( this.href );                                return false;                              };         }       }     }     window.onload = function( ){                       setPopups( );                     }; 

This is by no means a production-quality script, it is simply a demonstration of how to assign a function to an event. In this example, we set two event handlers, one to the onclick event of all links on the page (provided http:// is found in the HRef) and another to the onload of the window.

There are other methods of assigning event handlers as well. In fact, a search has been underway to find the best means of adding and removing events. Dean Edwards recently offered the most robust solution (see http://dean.edwards.name/my/events.js). Using his addEvent( ) function, we could rewrite our little pop-up script to read:

     function setPopups( ){       var links = document.getElementsByTagName( 'a' );       for( var i=0; i < links.length; i++ ){         if( links[i].href.indexOf( 'http://' ) != -1 ){           addEvent( links[i], 'click', function( ){                                          popup( this.href );                                          return false;                                        } );         }       }     }     addEvent( window, 'load', setPopups ); 

and, like the previous example, we would not need any inline event handlers. The other benefit to Dean's function is the ability to add multiple events to a single event handler.