353Chapter 15Generic HTML Element Objectsonmouseover= return setStatus( View dictionary definition ) onmouseout= return setStatus( ) >allegiance to the flag of the United States of America, and tothe Republic for which it stands, one nation under God, indivisible, withliberty and justice for all. Related Items:onmouseenter, onmouseleave, onmousemoveevent handlers. onpasteCompatibility:WinIE5+, MacIE-, NN-, Moz-, Safari- The onpasteevent fires immediately after the user or script initiates a paste edit action onthe current object. The event is preceded by the onbeforepasteevent, which fires prior toany edit or context menu that appears (or before the paste action if initiated by keyboardshortcut). Use this event handler to provide edit functionality to elements that don t normally allowpasting. In such circumstances, you need to enable the Paste menu item in the context or Editmenu by setting the event.returnValuefor the onbeforepasteevent handler to false. Then your onpasteevent handler must manually retrieve data from the clipboard (by way ofthe getData()method of the clipboardDataobject) and handle the insertion into the cur- rent object. Because you are in charge of what data is stored in the clipboard, you are not limited to adirect copy of the data. For example, you might wish to store the value of the srcproperty ofan image object so that you can paste it elsewhere on the page. ExampleListing 15-44 demonstrates how to use the onbeforepasteand onpasteevent handlers (in conjunction with onbeforecopyand oncopy) to let scripts control the data-transfer process during a copy-and-paste user operation. A table contains words to be copied (onecolumn of nouns, one column of adjectives) and then pasted into blanks in a paragraph. Theonbeforecopyand oncopyevent handlers are assigned to the tableelement because theevents from the tdelements bubble up to the tablecontainer and there is less HTML codeto contend with. Inside the paragraph, two spanelements contain underscored blanks. To paste text into theblanks, the user must first select at least one character of the blanks. (See Listing 15-37, which gives a drag-and-drop version of this application.) The onbeforepasteevent handlerin the paragraph (which gets the event as it bubbles up from either span) sets the event. returnValueproperty to false, thus allowing the Paste item to appear in the context andEdit menus (not a normal occurrence in HTML body content). elementObject.onpaste

352Part IIIDocument Objects ReferenceonmouseoutonmouseoverCompatibility:WinIE3+, MacIE3+, NN2+, Moz1+, Safari1+ The onmouseoverevent fires for an object whenever the cursor rolls into the rectangularspace of the object on the screen. The onmouseoutevent handler fires when you move thecursor outside the object s rectangle. These events most commonly display explanatory textabout an object in the window s status bar and effect image swapping (so-called mouserollovers). Use the onmouseoverevent handler to change the state to a highlighted version; use the onmouseoutevent handler to restore the image or status bar to its normal setting. While these two events have been in object models of scriptable browsers since the beginning, they were not available to most objects in earlier browsers. IE4+ and W3C DOM-compatiblebrowsers provide support for these events on every element that occupies space on the screen. IE5.5+ includes an additional pair of event handlers onmouseenterand onmouseleave thatduplicate the onmouseoverand onmouseoutevents but with different terminology. The oldevent handlers fire just before the new versions. The onmouseoutevent handler commonly fails to fire if the event is associated with an ele- ment that is near a frame or window edge and the user moves the cursor quickly outside ofthe current frame. ExampleListing 15-43 uses the U.S. Pledge of Allegiance with four links to demonstrate how to use theonmouseoverand onmouseoutevent handlers. Notice that for each link, the handler runs ageneral-purpose function that sets the window s status message. The function returns a truevalue, which the event handler call evaluates to replicate the required returntruestate- ment needed for setting the status bar. In one status message, I supply a URL in parenthesesto let you evaluate how helpful you think it is for users. Listing 15-43: Using onmouseover and onmouseout Event Handlers

onmouseover and onmouseout Event Handlers

Pledge of Allegiance

