JavaScript Bible, Gold Edition part 169 doc

addEventListener“eventType”, listenerFunc, useCapture removeEventListener“eventType”, listenerFunc, useCapture NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Example Listing 15-20 provide

Trang 1

Listing 15-19b (continued)

Choose a ‘hot’ color:

<OPTION VALUE=”red”>red

<OPTION VALUE=”blue”>blue

<OPTION VALUE=”cyan”>cyan

</SELECT><BR>

<P><INPUT TYPE=”button” VALUE=”Count the URNs”

onClick=”showBehaviorCount()”></P>

</BODY>

</HTML>

To turn off the behavior, the removeBehavior()method is invoked Notice that the

removeBehavior()method is associated with the myPobject, and the parameter is the ID of the behavior added earlier If you associate multiple behaviors with an object, you can remove one without disturbing the others because each has its own unique ID

addEventListener(“eventType”, listenerFunc,

useCapture )

removeEventListener(“eventType”,

listenerFunc, useCapture )

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

Example

Listing 15-20 provides a compact workbench to explore and experiment with the basic W3C DOM event model When the page loads, no event listeners are regis-tered with the browser (except for the control buttons, of course) But you can add

an event listener for a clickevent in bubble and/or capture mode to the BODY ele-ment or the P eleele-ment that surrounds the SPAN holding the line of text If you add

an event listener and click the text, you see a readout of the element processing the event and information indicating whether the event phase is bubbling (3) or cap-ture (1) With all event listeners engaged, notice the sequence of events being pro-cessed Remove listeners one at a time to see the effect on event processing

elementObject.addEventListener()

Trang 2

Listing 15-20: W3C Event Lab

<HTML>

<HEAD>

<TITLE>W3C Event Model Lab</TITLE>

TD {text-align:center}

</STYLE>

// add event listeners

function addBubbleListener(elemID) {

document.getElementById(elemID).addEventListener(“click”, reportEvent, false)

}

function addCaptureListener(elemID) {

document.getElementById(elemID).addEventListener(“click”, reportEvent, true)

}

// remove event listeners

function removeBubbleListener(elemID) {

document.getElementById(elemID).removeEventListener(“click”, reportEvent, false)

}

function removeCaptureListener(elemID) {

document.getElementById(elemID).removeEventListener(“click”, reportEvent, true)

}

// display details about any event heard

