272Part IIIDocument Objects Referencebeginning. Browsers prior to IE4 and NN6 limited these methods primarily to the windowobject and form control elements. WindowsFor window objects, the blur()method (NN3+, IE4+) pushes the referenced window to theback of all other open windows. If other browser suite windows (such as e-mail or newsreader windows) are open, the window receiving the blur()method is placed behind thesewindows as well. The window.blur()method does not adjust the stacking order of the current window inMozilla-based browsers (thus the Put Me in Back button in Listing 15-23 doesn t work inthose browsers). But a script in a window can invoke the focus()method of another windowto bring that other window to the front (provided a scriptable linkage, such as the window. openerproperty, exists between the two windows). The minute you create another window for a user in your Web site environment, you mustpay attention to window layer management. With browser windows so easily activated by theslightest mouse click, a user can lose a smaller window behind a larger one in a snap. Mostinexperienced users don t think to check the Windows taskbar or browser menu bar (if thebrowser is so equipped) to see if a smaller window is still open and then activate it. If thatsubwindow is important to your site design, then you should present a button or otherdevice in each window that enables users to safely switch among windows. The window. focus()method brings the referenced window to the front of all the windows. Rather than supply a separate button on your page to bring a hidden window forward, youshould build your window-opening functions in such a way that if the window is alreadyopen, the function automatically brings that window forward (as shown in Listing 15-23). Thisremoves the burden of window management from your visitors. The key to success with this method is making sure that your references to the desired win- dows are correct. Therefore, be prepared to use the window.openerproperty to refer to themain window if a subwindow needs to bring the main window back into focus. Form control elementsThe blur()and focus()methods apply primarily to text-oriented form controls: text input, select, and textareaelements. Just as a camera lens blurs when it goes out of focus, a text object blurs when it losesfocus when someone clicks or tabs out of the field. Under script control, blur()deselectswhatever may be selected in the field, and the text insertion pointer leaves the field. Thepointer does not proceed to the next field in tabbing order, as it does if you perform a blur bytabbing out of the field manually. For a text object, having focus means that the text insertion pointer is flashing in that textobject s field. Giving a field focus is like opening it up for human editing. Setting the focus of a text field or textareadoes not, by itself, enable you to place the cursorat any specified location in the field. The cursor usually appears at the beginning of the text. To prepare a field for entry to remove the existing text, use both the focus()and select() methods in series. There is a caveat about using focus()and select()together to preselect the content of atext field for immediate editing: Many versions of Internet Explorer fail to achieve the desiredresults due to an internal timing problem. You can work around this problem (and remainCautionelementObject.blur()

271Chapter 15Generic HTML Element ObjectsThe version with attachEvent()is as follows: myObject.attachEvent( onmousedown , setHilite); Both parameters are required. The first parameter is a string version (case-insensitive) of theevent name. The second is a reference to the function to be invoked when the event fires forthis object. A function referenceis an unquoted, case-sensitive identifier for the function withoutany parentheses (which also means that you cannot pass parameters in this function call). There is a subtle benefit to using attachEvent()over the event property binding approach. When you use attachEvent(), the method returns a Boolean value of trueif the event bind- ing succeeds. IE triggers a script error if the function reference fails, so don t rely on areturned value of falseto catch these kinds of errors. Also, there is no validation that theobject recognizes the event name. If you have used attachEvent()to bind an event handler to an object s event, you can dis- connect that binding with the detachEvent()method. The parameters are the same as forattachEvent(). The detachEvent()method cannot unbind events whose associations areestablished via tag attributes or event property settings. The W3C DOM event model provides functionality similar to these IE-only methods: addEventListener()and removeEventListener(). ExampleUse The Evaluator (Chapter 13) to create an anonymous function that is called in response toan onmousedownevent of the first paragraph on the page. Begin by assigning the anonymousfunction 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. Nowassign this function to the onmousedownevent of the myPelement by entering the followingstatement into the upper text box: document.getElementById( myP ).attachEvent( onmousedown , a) The Results box displays truewhen successful. If you mouse down on the first paragraph, analert box displays the date and time that the anonymous function was created (when the newDate()expression was evaluated). Now, disconnect the event relationship from the object by entering the following statementinto the upper text box: document.getElementById( myP ).detachEvent( onmousedown , a) Related Items:addEventListener(), detachEvent(), dispatchEvent(), fireEvent(), removeEventListener()methods; Event binding (Chapter 14). blur() focus() Returns:Nothing. Compatibility:WinIE3+, MacIE3+, NN2+, Moz1+, Safari1+ The blur()method removes focus from an element, while the focus()method gives focusto an element. Even though the blur()and focus()methods have been around since theearliest scriptable browsers, not every focusable object has enjoyed these methods since theelementObject.blur()

270Part IIIDocument Objects ReferenceListing 15-22(continued)

applyElement() Method

A simple paragraph with a special word in it.

269Chapter 15Generic HTML Element ObjectsThe final part of the demonstration uses the removeChild()method to peel away all children ofthe ulelement until just the two original items are left standing. Again, the lastChildpropertycomes in handy as the restore()function keeps removing the last child until only two remain. Related Items:removeChild(), replaceChild()methods; nodes and children (Chapter 14). applyElement(elementObject[, type]) Returns:Nothing. Compatibility:WinIE5+, MacIE-, NN-, Moz-, Safari- The applyElement()method enables you to insert a new element as the parent or child of thecurrent object. An important feature of this method is that the new object is wrapped around thecurrent object (if the new element is to become the parent) or the current object s content (if thenew element is to become a child). When the new element becomes a child, all previous childrenare nested further by one generation to become immediate children of the new element. You canimagine how the resulting action of this method affects the containment hierarchy of the currentelement, so you must be careful in how you use the applyElement()method. One parameter, a reference to the object to be applied, is required. This object may be gener- ated from constructions such as document.createElement()or from one of the child ornode methods that returns an object. The second parameter is optional, and it must be one ofthe following values: Parameter ValueDescriptionOutsideNew element becomes the parent of the current objectInsideNew element becomes the immediate child of the current objectIf you omit the second parameter, the default value (outside) is assumed. Listing 15-22shows how the applyElement()method is used both with and without default values. ExampleTo help you visualize the impact of the applyElement()method with its different parametersettings, Listing 15-22 enables you to apply a new element (an emelement) to a spanelementinside a paragraph. At any time, you can view the HTML of the entire pelement to see wherethe emelement is applied as well as its impact on the element containment hierarchy for theparagraph. After you load the page, inspect the HTML for the paragraph before doing anything else. Notice the spanelement and its nested fontelement, both of which surround the one-wordcontent. If you apply the emelement inside the spanelement (click the middle button), thespanelement s first (and only) child element becomes the emelement; the fontelement isnow a child of the new emelement. Listing 15-22: Using the applyElement() Method ContinuedelementObject.applyElement()

268Part IIIDocument Objects ReferenceInvoking the replaceChild()method in the replace()function utilizes some of the samecode. The main difference is that the replaceChild()method requires a second parameter: a reference to the child element to be replaced. This demonstration replaces the final childnode of the ullist, so the function takes advantage of the lastChildproperty of all elementsto get a reference to that final nested child. That reference becomes the second parameter toreplaceChild(). Listing 15-21: Various Child Methods

Child Methods

• First Item
• Second Item

267Chapter 15Generic HTML Element Objects Capture -type click listener:

Related Items:attachEvent(), detachEvent(), dispatchEvent(), fireEvent(), removeEventListener()methods. appendChild(elementObject) Returns:Node object reference. Compatibility:WinIE5+, MacIE5+, NN6+, Moz1+, Safari1+ The appendChild()method inserts an element or text node (defined by other code that comesbefore it) as the new, last child of the current element. Aside from the more obvious applicationof adding a new child element to the end of a sequence of child nodes, the appendChild() method is also practical for building element objects and their content before appending, replac- ing, or inserting the element into an existing document. The document.createElement() method generates a reference to an element of whatever tag name you assign as that method sparameter. The appendChild()method returns a reference to the appended node object. This referencediffers from the object that is passed as the method s parameter because the returned valuerepresents the object as part of the document rather than as a freestanding object in memory. ExampleListing 15-21 contains an example that shows how to use the appendChild()method in con- cert with removeChild()and replaceChild()to modify child elements in a document. Because many W3C DOM browsers treat source code carriage returns as text nodes (and thuschild nodes of their parent), the HTML for the affected elements in Listing 15-21 is shownwithout carriage returns between elements. The append()function creates a new lielement and then uses the appendChild()method toattach the text box text as the displayed text for the item. The nested expression, document. createTextNode(form.input.value), evaluates to a legitimate node that is appended tothe new liitem. All of this occurs before the new liitem is added to the document. In thefinal statement of the function, appendChild()is invoked from the vantage point of the ulelement thus adding the lielement as a child node of the ulelement. elementObject.appendChild()

266Part IIIDocument Objects ReferenceListing 15-20(continued)

W3C Event Model Lab

This paragraph (a SPAN element nested inside a P element) can be set to listen for click events.