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

348Part IIIDocument Objects ReferenceListing 15-41(continued)

Keyboard Event Handler Lab

Spend some time with this lab, and try all kinds of keys and key combinations until youunderstand the way the events and key codes work. Related Item:String.fromCharCode()method. onlosecaptureCompatibility:WinIE5+, MacIE-, NN-, Moz-, Safari- elementObject.onkeydown

347Chapter 15Generic HTML Element Objectsdocument.getElementById( upKeyCode ).innerHTML = 0; document.getElementById( pressCharCode ).innerHTML = 0; document.getElementById( upCharCode ).innerHTML = 0; restoreModifiers( ); restoreModifiers( Down ); restoreModifiers( Up ); document.getElementById( downKeyCode ).innerHTML = evt.keyCode; if (evt.charCode) { document.getElementById( downCharCode ).innerHTML = evt.charCode; } showModifiers( Down , evt); } function showKeyUp(evt) { evt = (evt) ? evt : window.event; document.getElementById( upKeyCode ).innerHTML = evt.keyCode; if (evt.charCode) { document.getElementById( upCharCode ).innerHTML = evt.charCode; } showModifiers( Up , evt); return false; } function showKeyPress(evt) { evt = (evt) ? evt : window.event; document.getElementById( pressKeyCode ).innerHTML = evt.keyCode; if (evt.charCode) { document.getElementById( pressCharCode ).innerHTML = evt.charCode; } showModifiers( , evt); return false; } function showModifiers(ext, evt) { restoreModifiers(ext); if (evt.shiftKey) { document.getElementById( shift + ext).style.backgroundColor = #ff0000 ; } if (evt.ctrlKey) { document.getElementById( ctrl + ext).style.backgroundColor = #00ff00 ; } if (evt.altKey) { document.getElementById( alt + ext).style.backgroundColor = #0000ff ; } } function restoreModifiers(ext) { document.getElementById( shift + ext).style.backgroundColor = #ffffff ; document.getElementById( ctrl + ext).style.backgroundColor = #ffffff ; document.getElementById( alt + ext).style.backgroundColor = #ffffff ; } ContinuedelementObject.onkeydown

346Part IIIDocument Objects Reference} return true; } By assigning the checkForEnter()function to each field s onkeypressevent handler, yousuddenly add some extra power to a typical HTML form. You can intercept Ctrl+keyboard combinations (letters only) in HTML pages most effectivelyin Internet Explorer, but only if the browser itself does not use the combination. In otherwords, you cannot redirect Ctrl+key combinations that the browser uses for its own control. The onkeypresskeyCodevalue for Ctrl+combinations ranges from 1 through 26 for letters Athrough Z (except for those used by the browser, in which case no keyboard event fires). ExampleListing 15-41 is a working laboratory that you can use to better understand the way keyboardevent codes and modifier keys work in IE5+ and W3C browsers. The actual code of the listingis less important than watching the page while you use it. For every key or key combinationthat you press, the page shows the keyCodevalue for the onkeydown, onkeypress, andonkeyupevents. If you hold down one or more modifier keys while performing the key press, the modifier key name is highlighted for each of the three events. Note that when run inNN6+, the keyCodevalue is not the character code (which doesn t show up in this examplefor NN6+). Also, you may need to click the NN6+ page for the documentobject to recognizethe keyboard events. The best way to watch what goes on during keyboard events is to press and hold a key to seethe key codes for the onkeydownand onkeypressevents. Then release the key to see the codefor the onkeyupevent. Notice, for instance, that if you press the A key without any modifier key, the onkeydownevent key code is 65 (A) but the onkeypresskey code in IE (and the charCodeproperty in NN6+) is 97 (a). If you then repeat the exercise but hold the Shift key down, all threeevents generate the 65 (A) key code (and the Shift modifier labels are highlighted). Releasingthe Shift key causes the onkeyupevent to show the key code for the Shift key. In another experiment, press any of the four arrow keys. No key code is passed for theonkeypressevent because those keys don t generate those events. They do, however, gener- ate onkeydownand onkeyupevents. Listing 15-41: Keyboard Event Handler Laboratory

