The onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, and onmousewheel Events
The onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout , onmouseover , onmouseup, and onmousewheel EventsThese are the mouse events, and we'll cover them in more detail in Chapter 15. You can find the support for these events in Table 6.74. Table 6.74. The onmousedown , onmouseenter , onmouseleave , onmousemove , onmouseout , onmouseover , onmouseup , and onmousewheel Events
Here's when these events occur:
We'll see more on mouse handling in Chapter 15, but here's a quick example. In this case, I'll just use the onmousedown event and display where on the page the mouse button was pressed: (Listing 06-18.html on the web site) <HTML> <HEAD> <TITLE>Using the onmousedown Event</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function display(e) { if (!e){ e = window.event } document.form1.text1.value = "The mouse went down at (" + e.clientX + ", " + e.clientY + ")" } // --> </SCRIPT> </HEAD> <BODY ONMOUSEDOWN="display(event)"> <H1>Using the onmousedown Event: Click Anywhere!</H1> <FORM NAME="form1"> <INPUT TYPE="TEXT" NAME="text1" SIZE="80"></INPUT> </FORM> </BODY> </HTML> You can see the results in Figure 6.14. Figure 6.14. Using the onmousedown event. The newest mouse event is the onmousewheel event, which occurs when the mouse wheel is turned. Here's an example that uses this event in the Internet Explorer 6.0. (It's not supported in the Netscape Navigator yet.) The change in the mouse wheel's position is recorded in the wheelDelta property, and if that value is greater than 120, the mouse wheel has been turned to a new position: (Listing 06-19.html on the web site) <HTML> <HEAD> <TITLE>Using the onmousewheel Event</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var count = 0 function wheeler() { if (event.wheelDelta >= 120){ count++ } else if (event.wheelDelta <= -120) { count-- } document.form1.text1.value= "Wheel rotations: " + count } // --> </SCRIPT> </HEAD> <BODY ONMOUSEWHEEL="wheeler()"> <H1>Using the onmousewheel Event</H1> <BR> <FORM NAME="form1"> <INPUT NAME="text1" TYPE="TEXT" SIZE="20"> </FORM> </BODY> </HTML> You can see the results in Figure 6.15. Figure 6.15. Using the onmousewheel event.  |
