Passing Events to a Function | CSS, DHTML, and Ajax, Fourth Edition

All events that take place in the browser window generate certain information about what occurred, where it occurred, and how it occurred. You can pass this information directly to a JavaScript function so that it can access the object without having to use the getElementByID method.

As seems true of all things in Web design, Internet Explorer has a different method for implementing event passing compared to all other browsers (see the sidebar "Alert! Results May Vary.") The good news is that the standard method and Internet Explorer method are easy to combine.

Alert! Results May Vary

If you're using an alert to display the value of the object variable (for example, alert (object)), you'll see different values depending on which browser you're using. For example, Internet Explorer for Windows will actually show [object]. Rather than showing you the actual value, many browsers will display a variable that is then used to access the object in question. Don't worry, though: This variable contains the same information.

In this example (Figure 12.14), I've set up a simple function that registers the x-axis position where the visitor clicks the mouse pointer within object1. This information is passed to the function when the event occurs.

Figure 12.14. Clicking the page displays an alert showing the x-position where the visitor clicked the mouse pointer.

To pass an event to a JavaScript function:

function passItOn() {. . .}

In the variables being passed to the function, add an evt variable to record the event (Code 12.6).

Code 12.6. The event variable passes information about the triggering event to the function, including where the mouse was when it was clicked.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Passing Events to a Function</title> <script type="text/javascript"> function passItOn(evt) {      evt = (evt) ? evt : ((window.event) ? window.event : null);      alert(evt.clientX) } </script> <style type="text/css" media="screen"> body {      font: 1em Georgia, "Times New Roman", times, serif;      color: #000;      background-color: #ccc;      margin: 8px; } #object1 {      padding: 4px;      background-color: #fff;      border: 2px solid #f00;      position: absolute;      z-index: 3;      top: 100px;      left: 150px;      width: 210px; } </style> </head> <body> <div  onclick="passItOn(event);">      <img src="/books/3/292/1/html/2/alice04.gif" alt="alice" height="298" width="200" />      <h1>Click Me!</h1> </div> </body></html>

var evt = (evt) ? evt : ((window.event) ? window.event : null);

Internet Explorer uses a slightly different syntax for tracking events. This line of code will bring the Internet Explorer version in line with the W3C standard for the evt variable. It is a conditional statement that determines whether the browser is using the evt or window.event method and assigns the correct value to the JavaScript variable evt, which can then be used in any browser to represent the event object.

alert(evt.clientX);

You can now use the evt variable to access information about the event. In this example, we're accessing the x-position where the visitor clicked the mouse during the event.

onclick="passItOn(event);"

Add one or more event handlers to an object to trigger the function. To include information about the triggering event, pass the variable event to the function. In this example, the event will fire when the user clicks the image.

Tip

Although it may be tempting simply to use event passing in all circumstances to create DHTML, event passing has some shortcomings. For example, Internet Explorer doesn't always respond to events that happen in child elements of the tag containing the event handler. In addition, the object that is being changed is most often not the same object as the one originating the event. I primarily use the getElementByID method for the code in this book, except when event passing offers a particular advantage.