Whenever a user enters a non-number, the user receives a warning and the character is notappended to the text box s text. Keyboard events also enable you to script the submission of a form when a user presses theEnter (Return on the Mac) key within a text box. The ASCII value of the Enter/Return key is13. Therefore, you can examine each key press in a text box and submit the form whenevervalue 13 arrives, as shown in the following function: function checkForEnter(evt) { evt = (evt) ? evt : event; var charCode = (evt.charCode) ? evt.charCode : (( evt.which) ? evt.which : evt.keyCode); if (charCode == 13) { document.forms[0].submit(); return false; elementObject.onkeydown

344Part IIIDocument Objects Reference}

These three events do not fire for all keys of the typical PC keyboard on all browser versionsthat support keyboard events. The only keys that you can rely on supporting the events in allbrowsers shown in the preceding compatibility chart are the alphanumeric keys representedby ASCII values. This includes keys such as the spacebar and Enter (Return on the Mac), butit excludes all function keys, arrow keys, and other navigation keys. Modifier keys, such asShift, Ctrl (PC), Alt (PC), Command (Mac), and Option (Mac), generate some events on theirown (depending on browser and version). However, functions invoked by other key eventscan always inspect the pressed states of these modifier keys. The onkeydownevent handler works in Mozilla-based browsers only starting with Mozilla1.4 (and Netscape 7.1). Scripting keyboard events almost always entails examining which key is pressed so that someprocessing or validation can be performed on that key press. This is where the situation getsvery complex if you are writing for cross-browser implementation. In some cases, even writ- ing just for Internet Explorer gets tricky because non-alphanumeric keys generate only theonkeydownand onkeyupevents. In fact, to fully comprehend keyboard events, you need to make a distinction between key codesand character codes. Every PC keyboard key has a key code associated with it. This key code isalways the same regardless of what other keys you press at the same time. Only the alpha- numeric keys (letters, numbers, spacebar, and so on), however, generate character codes. Thecode represents the typed character produced by that key. The value might change if you pressa modifier key. For example, if you type the A key by itself, it generates a lowercase a char- acter (character code 97); if you also hold down the Shift key, that same key produces an upper- case A character (character code 65). The key code for that key (65 for Western languagekeyboards) 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 eventobject. IE seventobject has only one such property keyCode. It contains key codes for onkeydownandonkeyupevents, but character codes for onkeypressevents. The NN6/Moz1 event object, onthe other hand, contains two separate properties: charCodeand keyCode. You can find moredetails and examples about these eventobject properties in Chapter 25. The bottom-line script consideration is to use either onkeydownor onkeyupevent handlerswhen you want to look for non-alphanumeric key events (for example, function keys, arrowand page navigation keys, and so on). To process characters as they appear in text boxes, usethe onkeypressevent handler. You can experiment with these events and codes in Listing15-41 as well as in examples from Chapter 25. CautionelementObject.onkeydown

343Chapter 15Generic HTML Element Objectsdocument.getElementById( legend ).style.visibility = hidden ; } function init() { var msg = ; if (navigator.userAgent.indexOf( Mac ) != -1) { msg = Press help key for help. ; } else if (navigator.userAgent.indexOf( Win ) != -1) { msg = Press F1 for help. ; } document.getElementById( legend ).style.visibility = hidden ; document.getElementById( legend ).innerHTML = msg; }

onhelp Event Handler

Related Items:window.showHelp(), window.showModalDialog()methods. onkeydownonkeypressonkeyupCompatibility:WinIE4+, MacIE4+, NN4+, Moz1+, Safari1+ When someone presses and releases a keyboard key, a sequence of three events fires in quicksuccession. The onkeydownevent fires when the key makes its first contact. This is followedimmediately by the onkeypressevent. When contact is broken by the key release, the onkeyupevent fires. If you hold a character key down until it begins auto-repeating, the onkeydownandonkeypressevents fire with each repetition of the character. The sequence of events can be crucial in some keyboard event handling. Consider the sce- nario that wants the focus of a series of text fields to advance automatically after the userenters a fixed number of characters (for example, date, month, and two-digit year). By thetime the onkeyupevent fires, the character associated with the key press action is alreadyadded to the field and you can accurately determine the length of text in the field, as shownin this simple example:

onfilterchange Event Handler

The completion of the first transition ( circle-in ) triggers thesecond ( circle-out ). Play ItAgain

Related Item:filterobject. onfocusCompatibility:WinIE3+, MacIE3+, NN2+, Moz1+, Safari1+ The onfocusevent fires when an element receives focus, usually following some other objectlosing focus. (The element losing focus receives the onblurevent before the current objectreceives the onfocusevent.) For example, a text input element fires the onfocusevent whena user tabs to that element while navigating through a form via the keyboard. Clicking an ele- ment also gives that element focus, as does making the browser the frontmost application onthe client desktop. The availability of the onfocusevent has expanded with succeeding generations of script- capable browsers. In earlier versions, blur and focus were largely confined to text-orientedinput elements such as the selectelement. The windowobject received the onfocuseventhandler starting with NN3 and IE4. IE4 also extended the event handler to more form ele- ments, predominantly on the Windows operating system because that OS has a user interfaceclue (the dotted rectangle) when items such as buttons and links receive focus (so that usersmay act upon them by pressing the keyboard s spacebar). For IE5+, the onfocusevent han- dler 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= 1 inside a

tag, the user can bringfocus to that paragraph (highlighted with the dotted rectangle in Windows) by clicking theparagraph or pressing the Tab key until that item receives focus in sequence. WinIE5.5 adds the onactivateevent handler, which fires immediately before the onfocusevent handler. You can use one or the other, but there is little need to include both event han- dlers for the same object unless you temporarily wish to block an item from receiving focus. Toprevent an object from receiving focus in IE5.5+, include an event.returnValue=falsestate- ment in the onactivateevent handler for the same object. In other browsers, you can usuallyget away with assigning onfocus= this.blur() as an event handler for elements such aselementObject.onfocus