Webmaster in a Nutshell, Second Edition

JavaScript Event Handlers

One of the most important features provided by JavaScript is the ability to detect and react to events that occur while a document is loaded, rendered, and used. The JavaScript code that handles these events may be placed within the <script> tag, but more commonly, it is associated with a specific tag via one or more special tag attributes.

For example, you might want to invoke a JavaScript function when the user passes the mouse over a hyperlink in a document. The JavaScript-aware browsers support a special “mouse over” event-handler attribute for the <a> tag called onMouseOver to do just that:

<a href=doc.html onMouseOver="document.status='Click me!'; return true">

When the mouse passes over this example link, the browser executes the Java- Script statements. (Notice that the two JavaScript statements are enclosed in quotes and separated by a semicolon, and that single quotes surround the text-message portion of the first statement.)

While a complete explanation of this code is beyond our scope, the net result is that the browser places the message “Click me!” in the status bar of the browser window. Commonly, HTML authors use this simple JavaScript function to display a more descriptive explanation of a hyperlink, in place of the often cryptic URL the browser traditionally displays in the status window.

HTML supports a rich set of event handlers through related “on” event tag attributes. The value of any of the JavaScript event handler attributes is a quoted ...