Java Reference
In-Depth Information
Using the Event Models of Differing Browsers
trY it out
In this Try It Out, you will rewrite
ch10_example12.html
using your event utility. Open your text
editor and type the following. Feel free to copy and paste the elements within the body and the style
sheet from
ch10_example12.html
.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 10: Example 16</title>
<style>
.underline {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<script src="event‐utility.js"></script>
<script>
function handleEvent(e) {
var target = evt.getTarget(e);
var type = e.type;
if (target.tagName == "P") {
if (type == "mouseover") {
target.className = "underline";
} else if (type == "mouseout") {
target.className = "";
}
}
if (type == "click") {
alert("You clicked the mouse button at the X:"
+ e.clientX + " and Y:" + e.clientY + " coordinates");
}
}
evt.addListener(document, "mouseover", handleEvent);
evt.addListener(document, "mouseout", handleEvent);
evt.addListener(document, "click", handleEvent);
</script>
</body>
</html>
Save this as
ch10_example16.html
, and load it into different browsers (preferably a standards‐compliant
browser and old‐IE, if you have access to one). It'll look and behave exactly like
ch10_example12.html
;
the paragraph text will change to red and have an underline as you move your mouse pointer over the
paragraphs. When your mouse pointer leaves a paragraph, the text returns to the original state. When