351Chapter 15Generic HTML Element ObjectsIE4+ and W3C browsers simplify the implementation of this kind of three-state image buttonby allowing you to assign the event handlers directly to imgelement objects. Wrappingimages inside links is a backward-compatibility approach that allows older browsers torespond to clicks on images for navigation or other scripting tasks. Related Item:onclickevent handler. onmouseenteronmouseleaveCompatibility:WinIE5.5+, MacIE-, NN-, Moz-, Safari- WinIE5.5 introduced the onmouseenterand onmouseleaveevent handlers. Both event han- dlers operate just like the onmouseoverand onmouseoutevent handlers, respectively. Microsoft simply offers an alternate terminology. The old and new events continue to fire inIE5.5+. The old ones fire just before the new ones for each act of moving the cursor atop, andexiting from atop, the object. If you are scripting exclusively for IE5.5+, you should use thenew terminology; otherwise, stay with the older versions. ExampleYou can modify Listing 15-43 with the IE5.5 syntax by substituting onmouseenterforonmouseoverand onmouseleavefor onmouseout. The effect is the same. Related Items:onmouseover, onmouseoutevent handlers. onmousemoveCompatibility:WinIE4+, MacIE4+, NN4+, Moz1+, Safari1+ The onmousemoveevent handler fires whenever the cursor is atop the current object and themouse is moved, even by a single pixel. You do not have to press the mouse button for theevent to fire, although the event is most commonly used in element dragging especially inNN/Mozilla, where no ondragevent handler is available. Even though the granularity of this event can be at the pixel level, you should not use thenumber of event firings as a measurement device. Depending on the speed of cursormotion and the performance of the client computer, the event may not fire at every pixellocation. In NN4, you cannot assign the onmousemoveevent handler to any object by way of tagattributes. But you can use the NN4 event capturing mechanism to instruct (via scripting) a window, document, or layerobject to capture mouseMoveevents. This allows for NN4scripts to produce positioned element (layer) dragging. In IE4+ and W3C DOM-compatiblebrowsers, however, you can assign the onmousemoveevent handler to any element(although you can drag only with positioned elements). When designing a page thatencourages users to drag multiple items on a page, it is most common to assign theonmousemoveevent handler to the documentobject and let all such events bubble up tothe document for processing. ExampleSee Chapters 39 and 56 on the CD-ROM for examples of using mouse events to control ele- ment dragging on a page. Related Items:ondrag, onmousedown, onmouseupevent handlers. elementObject.onmousemove

350Part IIIDocument Objects Referencedocument.imagesarray) can execute those statements. For a browser with an image object, images are preloaded into the browser cache as the page loads so that response to the user isinstantaneous the first time the user calls upon new versions of the images. Listing 15-42: Using onmousedown and onmouseup Event Handlers

onmousedown and onmouseup Event Handlers

Roll atop and click on the buttons to see how the link event handlersswap images:

  

349Chapter 15Generic HTML Element ObjectsThe onlosecaptureevent handler fires whenever an object that has event capture turned onno longer has that capture. Event capture is automatically disengaged when the user per- forms any of the following actions: .Gives focus to any other window .Displays any system modal dialog box (for example, alert window) .Scrolls the page .Opens a browser context menu (right-clicking) .Tabs to give focus to the Address field in the browser windowA function associated with the onlosecaptureevent handler should perform any cleanup ofthe environment due to an object no longer capturing mouse events. ExampleSee Listing 15-30 earlier in this chapter for an example of how to use onlosecapturewith anevent-capturing scenario for displaying a context menu. The onlosecaptureevent handlerhides the context menu when the user performs any action that causes the menu to losemouse capture. Related Items:releaseCapture(), setCapture()methods. onmousedownonmouseupCompatibility:WinIE4+, MacIE4+, NN4+, Moz1+, Safari1+ The onmousedownevent handler fires when the user presses any button of a mouse. Theonmouseupevent handler fires when the user releases the mouse button, provided the objectreceiving the event also received an onmousedownevent. When a user performs a typical click of the mouse button atop an object, mouse events occur in the following sequence: onmousedown, onmouseup, onclick. But if the user presses the mouse atop an object andthen slides the cursor away from the object, only the onmousedownevent fires. These events enable authors and designers to add more application-like behavior to imagesthat act as action or icon buttons. If you notice the way most buttons work, the appearance ofthe button changes while you press the mouse button and reverts to its original style whenyou release the mouse button (or you drag the cursor out of the button). These events enableyou to emulate that behavior. The event object created with every mouse button action has a property that reveals whichmouse button the user pressed. NN4 s event model calls that property the whichproperty. IE4+ and NN6+/Moz1+ call it the buttonproperty (but with different values for the buttons). It ismost reliable to test for the mouse button number on either the onmousedownor onmouseupevent, rather than on onclick. The onclickevent object does not always contain the buttoninformation. ExampleTo demonstrate a likely scenario of changing button images in response to rolling atop animage, pressing down on it, releasing the mouse button, and rolling away from the image, Listing 15-42 presents a pair of small navigation buttons (left- and right-arrow buttons). Becausethe image object is not part of the document object model for NN2 or IE3 (which reports itselfas Navigator version 2), the page is designed to accept all browsers. Only those browsers thatsupport precached images and image swapping (and thus pass the test for the presence of theelementObject.onmousedown