Java Reference
In-Depth Information
You want to do the same thing in the
updateStatus()
function, so you change the first statement to
use old‐IE's
srcElement
property as well:
function updateStatus(e) {
var el = e.srcElement;
After you retrieve the status element and set its
innerHTML
, you then want to remove the event handlers
if the Mexico flag is displayed. You do this with the
detachEvent()
method:
if (el.src.indexOf("mexico") > -1) {
el.detachEvent("onclick", changeImg);
el.detachEvent("onclick", updateStatus);
}
Here, the order in which you call
detachEvent()
doesn't matter. It will simply remove the event
handler from the element.
Next, you rewrite Example 8 to use old‐IE's event model.
Using the IE Event Model
trY it out
In this Try It Out, you use the old‐IE's event model. 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_example8.html
.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 10: Example 12</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>
function handleEvent(e) {
var target = e.srcElement;
var type = e.type;
if (target.tagName == "P") {
if (type == "mouseover") {
target.className = "underline";
} else if (type == "mouseout") {
target.className = "";
