325Chapter 15Generic HTML Element Objectsguarantee that a user will complete the cut operation (for example, the context menu may closebefore the user makes a selection). If you add the onbeforecutevent handler to an HTML ele- ment, the context menu usually disables the Cut menu item. But assigning a JavaScript call tothis event handler brings the Cut menu item to life. ExampleYou can use the onbeforecutevent handler to preprocess information prior to an actual cutaction. You can try this by editing a copy of Listing 15-33, changing the onbeforecopyeventhandler to onbeforecut. Notice that in its original form, the example does not activate the Cutitem in either the context or Edit menu when you select some text in the second paragraph. Butby assigning a function to the onbeforecutevent handler, the menu item is active, and theentire paragraph is selected from the function that is invoked. Related Items:onbeforecopy, oncutevent handlers. onbeforedeactivateCompatibility:WinIE5.5+, MacIE-, NN-, Moz-, Safari- (See onactivateevent handler) onbeforeeditfocusCompatibility:WinIE5+, MacIE-, NN-, Moz-, Safari- The onbeforeeditfocusevent handler is triggered whenever you edit an element on a pagein an environment such as Microsoft s DHTML Editing ActiveX control or with the editablepage content feature of IE5.5+. This discussion focuses on the latter scenario because it isentirely within the scope of client-side JavaScript. The onbeforeeditfocusevent fires justbefore the element receives its focus. (There may be no onscreen feedback that editing isturned on unless you script it yourself.) The event fires each time a user clicks the element, even if the element just received edit focus elsewhere in the same element. ExampleUse The Evaluator (Chapter 13) to explore the onbeforeeditfocusin WinIE5.5+. In the fol- lowing sequence, you assign an anonymous function to the onbeforeeditfocusevent han- dler of the myPelement. The function turns the text color of the element to red when theevent handler fires: myP.onbeforeeditfocus = new Function( myP.style.color= red ) Now turn on content editing for the myPelement: myP.contentEditable = trueIf you now click inside the myPelement on the page to edit its content, the text turns to redbefore you begin editing. In a page scripted for this kind of user interface, you would includesome control that turns off editing and changes the color to normal. Related Items:document.designMode, contentEditable, isContentEditableproperties. onbeforepasteCompatibility:WinIE5+, MacIE-, NN-, Moz-, Safari- Like onbeforecopyand onbeforecut, the onbeforepasteevent occurs just prior to the dis- play of either the context or menu bar Edit menu when the current object is selected (or has aselection within it). The primary value of this event comes when you use scripts to control theelementObject.onbeforepaste

324Part IIIDocument Objects ReferenceExampleYou can use the onbeforecopyevent handler to preprocess information prior to an actual copyaction. In Listing 15-33, the function invoked by the second paragraph element s onbeforecopyevent handler selects the entire paragraph so that the user can select any character(s) in theparagraph to copy the entire paragraph into the clipboard. You can paste the results into thetext area to verify the operation. By assigning the paragraph selection to the onbeforecopyevent handler, the page notifies the user about what the copy operation will entail prior to mak- ing the menu choice. Had the operation been deferred to the oncopyevent handler, the selec- tion would have been made after the user chose Copy from the menu. Listing 15-33: The onbeforecopy Event Handler

onbeforecopy Event Handler

Select one or more characters in the following paragraph. Then executea Copy command via Edit or context menu.

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim adminim veniam, quis nostrudexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Related Items:onbeforecut, oncopyevent handlers. onbeforecutCompatibility:WinIE5+, MacIE-, NN-, Moz-, Safari- The onbeforecutevent handler fires before the actual cut action takes place whenever theuser initiates a content cut via the Edit menu (including the Ctrl+X keyboard shortcut) or theright-click context menu. If the user accesses the Cut command via the Edit or context menu, the onbeforecutevent fires before either menu displays. In practice, the event may fire twiceeven though you expect it only once. Just because the onbeforecutevent fires, it does notelementObject.onbeforecopy