function reportEvent(evt) {

if (evt.target.parentNode.id == “mySPAN”) {

var msg = “Event processed at “ + evt.currentTarget.tagName +

“ element (event phase = “ + evt.eventPhase + “).\n”

document.controls.output.value += msg

}

// clear the details textarea

function clearTextArea() {

document.controls.output.value = “”

}

</SCRIPT>

</HEAD>

<H1>W3C Event Model Lab</H1>

<HR>

<P ID=”myP”><SPAN ID=”mySPAN”>This paragraph (a SPAN element nested inside a P

element) can be set to listen for “click” events.</SPAN></P>

<HR>

<CAPTION STYLE=”font-weight:bold”>Control Panel</CAPTION>

Continued

elementObject.addEventListener()

Trang 3

Listing 15-20 (continued)

<TR STYLE=”background-color:#ffff99”><TD ROWSPAN=2>”Bubble”-type click listener:

<TD><INPUT TYPE=”button” VALUE=”Add to BODY”

onClick=”addBubbleListener(‘myBODY’)”>

<TD><INPUT TYPE=”button” VALUE=”Remove from BODY”

onClick=”removeBubbleListener(‘myBODY’)”>

</TR>

<TD><INPUT TYPE=”button” VALUE=”Add to P”

onClick=”addBubbleListener(‘myP’)”>

<TD><INPUT TYPE=”button” VALUE=”Remove from P”

onClick=”removeBubbleListener(‘myP’)”>

</TR>

<TR STYLE=”background-color:#ff9999”><TD ROWSPAN=2>”Capture”-type click listener:

<TD><INPUT TYPE=”button” VALUE=”Add to BODY”

onClick=”addCaptureListener(‘myBODY’)”>

<TD><INPUT TYPE=”button” VALUE=”Remove from BODY”

onClick=”removeCaptureListener(‘myBODY’)”>

</TR>

<TD><INPUT TYPE=”button” VALUE=”Add to P”

onClick=”addCaptureListener(‘myP’)”>

<TD><INPUT TYPE=”button” VALUE=”Remove from P”

onClick=”removeCaptureListener(‘myP’)”>

</TR>

<P>Examine click event characteristics: <INPUT TYPE=”button” VALUE=”Clear” onClick=”clearTextArea()”><BR>

</FORM>

</TABLE>

</BODY>

</HTML>

appendChild(elementObject)

elementObject.appendChild()

Trang 4

work in IE5+ and NN6 The page includes a simple, two-item list A form enables you

to add items to the end of the list or replace the last item with a different entry

The append()function creates a new LI element and then uses the appendChild()

method to attach the text box text as the displayed text for the item The nested

expression, document.createTextNode(form.input.value), evaluates to a

legit-imate node that is appended to the new LI item All of this occurs before the new LI

item is added to the document In the final statement of the function,

appendChild()is invoked from the vantage point of the UL element — thus adding

the LI element as a child node of the UL element

Invoking the replaceChild()method in the replace()function utilizes some of

the same code The main difference is that the replaceChild()method requires a

second parameter: a reference to the child element to be replaced This

demonstra-tion replaces the final child node of the UL list, so the funcdemonstra-tion takes advantage of

the lastChildproperty of all elements to get a reference to that final nested child

That reference becomes the second parameter to replaceChild()

Listing 15-21: Various Child Methods

<HTML>

<HEAD>

<TITLE>appendChild(), removeChild(), and replaceChild() Methods</TITLE>

function append(form) {

if (form.input.value) {

var newItem = document.createElement(“LI”)

newItem.appendChild(document.createTextNode(form.input.value))

document.getElementById(“myUL”).appendChild(newItem)

}

function replace(form) {

if (form.input.value) {

var newItem = document.createElement(“LI”)

var lastChild = document.getElementById(“myUL”).lastChild

newItem.appendChild(document.createTextNode(form.input.value))

document.getElementById(“myUL”).replaceChild(newItem, lastChild)

}

function restore() {

var oneChild

var mainObj = document.getElementById(“myUL”)

Continued

elementObject.appendChild()

Trang 5

while (mainObj.childNodes.length > 2) { oneChild = mainObj.lastChild mainObj.removeChild(oneChild) }

}

</SCRIPT>

</HEAD>

<BODY>

<H1>Child Methods</H1>

<HR>

Here is a list of items:

<UL ID=”myUL”><LI>First Item

<LI>Second Item

</UL>

<FORM>

Enter some text to add/replace in the list:

</BODY>

</HTML>

The final part of the demonstration uses the removeChild()method to peel away all children of the UL element until just the two original items are left standing Again, the lastChildproperty comes in handy as the restore()function keeps removing the last child until only two remain Upon restoring the list, IE5/Mac fails to render the list bullets; but in the browser’s object model, the UL element still exists

applyElement(elementObject[, type])

Example

To help you visualize the impact of the applyElement()method with its different parameter settings, Listing 15-22 enables you to apply a new element (an EM ele-ment) to a SPAN element inside a paragraph At any time, you can view the HTML of the entire P element to see where the EM element is applied as well as its impact on the element containment hierarchy for the paragraph

elementObject.applyElement()

Trang 6

(click the middle button), the SPAN element’s first (and only) child element

becomes the EM element; the FONT element is now a child of the new EM element

Listing 15-22: Using the applyElement() Method

<HTML>

<HEAD>

<TITLE>applyElement() Method</TITLE>

function applyOutside() {

var newItem = document.createElement(“EM”)

newItem.id = newItem.uniqueID

document.all.mySpan.applyElement(newItem)

}

function applyInside() {

var newItem = document.createElement(“EM”)

newItem.id = newItem.uniqueID

document.all.mySpan.applyElement(newItem, “inside”)

}

function showHTML() {

alert(document.all.myP.outerHTML)

}

</SCRIPT>

</HEAD>

<BODY>

<H1>applyElement() Method</H1>

<HR>

<P ID=”myP”>A simple paragraph with a <SPAN ID=”mySpan”>

<FONT SIZE=+1>special</FONT></SPAN> word in it.</P>

<FORM>

<INPUT TYPE=”button” VALUE=”Apply <EM> Outside” onClick=”applyOutside()”>

<INPUT TYPE=”button” VALUE=”Apply <EM> Inside” onClick=”applyInside()”>

<INPUT TYPE=”button” VALUE=”Show <P> HTML ” onClick=”showHTML()”><BR>

</BODY>

</HTML>

The visible results of applying the EM element inside and outside the SPAN element

in this case are the same But you can see from the HTML results that each element

impacts the element hierarchy quite differently

elementObject.applyElement()

Trang 7

attachEvent(“eventName“, functionRef) detachEvent(“eventName“, functionRef)

Example

Use The Evaluator (Chapter 13) to create an anonymous function that is called in response to an onmousedownevent of the first paragraph on the page Begin by assigning the anonymous function to global variable a(already initialized in The Evaluator) in the upper text box:

a = new Function(“alert(‘Function created at “ + (new Date()) + “‘)”)

The quote marks and parentheses can get jumbled easily, so enter this expression carefully When you enter the expression successfully, the Results box shows the function’s text Now assign this function to the onmousedownevent of the myP ele-ment by entering the following stateele-ment into the upper text box:

document.all.myP.attachEvent(“onmousedown”, a)

The Results box displays truewhen successful If you mouse down on the first paragraph, an alert box displays the date and time that the anonymous function was created (when the new Date()expression was evaluated)

Now, disconnect the event relationship from the object by entering the following statement into the upper text box:

document.all.myP.detachEvent(“onmousedown”, a)

blur() focus()

elementObject.blur()

Trang 8

operate, Listing 15-23 for NN3+ and IE4+ creates a two-window environment From

each window, you can bring the other window to the front The main window uses

the object returned by window.open()to assemble the reference to the new

win-dow In the subwindow (whose content is created entirely on the fly by JavaScript),

self.openeris summoned to refer to the original window, while self.blur()

operates on the subwindow itself (except for the buggy behavior of NN6 noted

ear-lier) Blurring one window and focusing on another window yields the same result

of sending the window to the back of the pile

Listing 15-23: The window.focus() and window.blur()

Methods

<HTML>

<HEAD>

<TITLE>Window Focus() and Blur()</TITLE>

// declare global variable name

var newWindow = null

function makeNewWindow() {

// check if window already exists

if (!newWindow || newWindow.closed) {

// store new window object in global variable

newWindow = window.open(“”,””,”width=250,height=250”)

// pause briefly to let IE3 window finish opening

setTimeout(“fillWindow()”,100)

} else {

// window already exists, so bring it forward

newWindow.focus()

}

// assemble new content and write to subwindow

function fillWindow() {

var newContent = “<HTML><HEAD><TITLE>Another Subwindow</TITLE></HEAD>”

newContent += “<BODY bgColor=’salmon’>”

newContent += “<H1>A Salmon-Colored Subwindow.</H1>”

newContent += “<FORM><INPUT TYPE=’button’ VALUE=’Bring Main to Front’

onClick=’self.opener.focus()’>”

// the following button doesn’t work in NN6

newContent += “<FORM><INPUT TYPE=’button’ VALUE=’Put Me in Back’

onClick=’self.blur()’>”

newContent += “</FORM></BODY></HTML>”

// write HTML to new window document

Continued

elementObject.blur()

Trang 9

newWindow.document.write(newContent) newWindow.document.close()

}

</SCRIPT>

</HEAD>

<BODY>

<H1>Window focus() and blur() Methods</H1>

<HR>

<FORM>

<INPUT TYPE=”button” NAME=”newOne” VALUE=”Show New Window”

onClick=”makeNewWindow()”>

</FORM>

</BODY>

</HTML>

A key ingredient to the success of the makeNewWindow()function in Listing 15-23 is the first conditional expression Because newWindis initialized as a nullvalue when the page loads, that is its value the first time through the function But after you open the subwindow the first time, newWindis assigned a value (the subwin-dow object) that remains intact even if the user closes the winsubwin-dow Thus, the value doesn’t revert to nullby itself To catch the possibility that the user has closed the window, the conditional expression also sees if the window is closed If it is, a new subwindow is generated, and that new window’s reference value is reassigned to the newWindvariable On the other hand, if the window reference exists and the window is not closed, the focus()method brings that subwindow to the front

You can see the focus()method for a text object in action in Chapter 25’s descrip-tion of the select()method for text objects

clearAttributes()

Example

Use The Evaluator (Chapter 13) to examine the attributes of an element before and after you apply clearAttributes() To begin, display the HTML for the table ele-ment on the page by entering the following stateele-ment into the upper text field:

elementObject.clearAttributes()

Trang 10

to see how attributes such as BORDERand WIDTHaffect the display of the table.

Now, enter the following statement in the top text box to remove all removable

attributes from this element:

myTable.clearAttributes()

First, look at the table The border is gone, and the table is rendered only as wide as

is necessary to display the content with no cell padding Lastly, view the results of

the clearAttributes()method in the outerHTMLof the table again:

myTable.outerHTML

The source code file has not changed, but the object model in the browser’s

mem-ory reflects the changes you made

click()

Example

Use The Evaluator (Chapter 13) to experiment with the click()method The page

includes various types of buttons at the bottom You can “click” the checkbox, for

example, by entering the following statement in the topmost text field:

document.myForm2.myCheckbox.click()

If you use a recent browser version, you most likely can see the checkbox change

states between checked and unchecked each time you execute the statement

cloneNode(deepBoolean)

elementObject.cloneNode()

Định dạng
Số trang	10
Dung lượng	140,19 KB