Java Server Pages, Tomcat, Jsp, J2Ee, Servlets, Struts Blog

213Chapter 15 .Generic HTML Element Objects to fire with mouse movement). The onMouseOutevent handler fires when you move the cursor outside the object s rectangle. These events most commonly display explanatory text about an object in the window s status bar and effect image swapping (so-called mouse rollovers). Use the onMouseOver event handler to change the state to a highlighted version; use the onMouseOut event 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. The onMouseOver event was available only to the link object until the version 4 browsers. Even then, NN4 still restricted this event to link, area, and layer objects. The onMouseOut event handler first surfaced for link and area objects in Navigator 3. IE4+ and NN6+ provide support for these events on every element that occupies space on the screen. IE5.5 includes an additional pair of event handlers onMouseEnter and onMouseLeave that duplicate the onMouseOver and onMouseOut events but with different terminology. The old event handlers fire just before the new versions. The onMouseOut event handler commonly fails to fire if the event is associated with an element that is near a frame or window edge and the user moves the cursor quickly outside of the current frame. Example (with Listing 15-44) on the CD-ROM Related Items: onMouseEnter, onMouseLeave, onMouseMove event handlers. onPaste NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility The onPaste event (not implemented in IE5/Mac) fires immediately after the user or script initiates a paste edit action on the current object. The event is preceded by the onBeforePasteevent, which fires prior to any edit or context menu that appears (or before the paste action if initiated by keyboard shortcut). Use this event handler to provide edit functionality to elements that don t normally allow pasting. In such circumstances, you need to enable the Paste menu item in the context or Edit menu by setting the event.returnValue for the onBeforePaste event handler to false. Then your onPaste event handler must manually retrieve data from the clipboard (by way of the getData()method of the clipboardData object) and handle the insertion into the current object. Because you are in charge of what data is stored in the clipboard, you are not limited to a direct copy of the data. For example, you might wish to store the value of the src property of an image object so that you can paste it elsewhere on the page. On the CD-ROM Note elementObject.onPaste
Note: If you are looking for cheap and reliable webhost to host and run your mysql application check mysql web server services.

