Java Reference
In-Depth Information
you click your mouse, an
alert
box tells you the coordinates of where your mouse pointer was when
you clicked.
Once again, the majority of code is left untouched with only five lines of code having changes. First,
you want to include the
eve nt‐utility.js
file using a
<script/>
element:
<script src="event-utility.js"></script>
Next, you register the
mouseover
,
mouseout
, and
click
event listeners using your
evt.addListener()
method:
evt.addListener(document, "mouseover", handleEvent);
evt.addListener(document, "mouseout", handleEvent);
evt.addListener(document, "click", handleEvent);
And finally, you change the first line of the
handleEvent()
function:
function handleEvent(e) {
var target = evt.getTarget(e);
Instead of using any browser‐specific code, you use
evt.getTarget()
to retrieve the element object that
received the event.
Now let's look at
ch10_example13.html
and use the
evt
object.
a Crude tab Strip for all Browsers
trY it out
In this Try It Out, you will rewrite
ch10_example13.html
using your cross‐browser event utility.
Open your text editor and type the following, or you can copy
ch10_example13.html
and change the
highlighted lines of code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 10: Example 17</title>
<style>
.tabStrip {
background-color: #E4E2D5;
padding: 3px;
height: 22px;
}
.tabStrip div {
float: left;
font: 14px arial;
cursor: pointer;
}
.tabStrip-tab {
padding: 3px;