- Including JavaScript in Your Web Page
- JavaScript Statements
- Variables
- Operators
- Capturing Mouse Events
- Summary
- Q&A
- Workshop
- Exercises
This chapter is from the book
This chapter is from the book
This chapter is from the book
Capturing Mouse Events
One of the fundamental purposes of JavaScript is to help make your web pages more interactive for the user. To achieve this, we need to have some mechanisms to detect what the user and the program are doing at any given moment—where the mouse is in the browser window, whether the user has clicked a mouse button or pressed a keyboard key, whether a page has fully loaded in the browser, and so on.
All of these occurrences we refer to as events, and JavaScript has a variety of tools to help us work with them. Let’s take a look at some of the ways we can detect a user’s mouse actions using JavaScript.
JavaScript deals with events by using so-called event handlers. We are going to investigate three of these: onClick, onMouseOver, and onMouseOut.
The onClick Event Handler
The onClick event handler can be applied to nearly all HTML elements visible on a page. One way we can implement it is to add one more attribute to the HTML element:
onclick=” ...some JavaScript code... “
Let’s see an example; have a look at Listing 2.3.
Listing 2.3 Using the onClick Event Handler
<!DOCTYPE html>
<html>
<head>
<title>onClick Demo</title>
</head>
<body>
<input type=”button” onclick=”alert(‘You clicked the button!’)” value=”Click Me” />
</body>
</html>
The HTML code adds a button to the <body> element of the page, and supplies that button with an onclick attribute. The value given to the onclick attribute is the JavaScript code we want to run when the HTML element (in this case a button) is clicked. When the user clicks on the button, the onclick event is activated (we normally say the event has been “fired”) and the JavaScript statement(s) listed in the value of the attribute are executed.
In this case, there’s just one statement:
alert(‘You clicked the button!’)
Figure 2.4 shows the result of clicking the button.
)
Figure 2.4 Using the onClick event handler
onMouseOver and onMouseOut Event Handlers
When we simply want to detect where the mouse pointer is on the screen with reference to a particular page element, onMouseOver and onMouseOut can help us to do that.
The onMouseOver event is fired when the user’s mouse cursor enters the region of the screen occupied by the element in question. The onMouseOut event, as I’m sure you’ve already guessed, is fired when the cursor leaves that same region.
Listing 2.4 provides a simple example of the onMouseOver event in action.
Listing 2.4 Using onMouseOver
<!DOCTYPE html>
<html>
<head>
<title>onMouseOver Demo</title>
</head>
<body>
<img src=”image1.png” alt=”image 1” onmouseover=”alert(‘You entered the image!’)” />
</body>
</html>
The result of running the script is shown in Figure 2.5. Replacing onmouseover with onmouseout in the code will, of course, simply fire the event handler—and therefore pop up the alert dialog—as the mouse leaves the image, rather than doing so as it enters.
)
Figure 2.5 Using the onMouseOver event handler
TRY IT YOURSELF: Creating an Image Rollover
We can use the onMouseOver and onMouseOut events to change how an image appears while the mouse pointer is above it. To achieve this, we use onMouseOver to change the src attribute of the HTML <img> element as the mouse cursor enters, and onMouseOut to change it back as the mouse cursor leaves. The code is shown in Listing 2.5.
Listing 2.5 An Image Rollover Using onMouseOver and onMouseOut
<!DOCTYPE html>
<html>
<head>
<title>OnMouseOver Demo</title>
</head>
<body>
<img src=”tick.gif” alt=”tick” onmouseover=”this.src=’tick2.gif’;”
onmouseout=”this.src=’tick.gif’;” />
</body>
</html>
You may notice something new in the syntax we used here. Within the JavaScript statements for onMouseOver and onMouseOut we use the keyword this.
When using this within an event handler added via an attribute of an HTML element, this refers to the HTML element itself; in this case, you can read it as “this image,” and this.src refers (using the “dot” notation that we’ve already met) to the src (source) property of this image object.
In this example we used two images, tick.gif and tick2.gif—you can use any images you have on hand, but the demonstration works best if they are the same size, and not too large.
Use your editor to create an HTML file containing the code of Listing 2.5. You can change the image names tick.gif and tick2.gif to the names of your two images, if different; just make sure the images are saved in the same folder as your HTML file. Save the HTML file and open it in your browser.
You should see that the image changes as the mouse pointer enters, and changes back as it leaves, as depicted in Figure 2.6.
)
Figure 2.6 An image rollover using onMouseOver and onMouseOut