JavaScript 101 - Part 2

Event Handlers

Aside from the little pop-up window link we just looked at, all the scripts we've seen so far have had one thing in common: they ran as the page containing them was loading. Where things really get interesting is when JavaScript code can run in response to actions the user takes after the page has loaded. This opens up possibilities for back-and-forth interaction with the user beyond scrolling up and down and looking at a static Web page.

Event handlers allow you to set snippets of HTML code to be run in response to some event, be it something the user does (like clicking on a link), or something that happens in the browser (like the page loading completing). To illustrate, let's enhance the JavaScript pop-up link that we created in the previous section. Instead of triggering the showpopup function using the special JavaScript form of the href attribute as we did before, we'll use the onClick event handler:

<a href="popup.html" onClick="showpopup();return false;">Click for a popup</a>

In the above, the onClick attribute of the a href tag is an event handler. Specifically, it is an event handler that handles the "click" event, which occurs whenever the user clicks on the link. The attribute specifies the JavaScript code to be run when this event occurs. First, it calls the showpopup function, and then it returns a value of false.

"Returning a value" is a fancy way of saying "generating a result". When the result of a "click" event handler is false, the browser will ignore that click instead of responding to it as it normally would. In the case of our link here, the normal browser response would be to load the document given in the href attribute into the current browser window or frame. By returning false in our event handler, we are telling the browser that our event handler has done everything that needs doing in response to the click, and it shouldn't bother loading that document (since we've already loaded it into a pop-up window ourselves).

So what's the point of the href attribute in the above? It's there for browsers that don't support JavaScript, or that have JavaScript disabled. Such browsers will ignore the event handler attribute and will just see a normal link to popup.html. This provides a good fallback measure for older browsers, without interfering with the pop-up window that newer browsers will display.

Another simple example of using event handlers is to display descriptions of links in the browser status bar when the mouse moves over them. Here's the code for such a link:

<a href="target.html" onMouseOver="window.status='Link description'; return true;" onMouseOut="window.status=''; return true;">...</a>

This code uses two event handlers: onMouseOver, which reacts to the mouse moving onto the link, and onMouseOut, which reacts to the mouse moving off of the link. Both of these event handlers have been set to change the status property of the DOM window object (which corresponds to the text appearing in the status bar of the current window), then return true.

Returning true here performs the same function as returning false in our pop-up link above did. It tells the browser "don't do whatever you would normally do", which in the case of moving the mouse over a link would be to display the link target URL in the status bar. We want to tell the browser not to do this, because it would write over the description we just placed there. Why returning false stops a "click" event from having its usual effect and returning true stops "mouseover" and "mouseout" events from having their usual effects is anybody's guess. Some silly person decided that made sense at some point and that's the way it's been ever since.

Here's a link that displays a status bar message for you to try out: