12.5 Handling Link Events | JavaScript by Example (2nd Edition)

In many of the previous examples, links have been used to trigger events. When the user clicked or moved his mouse over a link, a link event was triggered. One link event, onClick , gets sent whenever someone clicks on a link. As we saw with mouse events, onMouseOver and onMouseOut also cause a link event to occur.

Table 12.5. Link events.

Event Handler	When It Is Triggered
onClick	When the mouse is clicked on a link
onMouseOut	When a mouse is moved out of a link
onMouseOver	When a mouse is moved over a link

12.5.1 JavaScript URLs

We have seen JavaScript code in a javascript: URL throughout this text. In the example using mouse events, the event handler was assigned to a link and the link was deactivated with the javascript: protocol followed by a hash mark:

 <a href="#" onClick='alert("This hotlink is out of service!");    return false;'>Click here</a>

or by using the void operator to guarantee that any return value from the function will be discarded:

 <a href="javascript:void(0);" onMouseOver="return changeSeason();"

In either case, the link was not supposed to take the user to another location, but instead to handle an event or call a function. (Make sure that any function calls in the URL have been defined.) Another note: if the "#" causes the browser to jump to the top of the page when the link is clicked, you can add a return false statement inside the onClick handler to keep the browser from checking the content of the href .

The following simple example uses the onClick event handler with a deactivated link and the return statement; the display is shown in Figure 12.13.

Example 12.11

 <html><head><title>Deactivate the hotlink</title></head> <body> <center>  <a href="#" onClick='alert("This hotlink is out of service!");   return false;'>Click here</a>  </center> </body> </html>

Figure 12.13. The user clicked on a deactivated link.

graphics/12fig13.jpg