212 Part III .Document Objects Reference Example on the CD-ROM Related Items: onMouseOver, onMouseOut event handlers. onMouseMove NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ( ) The onMouseMove event handler fires whenever the cursor is atop the current object and the mouse is moved, even by a single pixel. You do not have to press the mouse button for the event to fire, although the event is most commonly used in element dragging especially in NN, where no onDrag event handler is available. Even though the granularity of this event can be at the pixel level, you should not use the number of event firings as a measurement device. Depending on the speed of cursor motion and the performance of the client computer, the event may not fire at every pixel location. In NN4, you cannot assign the onMouseMoveevent handler to any object by way of tag attributes. But you can use the NN4 event capturing mechanism to instruct (via scripting) a window, document, or layer object to capture mouseMoveevents. This allows for NN4 scripts to produce positioned element (layer) dragging. In IE4+ and NN6+, however, you can assign the onMouseMoveevent handler to any element (although you can drag only with positioned elements). When designing a page that encourages users to drag multiple items on a page, it is most common to assign the onMouseMove event handler to the document object and let all such events bubble up to the document for processing. Example (with Listing 15-43) on the CD-ROM Related Items: onDrag, onMouseDown, onMouseUp event handlers. onMouseOut onMouseOver NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility The onMouseOver event fires for an object whenever the cursor rolls into the rectangular space of the object on the screen (one event per entry into the object except for a bug in NN4/Windows, which causes the onMouseOverevent On the CD-ROM On the CD-ROM elementObject.onMouseOut
From our experience, we can recommend PHP5 Web Hosting services, if you need affordable webhost to host and run your web application.

211Chapter 15 .Generic HTML Element Objects onMouseDown onMouseUp NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility The onMouseDown event handler fires when the user presses any button of a mouse. The onMouseUp event handler fires when the user releases the mouse button, provided the object receiving 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 and then slides the cursor away from the object, only the onMouseDownevent fires. In NN4, these two mouse events were limited to button, radio button, checkbox, link, and areaobjects. These events enable authors and designers to add more application-like behavior to images that act as action or icon buttons. If you notice the way most buttons work, the appearance of the button changes while you press the mouse button and reverts to its original style when you release the mouse button (or you drag the cursor out of the button). These events enable you to emulate that behavior. The event object created with every mouse button action has a property that reveals which mouse button the user pressed. NN4 s event model calls that property the which property. IE4+ and NN6 call it the button property (but with different values for the buttons). It is most reliable to test for the mouse button number on either the onMouseDown or onMouseUpevent, rather than on onClick. The onClick event object does not always contain the button information. Example (with Listing 15-42) on the CD-ROM Related Item: onClick event handler. onMouseEnter onMouseLeave NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility Two event handlers that are new with IE5.5 are onMouseEnterand onMouseLeave. Both event handlers operate just like the onMouseOver and onMouseOut event handlers, respectively. Microsoft simply offers an alternate terminology. The old and new events continue to fire in IE5.5. The old ones fire just before the new ones for each act of moving the cursor atop, and exiting from atop, the object. If you are scripting exclusively for IE5.5+, then you should use the new terminology; otherwise, stay with the older versions. On the CD-ROM elementObject.onMouseEnter
We would like to recommend you tested and proved virtual web hosting services, which you will surely find to be of great quality.

210 Part III .Document Objects Reference By assigning the checkForEnter()function to each field s onKeyPress event handler, you suddenly add some extra power to a typical HTML form. You can intercept Ctrl+keyboard combinations (letters only) in HTML pages most effectively in Internet Explorer, but only if the browser itself does not use the combination. In other words, you cannot redirect Ctrl+key combinations that the browser uses for its own control. The onKeyPress keyCode value for Ctrl+combinations ranges from 1 through 26 for letters A through Z (except for those used by the browser, in which case no keyboard event fires). Example (with Listing 15-41) on the CD-ROM Related Item: String.fromCharCode() method. onLoseCapture NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility The onLoseCapture event handler fires whenever an object that has event capture turned on no longer has that capture. Event capture is automatically disengaged when the user performs 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 window A function associated with the onLoseCapture event handler should perform any cleanup of the environment due to an object no longer capturing mouse events. Example on the CD-ROM Related Items: releaseCapture(), setCapture() methods. On the CD-ROM On the CD-ROM elementObject.onLoseCapture
Go visit our java server pages services for a reliable, lowcost webhost to satisfy all your needs.

209Chapter 15 .Generic HTML Element Objects function (invoked by an onKeyPress event handler) makes sure text entered into a text field is all uppercase, even if you type it as lowercase: function assureUpper() { if (event.charCode >= 97 && event.charCode <= 122) { event.charCode = event.charCode - 32 } } Doing this might confuse (or frustrate) users, so think carefully before implementing such a plan. To prevent a keyboard key press from becoming a typed character in a text field, the onKeyPressevent handler prevents the default action of the event. For example, the following (NN4+, IE4+) HTML page shows how to inspect a text field s entry for numbers only:

Enter any positive integer:

Whenever a user enters a non-number, the user receives a warning and the character is not appended to the text box s text. Keyboard events also enable you to script the submission of a form when a user presses the Enter (Return on the Mac) key within a text box. The ASCII value of the Enter/Return key is 13. Therefore, you can examine each key press in a text box and submit the form whenever value 13 arrives, as shown in the following function, which works in IE4+ and NN4+: function checkForEnter(evt) { evt = (evt) ? evt : event var charCode = (evt.which) ? evt.which : evt.keyCode if (charCode == 13) { document.forms[0].submit() return false } return true } elementObject.onKeyDown
If you are in need for cheap and reliable webhost to host your website, we recommend http web server services.

208 Part III .Document Objects Reference Day: Year: These three events do not fire for all keys of the typical PC keyboard on all browser versions that support keyboard events. The only keys that you can rely on supporting the events in all browsers shown in the preceding compatibility chart are the alphanumeric keys represented by ASCII values. This includes keys such as the spacebar and Enter (Return on the Mac), but it excludes all function keys, arrow keys, and other navigation keys. Modifier keys, such as Shift, Ctrl (PC), Alt (PC), Command (Mac), and Option (Mac), generate some events on their own (depending on browser and version). However, functions invoked by other key events can always inspect the pressed states of these modifier keys. Scripting keyboard events almost always entails examining which key is pressed so that some processing or validation can be performed on that key press. This is where the situation gets very complex if you are writing for cross-browser implementation. In some cases, even writing just for Internet Explorer gets tricky because non-alphanumeric keys generate only the onKeyDown and onKeyUpevents. In fact, to fully comprehend keyboard events, you need to make a distinction between key codes and character codes. Every PC keyboard key has a key code associated with it. This key code is always the same regardless of what other keys you press at the same time. Only the alphanumeric keys (letters, numbers, spacebar, and so on), however, generate character codes. The code represents the typed character produced by that key. The value might change if you press a modifier key. For example, if you type the A key by itself, it generates a lowercase a character (character code 97); if you also hold down the Shift key, that same key produces an uppercase A character (character code 65). The key code for that key (65 for Western language keyboards) remains the same no matter what. That brings us, then, to where these different codes are made available to scripts. In all cases, the code information is conveyed as one or two properties of the browser s event object. IE s event object has only one such property keyCode. It contains key codes for onKeyDown and onKeyUpevents, but character codes for onKeyPressevents. The NN6 event object, on the other hand, contains two separate properties: charCode and keyCode. You can find more details and examples about these event object properties in Chapter 29. The bottom-line script consideration is to use either onKeyDownor onKeyUpevent handlers when you want to look for non-alphanumeric key events (for example, function keys, arrow and page navigation keys, and so on). To process characters as they appear in text boxes, use the onKeyPressevent handler. You can experiment with these events and codes in Listing 15-41 as well as in examples from Chapter 29. Common keyboard event tasks IE4+ (but not NN) enables you to modify the character that a user who is editing a text box enters. The onKeyPressevent handler can modify the event.keyCode property and allow the event to continue (in other words, don t evaluate to return false or set the event.returnValue property to false). The following IE elementObject.onKeyDown
In case you need affordable webhost to host your website, our recommendation is ecommerce web host services.

207Chapter 15 .Generic HTML Element Objects event handler can be associated with individual elements of a document in the Windows version, you can create a context-sensitive help system. However, if the focus is in the Address field of the browser window, you cannot intercept the event. Instead, the browser s Help window appears. Example (with Listing 15-40) on the CD-ROM Related Items: window.showHelp(), window.showModalDialog() methods. onKeyDown onKeyPress onKeyUp NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility When someone presses and releases a keyboard key, a sequence of three events fires in quick succession. The onKeyDown event fires when the key makes its first contact. This is followed immediately by the onKeyPress event. When contact is broken by the key release, the onKeyUpevent fires. If you hold a character key down until it begins auto-repeating, the onKeyDownand onKeyPress events fire with each repetition of the character. The sequence of events can be crucial in some keyboard event handling. Consider the scenario that wants the focus of a series of text fields to advance automatically after the user enters a fixed number of characters (for example, date, month, and two-digit year). By the time the onKeyUp event fires, the character associated with the key press action is already added to the field and you can accurately determine the length of text in the field, as shown in this simple example:

Month: On the CD-ROM elementObject.onKeyDown
Check Tomcat Web Hosting services for best quality webspace to host your web application.

206 Part III .Document Objects Reference the event handler to more form elements, predominantly on the Windows operating system because that OS has a user interface clue (the dotted rectangle) when items such as buttons and links receive focus (so that users may act upon them by pressing the keyboard s spacebar). For IE5, the onFocus event handler is available to virtually every HTML element. For most of those elements, however, you cannot use blur and focus unless you assign a value to the TABINDEXattribute of the element s tag. For example, if you assign TABINDEX=1inside a

tag, the user can bring focus to that paragraph (highlighted with the dotted rectangle in Windows) by clicking the paragraph or pressing the Tab key until that item receives focus in sequence. If you plan to use the onFocus event handler on window or text-oriented input elements, be aware that there might be some unexpected and undesirable consequences of scripting for the event. For example, in IE5 (but not IE4), some object almost always has focus. In most cases, the window has focus but loses it when the user clicks an element wired to receive focus. Clicking anywhere on an unwired element brings focus back to the windowobject. Similarly, the interaction between onBlur, onFocus, and the alert dialog box can be problematic with text input elements. IE5.5 adds the onActivate event handler, which fires immediately before the onFocus event handler. You can use one or the other, but there is little need to include both event handlers for the same object unless you temporarily wish to block an item from receiving focus. To prevent an object from receiving focus in IE5.5, include an event.returnValue=false statement in the onActivate event handler for the same object. In older browsers, you can usually get away with assigning onFocus= this.blur() as an event handler for elements such as form controls. However, this is not a foolproof way to prevent a user from changing a control s setting. Unfortunately, there are few reliable alternatives. Example on the CD-ROM Related Items: onActivate, onBlur, onDeactivate event handlers. onHelp NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility The onHelp event handler fires in Windows whenever an element of the document has focus and the user presses the F1 function key on a Windows PC. As of IE5/Mac, the event fires only on the window (in other words, event handler specified in the tag) and does so via the dedicated Help key on a Mac keyboard. Browser Help menu choices do not activate this event. To prevent the browser s Help window from appearing, the event handler must evaluate to return false (for IE4+) or set the event.returnValue property to false(IE5+). Because the On the CD-ROM elementObject.onHelp
You want to have a cheap webhost for your apache application, then check apache web hosting services.

205Chapter 15 .Generic HTML Element Objects Example on the CD-ROM Related Items: event.dataTransfer object; onDrag, onDragEnd, onDragEnter, onDragLeave, onDragOver, onDragStart event handlers. onFilterChange NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility The onFilterChange event (not implemented in IE5/Mac) fires whenever an object s visual filter switches to a new state or a transition completes (a transition may be extended over time). Only objects that accommodate filters and transitions in IE (primarily block elements and form controls) receive the event. A common usage of the onFilterChange event is to trigger the next transition within a sequence of transition activities. This may include an infinite loop transition, for which the object receiving the event toggles between two transition states. If you don t want to get into a loop of that kind, place the different sets of content into their own positionable elements and use the onFilterChange event handler in one to trigger the transition in the other. Example (with Listing 15-39) on the CD-ROM Related Item: filter object. onFocus NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility The onFocus event fires when an element receives focus, usually following some other object losing focus. (The element losing focus receives the onBlurevent before the current object receives the onFocusevent.) For example, a text input element fires the onFocus event when a user tabs to that element while navigating through a form via the keyboard. Clicking an element also gives that element focus, as does making the browser the frontmost application on the client desktop. The availability of the onFocus event has expanded with succeeding generations of script-capable browsers. In earlier versions, blur and focus were largely confined to text-oriented input elements (including the SELECT element). The window object received the onFocusevent handler starting with NN3 and IE4. IE4 also extended On the CD-ROM On the CD-ROM elementObject.onFocus
We highly recommend you visit web and email hosting services if you need stable and cheap web hosting platform for your web applications.

204 Part III .Document Objects Reference Example on the CD-ROM Related Items: event.dataTransfer object; onDrag, onDragEnd, onDragEnter, onDragLeave, onDragStart, onDrop event handlers. onDragStart NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility The onDragStart event handler is the first event to fire in the long sequence of events that occur in a typical drag-and-drop operation by the user. This event handler is associated with the element that is the source element of the drag operation. Typically, the onDragStart event handler sets the dataTransfer.effectAllowed property in IE5 for Windows, packages the data being passed along with the drag (via the dataTransfer.setData() method), and overrides default behavior by setting the event.returnValueproperty to false. See the discussion of the onDrag event handler earlier in this chapter for more details on the sequence of drag-related events. Example on the CD-ROM Related Items: event.dataTransfer object; onDrag, onDragEnd, onDragEnter, onDragLeave, onDragOver, onDrop event handlers. onDrop NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility The onDrop event (not implemented in IE5/Mac) fires on the drop target element as soon as the user releases the mouse button at the end of a drag-and-drop operation. Microsoft recommends that you denote a drop target by applying the onDragEnter, onDragOver, and onDrop event handlers to the target element. In each of those event handlers, you should set the dataTransfer.dropEffect to the transfer effect you wish to portray in the drag-and-drop operation (signified by a different cursor for each type). These settings should match the dataTransfer. effectAllowed property that is usually set in the onDragStart event handler. Each of the three drop-related handlers should also override the default event behavior by setting the event.returnValue property to false. See the discussion of the onDrag event handler earlier in this chapter for more details on the sequence of drag-related events. On the CD-ROM On the CD-ROM elementObject.onDrop
If you are in need for cheap and reliable webhost to host your website, we recommend http web server services.