ptg 676 Chapter 15 • The W3C DOM and JavaScript 15.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. FORMAT object.attachEvent(eventType, function) EXAMPLE if (window.attachEvent){ myDiv=document.getElementById("div1"); myDiv.attachEvent("onclick", changeColor); } From the Library of WoweBook.Com ptg 15.9 Event Listeners with the W3C Model 677 The 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. FORMAT object.detachEvent(eventType, function); EXAMPLE if (window.detachEvent) object.detachEvent("onload", init) EXAMPLE 15.23 <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> From the Library of WoweBook.Com ptg 678 Chapter 15 • The W3C DOM and JavaScript 15.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 EXPLANATION 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. From the Library of WoweBook.Com ptg 15.9 Event Listeners with the W3C Model 679 event 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. EXAMPLE 15.24 /* 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; } Continues From the Library of WoweBook.Com ptg 680 Chapter 15 • The W3C DOM and JavaScript <html> <head><title>Positioning</title> 1 <link rel=stylesheet type="text/css" href="externstyle.css"> <script type="text/javascript"> var div1,div2,div3; 2 window.onload=function (){ 3 div1=document.getElementById("first"); div2=document.getElementById("second"); div3=document.getElementById("third"); 4 if(div1.addEventListener!= undefined){ //W3C Firefox Opera 5 div1.addEventListener('mouseover',unColorText,false); 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); } 6 else{ // Internet Explorer div1.attachEvent('onmouseover',unColorText); div1.attachEvent('onmouseout', colorText); div2.attachEvent('onmouseover',unColorText); div2.attachEvent('onmouseout', colorText); div3.attachEvent('onmouseover',unColorText); div3.attachEvent('onmouseout', colorText) } } 7 function colorText(e){ 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";} } 11 function unColorText(e){ 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"; } EXAMPLE 15.24 (CONTINUED) From the Library of WoweBook.Com ptg 15.9 Event Listeners with the W3C Model 681 else{ 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> EXPLANATION 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 unColor- Text() 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 EXAMPLE 15.24 (CONTINUED) From the Library of WoweBook.Com ptg 682 Chapter 15 • The W3C DOM and JavaScript 15.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. EXPLANATION ( CONTINUED) From the Library of WoweBook.Com . (CONTINUED) From the Library of WoweBook.Com ptg 682 Chapter 15 • The W3C DOM and JavaScript 15.10 Unobtrusive JavaScript In Chapter 1 we started talking about the three layers that make up a. changeColor); } From the Library of WoweBook.Com ptg 15.9 Event Listeners with the W3C Model 677 The detachEvent() Method. The detachEvent() method removes an event handler and its function. <head><title>Internet Explorer Event Handling</title> <script type="text /javascript& quot;> 1 function greetings(){ alert( "Hello World" ); } // Add an event