Học JavaScript qua ví dụ part 52 potx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.14 MB, 8 trang )
ptg
474 Chapter 13 • Handling Events
13.4 Handling Mouse Events
In many previous examples, we’ve seen uses of the onClick event handler to initiate an
action when a user clicks the mouse in a button or on a link. There are a number of other
events that can be fired due some action of the mouse. When the user moves the mouse
pointer over a link, image, or other object, the onMouseOver event handler is triggered, and
when he or she moves the mouse pointer away from an object, the onMouseOut event is trig-
gered. Table 13.4 lists events that are triggered when mouse movement is detected.
Figure 13.9 Window was resized manually by the user. The onResize event handler
was triggered.
Table 13.4 Mouse Events
Event Handler When It Is Triggered
onClick When the mouse is clicked on a link and on form objects like button,
submit.
onDblClick When the mouse is double-clicked on a link, document, form object,
image.
onMouseDown When the mouse is pressed on a link, document.
onMouseMove When the mouse is moved when it is over a link, form object, or most
elements.
onMouseOut When a mouse is moved out of a link, imagemap.
onMouseOver When a mouse is moved over or enters a link, imagemap, or most
elements.
onMouseUp When the mouse is released from a link, document.
From the Library of WoweBook.Com
ptg
13.4 Handling Mouse Events 475
13.4.1 How to Use Mouse Events
The onMouseOver and onMouseOut event handlers occur when the user’s mouse pointer
is moved over or out of an object. The onMouseMove event occurs when the mouse just
touches the object. In Example 13.9, every time the user touches the button labeled
onMouseMove with his or her mouse, a function called counter() is invoked to keep track
of the number of mouse moves that have taken place. That number is displayed in an alert
dialog box, as shown in Figure 13.10. If the user double-clicks the mouse anywhere on
the page, the a message will appear, and if OK is clicked, the window will be closed.
EXAMPLE 13.9
<html>
<head><title>Mouse Events</title>
1 <script type="text/javascript">
2 var counter=0;
3 function alertme(){
alert("I'm outta hea!");
4 window.close();
}
5 function track_Moves(){
6 counter++;
if(counter==1){
alert(counter + " mouse moves so far!");
}
else{
alert(counter + " mouse moves so far!");
}
}
</script>
</head>
7 <body bgColor="CCFF00" onDblClick="alertme()";>
<p><font face="arial" size=3>
Double click anywhere on this page to get out!
</p><p>
When the mouse moves over the link, an event is triggered.
8 <a href="#" onMouseOver="alert('Event:onMouseOver');" />
onMouseOver
</a></p><p>
When the mouse moves away from a link, an event is triggered.
9 <a href="#" onMouseOut="alert('Event:onMouseOut');" />
onMouseOut
</a></p><p>
When the mouse moves in or out of the button, a function<br />
is called that keeps track of how many times the mouse touched
the button.
Continues
From the Library of WoweBook.Com
ptg
476 Chapter 13 • Handling Events
10 <form>
<input type="button"
value="onMouseMove"
11 onMouseMove="track_Moves();" />
</form>
</p>
</body>
</html>
EXPLANATION
1 A JavaScript program starts here.
2 A global variable called counter is initialized.
3 If the user double-clicks the mouse anywhere on the page, an alert dialog box will
appear; if the user clicks OK in the alert dialog box, the window will be closed.
4 The window’s close method causes the current window to be closed.
5 This function is called when the onMouseOver event handler is triggered. This
event happens when the user touches the mouse on an object, in this case, a but-
ton object.
6 The counter is incremented by one every time the user touches the button.
7 The onDblClick event handler is an attribute of the HTML <body> tag. When the
user double-clicks the mouse, the alertme() function will be called, and the win-
dow closed.
8 The onMouseOver event handler is an attribute of the <a href> link tag. It is trig-
gered anytime the user moves the mouse over the link. (The link has been deac-
tivated by using the # sign.) When this event occurs, the alert method is called.
9 The onMouseOut event handler is an attribute of the <a href> link tag. Any time
the user moves the mouse away from this link, the event is triggered, and the alert
method is called.
10 The form starts here. The input type is a button.
11 When the user’s mouse touches the button, the onMouseMove event handler is
triggered, and the track_Moves() function is called. This function will simply in-
crement a counter by one each time it is called, and then alert the user.
EXAMPLE 13.9 (CONTINUED)
From the Library of WoweBook.Com
ptg
13.4 Handling Mouse Events 477
13.4.2 Mouse Events and Images—Rollovers
The onMouseOver and onMouseOut event handlers are commonly used to create a roll-
over, an image that is replaced with a different image every time the mouse moves over
a link or image. (See section “A Simple Rollover with a Mouse Event” on page 432 in
Chapter 12.) In the following example, if the user touches the first link, the picture of
the first mouse will be replaced with a new picture, giving the illusion that the mouse’s
eyes are moving.
Figure 13.10 Links and mouse events.
EXAMPLE 13.10
<html>
<head><title>Mouse Events</title></head>
<body bgColor="orange">
1 <a href="#" onMouseOver="document.mouse.src='mouse.gif'">
onMouseOver </a><p>
2 <a href="#" onMouseOut="document.mouse.src='mouse2.gif';">
onMouseOut</a><p>
3 <img src="mousestart.gif" width=300 height=150 name="mouse">
</body>
</html>
EXPLANATION
1 The onMouseOver event handler is assigned to a deactivated link (# causes the link
to be inactive). When the mouse rolls onto the link, the event is triggered, and a
new image called mouse.gif will replace the original image, mousestart.gif.
Continues
From the Library of WoweBook.Com
ptg
478 Chapter 13 • Handling Events
13.4.3 Creating a Slideshow with Mouse Events
By using a timer with an event, you can do all sorts of fun things with images. You can
create scrolling banners, rotating billboards, button rollovers, and more. Example 13.11
is a simple slideshow. Four images are preloaded and each image is assigned to an array
element. When the user moves the mouse onto one of the pictures, a new picture will
replace the previous one every 2 seconds, and when he or she moves the mouse away
from the image, the show stops. Any time the mouse moves over the image, the show
starts again.
2 The onMouseOut event handler is assigned to another deactivated link, this time
with another image of the mouse. When the mouse rolls away from the link, the
event is triggered, and a new image called mouse2.gif will replace the last image,
mouse.gif. By rolling the mouse back and forth, the mouse’s eyes seem to move.
The words “hi” and “bye” also keep changing.
3 This is the original image that is displayed before the links are touched. See Figure 13.11.
Figure 13.11 Original display (left), as the mouse moves over the link (middle), and
as the mouse moves away from the link (right).
EXAMPLE 13.11
<html>
<head><title>The Four Seasons</title>
<script type="text/javascript">
1 var season = new Array();
2 var indx = 0;
3 var timeDelay=2000;
EXPLANATION ( CONTINUED)
From the Library of WoweBook.Com
ptg
13.4 Handling Mouse Events 479
4 season[0]=new Image();
5 season[0].src="winter.jpg";
season[1]=new Image();
season[1].src="summer.jpg";
season[2]=new Image();
season[2].src="fall.jpg";
season[3]=new Image();
season[3].src="spring.jpg";
6 function changeSeason(){
7 var size= season.length - 1;
if( indx < size ) {
indx++;
}
else {
indx = 0;
}
8 document.times.src= season[indx].src;
9 timeout=setTimeout('changeSeason()', timeDelay);
}
10 function stopShow(){
11 clearTimeout(timeout);
}
</script>
</head>
<body bgcolor="cornflowerblue">
<div align="center"><font face="arial">
<h2>The 4 Seasons</h2><b>
To see slide show, put your mouse on the image.<br />
Move your mouse away from the image, to stop it.
12 <a href="JavaScript:void(null);"
onMouseOver="return changeSeason();"
onMouseOut="return stopShow()">
<img name="times" src="winter.jpg" align="left"
border=8 hspace="10" width="700" height="200">
</a>
<br />
</div>
</body>
</html>
EXPLANATION
1 A new Array object called season is declared. It will be used to store an array of
images.
2 A global variable called indx is declared and initialized to 0.
3 The value 2000 is assigned to another global variable, called timeDelay.
4 Using the Image() constructor preloads and caches the images. Each new image
object is assigned to an element of the season array.
Continues
EXAMPLE 13.11 (CONTINUED)
From the Library of WoweBook.Com
ptg
480 Chapter 13 • Handling Events
5 The first element of the season array gets a new Image object. The src property (the
location and name of the image) is winter.jpg, located in the present working di-
rectory.
6 A user-defined function called changeSeason() is defined. It is called when the on-
MouseOver event handler is triggered by the user moving the mouse onto the im-
age. Its purpose is to replace one image with another image in the season array,
every 2 seconds, for as long as the user’s mouse is on the image. (It might be nice
to add a little Vivaldi audio clip here to enhance the show!)
7 The size of the array is its length – 1 because array indexes start at 0. As long as
the array size isn’t surpassed, the index value will keep being incremented by 1.
8 This is where image replacement happens. The name of the original image is times
(line 14) and it is referenced by JavaScript using the DOM hierarchy: doc-
ment.times.src is assigned a new image from the season array, season[indx].src. The
new image will be displayed.
9 The window object’s setTimeout() method will be set to call the changeSeason()
function every 2,000 milliseconds (2 seconds). Every 2 seconds a new image is
displayed as long as the user keeps the mouse on an image.
10 The user-defined function called stopShow() is defined. It is called when the on-
MouseOut event is triggered by the mouse moving away from the image. It turns
off the timer, stopping the slideshow.
11 The setTimeout() method is cleared.
12 The link has two mouse event handlers, onMouseOver and onMouseOut. The pseu-
do URL, JavaScript:void(null), deactivates the link and ensures that if there is a re-
turn value from the event, it will be nullified. Because neither of the events returns
anything, it would be enough to just use the protocol as JavaScript:. The display
is shown in Figures 13.12 and 13.13.
Figure 13.12 Watch the seasons change every 2 seconds.
EXPLANATION
From the Library of WoweBook.Com
ptg
13.5 Handling Link Events 481
13.5 Handling Link Events
In many of the previous examples, links have been used to trigger events. When the user
clicked or moved the 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. The link events are listed
in Table 13.5.
13.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 deacti-
vated by assigning a quoted hash mark to the link href attribute:
Figure 13.13 Spring image (top), summer image (middle), and fall image (bottom)
are all part of the slideshow created in Example 13.11.
Table 13.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
From the Library of WoweBook.Com
