| Event handlers are most often applied directly to the tag of the object when you want to detect the event. However, another useful technique is to bind an event to one or more objects. You can then use the evt variable to access the object without having to add JavaScript code directly in the HTML and make changes to the object without first having to know its ID. In this example (Figure 12.15), one event has been bound to the entire page to display an alert message; the other is tied only to object1 and moves that object to wherever the visitor clicks. Figure 12.15. Clicking the image causes it to move. Clicking anywhere on the window displays an alert, telling visitors not to click there. 
To add a global event handler to a Web page: | | 1. | function initPage() {. . .}
Add the function initPage() to your JavaScript. This function prepares the global event handlers to be used, and then sets functions to be executed if those events are triggered (Code 12.7). Notice that when you call the function:
document.onclick = errorOn;
Code 12.7. The function errorOn() is bound to the document by an onclick event handler, and the function moveTo() is bound only to object1 by an onclick event handler.| [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 & Ajax | Binding Events to an Object</title> <script type="text/javascript"> function initPage() { document.getElementById('object1'). onclick = moveObject; document.onclick = errorOn; } function errorOn(evt) { alert ('Please do not click here again!') } function moveObject (evt) { var evt = (evt) ? evt : ((window.event) ? event : null); var object = document.getElementById(this.id); var moveLeft=evt.clientX; var moveTop=evt.clientY; object.style.left = moveLeft + 'px'; object.style.top = moveTop + 'px'; } </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 onload="initPage();" > <div > <img src="/books/3/292/1/html/2/alice04.gif" alt="alice" height="298" width="200" /> <h1>Click Me!</h1> </div> </body></html>
|
you don't include the parentheses with the function call. You can use any event handler listed in "Understanding Events" earlier in this chapter to set an event for any node in the document.
| | | 2. | function errorOn(evt) {. . .} function moveTo() {. . .}
Add to your JavaScript the functions that will be run when the events in the function from Step 1 are met.
In this example, the functions errorOn() and moveObject() are both triggered when the onclick events are triggered in the browser window or on object1. For the moveObject() function, we're also passing the evt variable to it (see the previous section, "Passing Events to a Function"), allowing us to learn about the triggering event.
To address the event we want to change, we can then use
var object = document.getElementById(this.id);
where this.id tells the function to use the ID of the triggering event. This will only work if the event has been bound to the object.
| 3. | onload="initPage()"
Add an event handler in the <body> tag to trigger the function you created in Step 1, which will initialize the bound events for the page. If this step is left out, nothing will happen.
|
 Tip
Notice that clicking the image will not only move the image, but also show the alert, because both events are called into play. However, clicking on any empty area of the screen will only trigger the errorOn() function.
|