323Chapter 15Generic HTML Element ObjectsEvent handlersonactivateonbeforedeactivateondeactivateCompatibility:WinIE5.5+, MacIE-, NN-, Moz-, Safari- The onactivateand ondeactivateevent handlers are very similar to the onfocusandonblurevent handlers, respectively. If an element receives focus, the onactivateevent firesfor that element just before the onfocusevent fires; conversely, just prior to the element los- ing focus, events fire in the sequence onbeforedeactivate, ondeactivate, onblur. Onlyelements that, by their nature, can accept focus (for example, links and form input controls) or that have a tabindexattribute set can become the active element (and therefore fire theseevents). WinIE5.5+ maintains the original onfocusand onblurevent handlers. But because the behav- iors are so close to those of the onactivateand ondeactivateevents, I don t recommendmixing the old and new event handler names in your coding style. If you script exclusively forWinIE5.5+, you can use the new terminology throughout. ExampleYou can modify Listing 15-34 later in this chapter by substituting onactivatefor onfocusand ondeactivatefor onblur. Use The Evaluator (Chapter 13) to experiment with the onbeforedeactivateevent handler. To begin, set the myPelement so it can accept focus: myP.tabIndex = 1If you repeatedly press the Tab key, the myPparagraph will eventually receive focus indicatedby the dotted rectangle around it. To see how you can prevent the element from losing focus, assign an anonymous function to the onbeforedeactivateevent handler, as shown in the fol- lowing statement: myP.onbeforedeactivate = new Function( event.returnValue=false ) Now you can press Tab all you like or click other focusable elements all you like, and themyPelement will not lose focus until you reload the page (which clears away the event han- dler). Please do not do this on your pages unless you want to infuriate and alienate yoursitevisitors. Related Items:onblur, onfocusevent handlers. onbeforecopyCompatibility:WinIE5+, MacIE-, NN-, Moz-, Safari- The onbeforecopyevent handler fires before the actual copy action takes place wheneverthe user initiates a content copy action via the Edit menu (including the Ctrl+C keyboardshortcut) or the right-click context menu. If the user accesses the Copy command via the Editor context menu, the onbeforecopyevent fires before either menu displays. In practice, theevent may fire twice even though you expect it only once. Just because the onbeforecopyevent fires, it does not guarantee that a user will complete the copy operation (for example, the context menu may close before the user makes a selection). Unlike paste-related events, the onbeforecopyevent handler does not work with form inputelements. Just about any other HTML element is fair game, however. elementObject.onbeforecopy

322Part IIIDocument Objects ReferenceThe tags()method does not belong to every element, but it is a method of every collectionof objects (such as all, forms, and elements). The method is best thought of as a kind of fil- ter for the elements that belong to the current collection. For example, to get an array of all pelements inside a document, use this expression: document.all.tags( P ) You must pass a parameter string consisting of the tag name you wish to extract from the col- lection. The tag name is case-insensitive. The return value is an array of references to the objects within the current collection whosetags match the parameter. If there are no matches, the returned array has a length of zero. Ifyou need cross-browser compatibility, use the getElementsByTagName()method describedearlier in this chapter, and pass a wildcard value of * . ExampleUse The Evaluator (Chapter 13) to experiment with the tags()method. Enter the followingstatements one at a time into the upper text box and study the results: document.all.tags( div ) document.all.tags( div ).lengthmyTable.all.tags( td ).lengthBecause the tags()method returns an array of objects, you can use one of those returnedvalues as a valid element reference: document.all.tags( form )[1].elements.tags( input ).lengthRelated Item:getElementsByTagName()method. urns( behaviorURN ) Returns:Array of element objects. Compatibility:WinIE5+, MacIE-, NN-, Moz-, Safari- The urns()method does not belong to every element, but it is a method of every collectionof objects. You must pass a parameter string consisting of the URN (Uniform Resource Name) of a behavior resource (most typically .htc) assigned to one or more elements of the collec- tion. The parameter does not include the extension of the filename. If there is no matchingbehavior URN for the specified parameter, the urns()method returns an array of zero length. This method is related to the behaviorUrnsproperty, which contains an array of behaviorURNs assigned to a single element object. ExampleIn case the urns()method is reconnected in the future, you can add a button and function toListing 15-19b that reveals whether the makeHot.htcbehavior is attached to the myPele- ment. Such a function looks like this: function behaviorAttached() { if (document.all.urns( makeHot )) { alert( There is at least one element set to makeHot . ); } } Related Item:behaviorUrnsproperty. elementObjectCollection.tags()

321Chapter 15Generic HTML Element Objects

getExpression(), setExpression(), recalc() Methods

This clock uses Dynamic Properties to calculate bar width and timenumbers:

Related Items:document.recalc(), removeExpression(), setExpression()methods. swapNode(otherNodeObject) Returns:Nodeobject reference. Compatibility:WinIE5+, MacIE-, NN-, Moz-, Safari- The swapNode()method exchanges the positions of two nodes within an element hierarchy. Contents of both nodes are preserved in their entirety during the exchange. The singleparameter must be a valid node object (perhaps created with document.createElement() or copied from an existing node). A return value is a reference to the object whoseswapNode()method was invoked. ExampleSee Listing 15-31 (the replaceNode()method) for an example of the swapNode()method inaction. Related Items:removeChild(), removeNode(), replaceChild(), replaceNode()methods. tags( tagName ) Returns: Array of element objects. Compatibility:WinIE4+, MacIE4+, NN-, Moz-, Safari- elementObjectCollection.tags()

320Part IIIDocument Objects ReferenceAs the document loads, the three spanelements for the colored bars are given no width, which means that they assume the default width of zero. But after the page loads, the onloadevent handler invokes the init()function, which sets the initial values for each bar s widthand the text (innerHTML) of the three labeled spans. Once these initial values are set, theinit()function invokes the updateClock()function. In the updateClock()function, a new date object is created for the current instant. The document.recalc()method is called, instructing the browser to recalculate the expressionsthat were set in the init()function and assign the new values to the properties. To keep theclock ticking, the setTimeout()method is set to invoke this same updateClock()func- tion in one second. To see what the getExpression()method does, you can click the button on the page. It simplydisplays the returned value for one of the attributes that you assign using setExpression(). Listing 15-32: Dynamic Properties