Thông tin tài liệu
CD-562 Part VI ✦ Appendixes The two functions that report the results employ a bit of filtering to make sure that they process the event object only if the event occurs on an element and if the relatedTarget element is anything other than a nested text node of the central table cell element. Because nodes respond to events in NN6, this extra filtering prevents processing whenever the cursor makes the transition from the central TD element to its nested text node. Listing 29-21: Using the relatedTarget Property <HTML> <HEAD> <TITLE>relatedTarget Properties</TITLE> <STYLE TYPE=”text/CSS”> .direction {background-color:#00FFFF; width:100; height:50; text-align:center} #main {background-color:#FF6666; text-align:center} </STYLE> <SCRIPT LANGUAGE=”JavaScript”> function showArrival(evt) { if (evt.target.nodeType == 1) { if (evt.relatedTarget != evt.target.firstChild) { var direction = (evt.relatedTarget.firstChild) ? evt.relatedTarget.firstChild.nodeValue : “parts unknown” status = “Arrived from: “ + direction } } } function showDeparture(evt) { if (evt.target.nodeType == 1) { if (evt.relatedTarget != evt.target.firstChild) { var direction = (evt.relatedTarget.firstChild) ? evt.relatedTarget.firstChild.nodeValue : “parts unknown” status = “Departed to: “ + direction } } } </SCRIPT> </HEAD> <BODY> <H1>relatedTarget Properties</H1> <HR> <P>Roll the mouse to the center box and look for arrival information in the status bar. Roll the mouse away from the center box and look for departure information in the status bar.</P> <TABLE CELLSPACING=0 CELLPADDING=5> <TR><TD></TD><TD CLASS=”direction”>North</TD><TD></TD></TR> <TR><TD CLASS=”direction”>West</TD> <TD ID=”main” onMouseOver=”showArrival(event)” onMouseOut=”showDeparture(event)”>Roll</TD> (NN6) eventObject.relatedTarget CD-563 Appendix F ✦ Examples from Parts III and IV <TD CLASS=”direction”>East</TD></TR> <TR><TD></TD><TD CLASS=”direction”>South</TD><TD></TD></TR> </TABLE> </BODY> </HTML> target NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example As a simplified demonstration of the power of the target property, Listing 29-22 has but two event handlers defined for the BODY element, each invoking a single function. The idea is that the onMouseDown and onMouseUp events will bubble up from whatever their targets are, and the event handler functions will find out which element is the target and modify the color style of that element. An extra flair is added to the script in that each function also checks the className property of the target element. If the className is bold — a class name shared by three SPAN elements in the paragraph — the style sheet rule for that class is modi- fied so that all items share the same color. Your scripts can do even more in the way of filtering objects that arrive at the functions to perform special operations on certain objects or groups of objects. Notice that the scripts don’t have to know anything about the objects on the page to address each clicked one individually. That’s because the target property pro- vides all of the specificity needed for acting on the target element. Listing 29-22: Using the target Property <HTML> <HEAD> <TITLE>target Property</TITLE> Continued (NN6) eventObject.target CD-564 Part VI ✦ Appendixes Listing 29-22 (continued) <STYLE TYPE=”text/css”> .bold {font-weight:bold} .ital {font-style:italic} </STYLE> <SCRIPT LANGUAGE=”JavaScript”> function highlight(evt) { var elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target if (elem.className == “bold”) { document.styleSheets[0].cssRules[0].style.color = “red” } else { elem.style.color = “#FFCC00” } } function restore(evt) { var elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target if (elem.className == “bold”) { document.styleSheets[0].cssRules[0].style.color = “black” } else { elem.style.color = “black” } } </SCRIPT> </HEAD> <BODY onMouseDown=”highlight(event)” onMouseUp=”restore(event)”> <H1>target Property</H1> <HR> <P>One event handler </P> <UL> <LI>Can <LI>Cover <LI>Many <LI>Objects </UL> <P> Lorem ipsum dolor sit amet, consectetaur adipisicing elit, <SPAN CLASS=”bold”>sed do </SPAN>eiusmod tempor incididunt <SPAN CLASS=”ital”>ut labore et </SPAN>dolore magna aliqua. Ut enim adminim veniam, <SPAN CLASS=”bold”>quis nostrud exercitation </SPAN>ullamco laboris nisi ut aliquip ex ea <SPAN CLASS=”bold”>commodo consequat</SPAN>. </P> </BODY> </HTML> (NN6) eventObject.target CD-565 Appendix F ✦ Examples from Parts III and IV timeStamp NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example Listing 29-23 uses the timeStamp property to calculate the instantaneous typing speed when you type into a TEXTAREA. The calculations are pretty raw,and work only on intra-keystroke times without any averaging or smoothing that a more sophisticated typing tutor might perform. Calculated values are rounded to the nearest integer. Listing 29-23: Using the timeStamp property <HTML> <HEAD> <TITLE>timeStamp Property</TITLE> <SCRIPT LANGUAGE=”JavaScript”> var stamp function calcSpeed(evt) { if (stamp) { var gross = evt.timeStamp - stamp var wpm = Math.round(6000/gross) document.getElementById(“wpm”).firstChild.nodeValue = wpm + “ wpm.” } stamp = evt.timeStamp } </SCRIPT> </HEAD> <BODY> <H1>timeStamp Property</H1> <HR> <P>Start typing, and watch your instantaneous typing speed below:</P> <P> <TEXTAREA COLS=60 ROWS=10 WRAP=”hard” onKeyPress=”calcSpeed(event)”></TEXTAREA> </P> <P>Typing Speed: <SPAN ID=”wpm”> </SPAN></P> </BODY> </HTML> (NN6) eventObject.timeStamp CD-566 Part VI ✦ Appendixes Chapter 30 Examples The following sections contain examples from Chapter 30, “Style sheet and Style Objects.” styleSheet Object Properties cssRules NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ (✓)(✓) Example Use The Evaluator (Chapter 13) to look at the cssRules property in NN6+ or IE5+/Mac. First, view how many rules are in the first styleSheet object of the page by entering the following statement into the top text box: document.styleSheets[0].cssRules.length Now use the array with an index value to access one of the rule objects to view the rule object’s properties list. Enter the following statement into the bottom text box: document.styleSheets[0].cssRules[1] You use this syntax to modify the style details of an individual rule belonging to the styleSheet object. cssText NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ styleSheetObject.cssText CD-567 Appendix F ✦ Examples from Parts III and IV Example Use The Evaluator (Chapter 13) to replace the style rules in one blast via the cssText property. Begin by examining the value returned from the property for the initially disabled style sheet by entering the following statement into the top text box: document.styleSheets[0].cssText Next, enable the style sheet so that its rules are applied to the document: document.styleSheets[0].disabled = false Finally, enter the following statement into the top text box to overwrite the style sheet with entirely new rules. document.styleSheets[0].cssText = “P {color:red}” Reload the page after you are finished to restore the original state. disabled NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example Use The Evaluator (Chapter 13) to toggle between the enabled and disabled state of the first styleSheet object on the page. Enter the following statement into the top text box: document.styleSheets[0].disabled = (!document.styleSheets[0].disabled) The inclusion of the NOT operator (!) forces the state to change from true to false or false to true with each click of the Evaluate button. ownerNode NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ styleSheetObject.ownerNode CD-568 Part VI ✦ Appendixes Example Use The Evaluator (Chapter 13) with NN6 to inspect the ownerNode of the first styleSheet object in the document. Enter the following statement into the top text box: document.styleSheets[0].ownerNode.tagName The returned value is the STYLE element tag name. owningElement NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Use The Evaluator (Chapter 13) with IE4+ to inspect the owningElement of the first styleSheet object in the document. Enter the following statement into the top text box: document.styleSheets[0].owningElement.tagName The returned value is the STYLE element tag name. rules NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Use The Evaluator (Chapter 13) with IE4+ to examine the rules property of the first styleSheet object in the page. First, find out how many rules are in the first styleSheet object by entering the following statement into the top text box: document.styleSheets[0].rules.length styleSheetObject.rules CD-569 Appendix F ✦ Examples from Parts III and IV Next, examine the properties of one of the rules by entering the following statement into the bottom text box: document.styleSheets[0].rules[1] You now see the all the properties that IE4+ exposes for a rule object. Methods addRule(“selector“, “styleSpec“[, index]) removeRule(index) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Use The Evaluator (Chapter 13) with IE4+ to add a style sheet rule to the first styleSheet object of the page. First, make sure the style sheet is enabled by entering the following statement into the top text box: document.styleSheets[0].disabled = false Next, append a style that sets the color of the TEXTAREA element: document.styleSheets[0].addRule(“TEXTAREA”, “color:red”) Enter any valid object (such as document.body) into the bottom text box to see how the style has been applied to the TEXTAREA element on the page. Now remove the style, using the index of the last item of the rules collection as the index: document.styleSheets[0].removeRule(document.styleSheets[0].rules.length - 1) The text in the TEXTAREA returns to its default color. styleSheetObject.addRule() CD-570 Part VI ✦ Appendixes deleteRule(index) insertRule(“rule”, index) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example Use The Evaluator (Chapter 13) with NN6+ to add a style sheet rule to the first styleSheet object of the page. First, make sure the style sheet is enabled by entering the following statement into the top text box: document.styleSheets[0].disabled = false Next, append a style that sets the color of the TEXTAREA element: document.styleSheets[0].insertRule(“TEXTAREA {color:red}”, document.styleSheets[0].cssRules.length) Enter any valid object (such as document.body) into the bottom text box to see how the style has been applied to the TEXTAREA element on the page. Now remove the style, using the index of the last item of the rules collection as the index: document.styleSheets[0].deleteRule(document.styleSheets[0].cssRules.length - 1) The first release of NN6 processes most, but not all, of the internal actions in response to the deleteRule() method. The method returns no value, so the Results box after evaluating the deleteRule() example statement correctly reports undefined. At the same time, the method has genuinely removed the rule from the styleSheet object (as proven by inspecting the length property of the document.styleSheets[0].cssRules array). But the browser does not refresh the page display to reflect the removal of the rule. styleSheetObject.deleteRule() CD-571 Appendix F ✦ Examples from Parts III and IV cssRule and rule Objects Properties selectorText NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example Use The Evaluator (Chapter 13) to examine the selectorText property of rules in the first styleSheet object of the page. Enter each of the following statements in the top text box: document.styleSheets[0].rules[0].selectorText document.styleSheets[0].rules[1].selectorText Compare these values against the source code view for the STYLE element in the page. style NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example Use The Evaluator (Chapter 13) to modify a style property of one of the styleSheet rules in the page. The syntax shown here is for IE4+, but you can substitute the cssRules reference for the rules collection reference in NN6 (and IE5/Mac) if you like. ruleObject.style . (evt.relatedTarget.firstChild) ? evt.relatedTarget.firstChild.nodeValue : “parts unknown” status = “Arrived from: “ + direction } } } function showDeparture(evt) { if (evt.target.nodeType == 1) { if (evt.relatedTarget. direction = (evt.relatedTarget.firstChild) ? evt.relatedTarget.firstChild.nodeValue : “parts unknown” status = “Departed to: “ + direction } } } </SCRIPT> </HEAD> <BODY> <H1>relatedTarget. onMouseOver=”showArrival(event)” onMouseOut=”showDeparture(event)”>Roll</TD> (NN6) eventObject.relatedTarget CD-563 Appendix F ✦ Examples from Parts III and IV <TD CLASS=”direction”>East</TD></TR> <TR><TD></TD><TD
Ngày đăng: 06/07/2014, 06:20
Xem thêm: JavaScript Bible, Gold Edition part 208 pot, JavaScript Bible, Gold Edition part 208 pot
