Java Reference
In-Depth Information
The highlighted lines of code are the only changes. First, you include
eve nt‐utility.js
. The code in
this example assumes the file is in the same directory as
ch10_example14.html
:
<script src="event-utility.js"></script>
You then register the event listener using
evt.addListener()
:
evt.addListener(link, "click", linkClick);
You pass it the element object you want to register the listener on, the name of the event you want to
listen for, and the function to execute when the event occurs.
The final change is inside the
linkClick()
function. You want to prevent the browser from
navigating to
somepage.html
, so you call your event utility's
preventDefault()
method and pass it
the event object. Now, when you click the link, the browser will stay on the same page.
adding and removing Multiple Event handlers
trY it out
In this Try It Out, you rewrite
ch10_example11.html
and use your event utility object to add and remove
event listeners/handlers. You can write it from scratch, or you can copy and paste from
ch10_example11
.html
. The highlighted lines indicate what changed in this example.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 10: Example 15</title>
</head>
<body>
<img id="img0" src="usa.gif" />
<div id="status"></div>
<script src="event‐utility.js"></script>
<script>
var myImages = [
"usa.gif",
"canada.gif",
"jamaica.gif",
"mexico.gif"
];
function changeImg(e) {
var el = evt.getTarget(e);
var newImgNumber = Math.round(Math.random() * 3);
while (el.src.indexOf(myImages[newImgNumber]) != -1) {
newImgNumber = Math.round(Math.random() * 3);
}
el.src = myImages[newImgNumber];
}
function updateStatus(e) {
