Java Reference
In-Depth Information
Try It Out Using the DOM Event Model
Take a quick look at an example that uses some properties of the
MouseEvent
object.
Open a text editor and type the following:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Chapter 12: Example 8</title>
<style type=”text/css”>
.underline
{
color: red;
text-decoration: underline;
}
</style>
<script type=”text/javascript”>
function handleEvent(e)
{
if (e.target.tagName == “P”)
{
if (e.type == “mouseover”)
{
e.target.className = “underline”;
}
if (e.type == “mouseout”)
{
e.target.className = “”;
}
}
if (e.type == “click”)
{
alert(“You clicked the mouse button at the X:”
+ e.clientX + “ and Y:” + e.clientY + “ coordinates”);
}
}
document.onmouseover = handleEvent;
document.onmouseout = handleEvent;
document.onclick = handleEvent;
</script>
</head>
<body>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
</body>
</html>
Save this as ch12_examp8.htm and run it in your browser. When you move your mouse over one of the
paragraphs, you'll notice its text changes color to red and it becomes underlined. Click anywhere in the
page, and you'll see an alert box like Figure 12-15.
