2 3 Internet Explorer Event Handling 1 function greetings{ alert "Hello World" ; } // Add an event handler 2 window.attachEvent "onload", greetings ; // Add another event handler 3
Trang 115.9.4 Event Listeners with Microsoft Internet Explorer
Microsoft, too, has developed an event registration model It looks similar to W3C’s, but
has some important differences To write cross-platform compatible code, you can test
for both See Example 15.23
The attachEvent() Method. The attachEvent() method is an IE5+ proprietary
equivalent of addEventListener() The method is attached to the object for which the
event is intended The parameters include the event type and a function Unlike the
W3C model, the event type parameter must include the on prefix (i.g., onload, onclick
etc.) If you forget this little, but important point, the method will not work!
Figure 15.44 The event listener was removed The mouse event doesn’t occur.
F O RM A T
object.attachEvent(eventType, function)
E X A M P L E
if (window.attachEvent){
myDiv=document.getElementById("div1");
myDiv.attachEvent("onclick", changeColor);
}
Trang 2The detachEvent() Method. The detachEvent() method removes an event handler
and its function and is the IE5+ proprietary equivalent of the DOM’s removeEventListener().
There are differences you should be aware of when comparing the W3C model and
the Internet Explorer model:
1 Events always bubble There is no capturing feature
2 The this keyword cannot be used to represent the event handling function The
this keyword refers to the global window object.
See Example 15.23 for examples of Internet Explorer handling
F O RM A T
object.detachEvent(eventType, function);
E X A M P L E
if (window.detachEvent) object.detachEvent("onload", init)
E X A M P L E 1 5 2 3
<html>
<head><title>Internet Explorer Event Handling</title>
<script type="text/javascript">
1 function greetings(){
alert( "Hello World" );
}
// Add an event handler
2 window.attachEvent( "onload", greetings );
// Add another event handler
3 document.attachEvent( "onclick", greetings );
// Add another event handler
document.attachEvent( "onmouseover", greetings);
4 // Remove an event handler just added
5 document.detachEvent( "onmouseover", greetings );
</script>
</head>
<body>
<p>IE has its own way of listening.</p>
</body>
</html>
Trang 315.9.5 Event Properties Revisited
In Chapter 13 we discussed the event object There are a number of event types defined
by the DOM HTML Events module, as shown in Table 15.8
In Example 15.24, event listeners for both the DOM and Internet Explorer model are
listening for mouseOver and mouseOut events The function parameter of the event
lis-teners change the style of a block of text to give it emphasis When the mouse rolls over
a specific block of text, the event handler invokes a function that can check to see what
block of text the mouse is on and detect when it leaves the box The node where the
E X P L A N A T I O N
1 This function will be called when a series of events are fired
2 The attachEvent() method (IE) causes the onload event to fire when the page has
loaded The onload event is a window event, and the function defined on line 1,
called greetings() will be called when that event is fired This method requires that
you use the on prefix with the event handler (see Figure 15.45)
3 The attachEvent() method (IE) causes the click event to fire when the user clicks
anywhere on the document (i.e., Web page) When that happens the greetings()
function will be called
4 The attachEvent() method (IE) causes a mouseover event to fire when the user
moves the mouse in the document Two different events are tied to the document
5 The detachEvent() method (IE) causes the mouse event created on line 4 to be
re-moved
Figure 15.45 When the page loads an event is fired and when the user clicks
anywhere on the document another event is fired.
Trang 4event occurred can be found in the currentTarget property (Firefox) or the srcElement
property (Internet Explorer)
Table 15.8 Event Properties: DOM and Internet Explorer
Name What It Describes
bubbles Boolean to test whether an event can bubble up the document tree.
canceleable Boolean to test whether the event can be cancelled
currentTarget The node currently being processed by a handler (Internet Explorer
doesn’t support this).
eventPhase A number specifying the phase of the event propagation.
fromElement Refers to the object where the mouse was pointing before the
mouseover event was triggered (Internet Explorer).
srcElement Refers to the object of the tag that caused the event to fire (Internet
Explorer).
target The node on which the event occurred, not necessarily the same as
currentTarget.
timeStamp When the event occurred (a Date object).
type The type of the event that occurred, such as click or mouseOut.
E X A M P L E 1 5 2 4
/* File: externstyle.css */
body { background-color: silver;
font-size: 22pt;
font-weight: bold;
}
.red { color:rgb(255,0,0); /* Defining classes */
font-style: verdana;
font-size: 32;
}
.blue { color:blue;
font-style: verdana;
font-size: 36;
}
.green { color: green;
font-style: verdana;
font-size: 40;
}
Trang 5
-<html>
<head><title>Positioning</title>
1 <link rel=stylesheet type="text/css" href="externstyle.css">
<script type="text/javascript">
var div1,div2,div3;
3 div1=document.getElementById("first");
div2=document.getElementById("second");
div3=document.getElementById("third");
//W3C Firefox Opera
div1.addEventListener('mouseout', colorText,false);
div2.addEventListener('mouseover',unColorText,false);
div2.addEventListener('mouseout', colorText,false);
div3.addEventListener('mouseover',unColorText,false);
div3.addEventListener('mouseout', colorText,false);
}
div1.attachEvent('onmouseover',unColorText);
div1.attachEvent('onmouseout', colorText);
div2.attachEvent('onmouseover',unColorText);
div2.attachEvent('onmouseout', colorText);
div3.attachEvent('onmouseover',unColorText);
div3.attachEvent('onmouseout', colorText) }
}
8 var evt = e || window.event; //Browser differences
9 var evtTarget= evt.target || evt.srcElement;
10 if(evtTarget.id=="first"){
div1.className="red"; }
else if(evtTarget.id == "second"){
div2.className="blue";
} else{ div3.className="green";}
}
var evt = e || window.event;// use e.srcElement.id (IE)
var evtTarget= evt.currentTarget || evt.srcElement;
if(evtTarget.id == "first"){
div1.className="black";
} else if(evtTarget.id == "second"){
div2.className="black";
}
E X A M P L E 1 5 2 4 (C O N T I N U E D)
Trang 6else{
div3.className="black";
} }
</script>
</head>
<body>
12 <div id="first"
style="position:absolute; top:50px">Roll over me! </div>
<div id="second"
style="position:absolute; top:100px">and then me,</div>
<div id="third"
style="position:absolute; top:150px">and me too.</div>
</body>
</html>
E X P L A N A T I O N
1 The style for this document is coming from an external style sheet It’s the same
style used in the previous example
2 When the onload event is fired (when the page has been fully loaded) this
anony-mous function will be called, its purpose to color the text
3 Now we get a reference to all three of the divs by their unique ids, assigned in the
HTML document on line 12
4 If using Internet Explorer, the addEventListener() method is undefined If it’s not
undefined (i.e., the browser supports the DOM method), then this block of text
will be entered
5 The event listeners are waiting for a mouseover or a mouseout event to occur on
each of the divs in the document When the mouse rolls over a div, the
unText() function will be called, and when the mouse moves out of a div, the
Color-Text() function is called.
6 Internet Explorer has its own method for event listening, called the attachEvent()
method The event listed as an argument, onmouseover or onmouseout, must have
the prefix on or an error will occur
7 The function colorText() takes one argument, a reference to the object where
the event occurred It is called when the user rolls the mouse away from the
text in the div.
8 The type of the event is either passed to the function as a parameter, e, (W3C) or
is a property of the global window object, window.event (Internet Explorer).
9 The target refers to the HTML element for which the event occurred W3C uses
the currentTarget property and Microsoft Internet Explorer uses the srcElement
property
Continues
E X A M P L E 1 5 2 4 (C O N T I N U E D)
Trang 715.10 Unobtrusive JavaScript
In Chapter 1 we started talking about the three layers that make up a complete Web page:
1 The content or structural layer consisting of the HTML/XML markup
2 The style or presentation layer consisting of the CSS style sheets
3 The behavior layer consisting of JavaScript
10 By using the id of the target, we get the value of the unique id that was assigned
to the object where the event occurred The first div container is defined with an
id name “first” The className property defines the class for this object When the
mouse rolls over this div, it will turn “red”
11 The function, unColorText(), is triggered when the mouse moves over the text in
one of the divs This function works like the ColorText() function, but turns the
text black when the mouse moves over the text, rather than coloring it (It also
changes the font size.) The results are shown in Figure 15.46
12 The three div containers are set up and positioned for the document.
Figure 15.46 Before the mouse rolls over the first <div> block (top left); after the
mouse has left all three containers (right) The font has changed in size and color for
each div.
E X P L A N A T I O N (C O N T I N U E D)