Java Reference
In-Depth Information
Before moving on, notice the name of these events:
mouseover
and
mouseout
. Like the standard DOM,
old‐IE's
type
property returns the name of the event without the
"on"
prefix. So even though you
register the event handlers with
onmouseover
,
onmouseout
, and
onclick
, the type property will return
mouseover
,
mouseout
, and
click
, respectively.
The next bit of code displays the mouse pointer's location if the mouse button was clicked:
if (type == "click") {
alert("You clicked the mouse button at the X:"
+ e.clientX + " and Y:" + e.clientY + " coordinates");
}
}
If you compare Example 8 with Example 12, you will notice the two primary differences are how the
event handlers are registered, and how to retrieve the element that caused the event to occur. Most
everything else is shared between the standard DOM event model and IE's event model.
Now let's look at Example 9 through the prism of old‐IE.
a Crude tab Strip for Old‐IE
trY it out
In this Try It Out, you will rewrite
ch10_example9.html
to use old‐IE's event model. Open your text
editor and type the following, or you can copy
ch10_example9.html
and change the highlighted lines
of code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 10: Example 13</title>
<style>
.tabStrip {
background-color: #E4E2D5;
padding: 3px;
height: 22px;
}
.tabStrip div {
float: left;
font: 14px arial;
cursor: pointer;
}
.tabStrip-tab {
padding: 3px;
}
.tabStrip-tab-hover {
border: 1px solid #316AC5;
background-color: #C1D2EE;
padding: 2px;
