This chapter is from the book
This chapter is from the book
This chapter is from the book
Using Mouse Events
JavaScript includes a number of event handlers for detecting mouse actions. Your script can detect the movement of the mouse pointer and when a button is clicked, released, or both.
Over and Out
You've already seen the first and most common event handler, onMouseOver. This handler is called when the mouse pointer moves over a link or other object.
The onMouseOut handler is the opposite—it is called when the mouse pointer moves out of the object's border. Unless something strange happens, this always happens some time after the onMouseOver event is called.
This handler is particularly useful if your script has made a change when the pointer moved over the object—for example, displaying a message in the status line or changing an image. You can use an onMouseOut handler to undo the action when the pointer moves away.
You'll use both onMouseOver and onMouseOut handlers in the "Workshop: Adding Link Descriptions to a Web Page" section at the end of this hour.
NOTE
One of the most common uses for the onMouseOver and onMouseOut event handlers is to create rollovers—images that change when the mouse moves over them. You'll learn how to create these in Hour 13, "Using Graphics and Animation."
Using the onMouseMove event
The onMouseMove event occurs any time the mouse pointer moves. As you might imagine, this happens quite often—the event can trigger hundreds of times as the mouse pointer moves across a page.
Because of the large number of generated events, browsers don't support the onMouseMove event by default. To enable it for a page, you need to use event capturing. This is similar to the dynamic events technique you learned earlier in this hour, but requires an extra step for Netscape browsers.
The basic syntax to support this event, for both browsers, is to set a function as the onMouseMove handler for the document or another object. For example, this statement sets the onMouseMove handler for the document to a function called MoveHere, which must be defined in the same page:
document.onMouseMove=MoveHere;
Additionally, Netscape requires that you specifically enable the event using the document.captureEvents method:
document.captureEvents(Event.MOUSEMOVE);
Ups and Downs
You can also use events to detect when the mouse button is clicked. The basic event handler for this is onClick. This event handler is called when the mouse button is clicked while positioned over the appropriate object.
NOTE
The object in this case can be a link. It can also be a form element. You'll learn more about forms in Hour 12, "Getting Data with Forms."
For example, you can use the following event handler to display an alert when a link is clicked:
<a href="http://www.jsworkshop.com/"
onClick="alert('You are about to leave this site.');">Click Here</a>
In this case, the onClick event handler runs before the linked page is loaded into the browser. This is useful for making links conditional or displaying a disclaimer before launching the linked page.
If your onClick event handler returns the false value, the link will not be followed. For example, the following is a link that displays a confirmation dialog. If you click Cancel, the link is not followed; if you click OK, the new page is loaded:
<a href="http://www.jsworkshop.com/"
onClick="return(window.confirm('Are you sure?'));">
Click Here</a>
This example uses the return statement to enclose the event handler. This ensures that the false value that is returned when the user clicks Cancel is returned from the event handler, which prevents the link from being followed.
The onDblClick event handler is similar, but is only used if the user double-clicks on an object. Because links usually require only a single click, you could use this to make a link do two different things depending on the number of clicks. (Needless to say, this could be confusing.) You can also detect double-clicks on images and other objects.
To give you even more control of what happens when the mouse button is pressed, two more events are included:
onMouseDown is used when the user presses the mouse button.
onMouseUp is used when the user releases the mouse button.
These two events are the two halves of a mouse click. If you want to detect an entire click, use onClick. Use onMouseUp and onMouseDown to detect just one or the other.
To detect which mouse button is pressed, you can use the which property of the event object. This property is assigned the value 1 for the left button, or 3 for the right button. This property is assigned for onClick, onDblClick, onMouseUp, and onMouseDown events.
For example, this script creates an onMouseDown event handler that displays an alert indicating which button was pressed.
function mousealert(e) {
whichone = (e.which == 1) ? "Left" : "Right";
message = "You clicked the " + whichone + " button.";
alert(message);
}
document.onmousedown = mousealert;