JavaScript Bible, Gold Edition part 208 pot
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (92.25 KB, 10 trang )
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
