CD-232 Part VI ✦ Appendixes onDragEnter onDragLeave NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example Listing 15-38 shows the onDragEnter and onDragLeave event handlers in use. The simple page displays (via the status bar) the time of entry to one element of the page. When the dragged cursor leaves the element, the onDragLeave event handler hides the status bar message. No drop target is defined for this page, so when you drag the item, the cursor remains as the “no drop” cursor. Listing 15-38: Using onDragEnter and onDragLeave Event Handlers <HTML> <HEAD> <TITLE>onDragEnter and onDragLeave Event Handlers</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function showEnter() { status = “Entered at: “ + new Date() event.returnValue = false } function clearMsg() { status = “” event.returnValue = false } </SCRIPT> </HEAD> <BODY> <H1 onDragEnter=”showEnter()” onDragLeave=”clearMsg()”> onDragEnter and onDragLeave Event Handlers </H1> <HR> <P>Select any character(s) from this paragraph, and slowly drag it around the page. When the dragging action enters the large header above, the status bar displays when the onDragEnter event handler fires. When you leave the header, the message is cleared elementObject.onDragEnter CD-233 Appendix F ✦ Examples from Parts III and IV via the onDragLeave event handler.</P> </BODY> </HTML> onDragOver NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example See Listing 15-37 of the onDrag event handler to see how the onDragOver event handler contributes to making an element a drop target. onDragStart NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example See Listing 15-37 of the onDrag event handler to see how to apply the onDragStart event handler in a typical drag-and-drop scenario. onDrop NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example See Listing 15-37 of the onDrag event handler to see how to apply the onDrop event handler in a typical drag-and-drop scenario. elementObject.onDrop CD-234 Part VI ✦ Appendixes onFilterChange NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Listing 15-39 demonstrates how the onFilterChange event handler can trigger a second transition effect after another one completes. The onLoad event handler triggers the first effect. Although the onFilterChange event handler works with most of the same objects in IE4 as IE5, the filter object transition properties are not reflected in a convenient form. The syntax shown in Listing 15-39 uses the new ActiveX filter control found in IE5.5 (described in Chapter 30). Listing 15-39: Using the onFilterChange Event Handler <HTML> <HEAD> <TITLE>onFilterChange Event Handler</TITLE> <SCRIPT LANGUAGE=JavaScript> function init() { image1.filters[0].apply() image2.filters[0].apply() start() } function start() { image1.style.visibility = “hidden” image1.filters[0].play() } function finish() { // verify that first transition is done (optional) if (image1.filters[0].status == 0) { image2.style.visibility = “visible” image2.filters[0].play() } } </SCRIPT> </HEAD> <BODY onLoad=”init()”> <H1>onFilterChange Event Handler</H1> <HR> <P>The completion of the first transition (“circle-in”) elementObject.onFilterChange CD-235 Appendix F ✦ Examples from Parts III and IV triggers the second (“circle-out”). <BUTTON onClick=”location.reload()”>Play It Again</BUTTON></P> <DIV ID=”image1” STYLE=”visibility:visible; position:absolute; top:150px; left:150px; filter:progID:DXImageTransform.Microsoft.Iris(irisstyle=’CIRCLE’, motion=’in’)” onFilterChange=”finish()”><IMG SRC=”desk1.gif” HEIGHT=90 WIDTH=120></DIV> <DIV ID=”image2” STYLE=”visibility:hidden; position:absolute; top:150px; left:150px; filter:progID:DXImageTransform.Microsoft.Iris(irisstyle=’CIRCLE’, motion=’out’)”> <IMG SRC=”desk3.gif” HEIGHT=90 WIDTH=120></DIV> </BODY> </HTML> onFocus NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example See Listing 15-34 earlier in this chapter for an example of the onFocus and onBlur event handlers. onHelp NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Listing 15-40 is a rudimentary example of a context-sensitive help system that dis- plays help messages tailored to the kind of text input required by different text fields. When the user gives focus to either of the text fields, a small legend appears to remind the user that help is available by a press of the F1 help key. IE5/Mac pro- vides only generic help. elementObject.onHelp CD-236 Part VI ✦ Appendixes Listing 15-40: Creating Context-Sensitive Help <HTML> <HEAD> <SCRIPT LANGUAGE=”JavaScript”> function showNameHelp() { alert(“Enter your first and last names.”) event.cancelBubble = true return false } function showYOBHelp() { alert(“Enter the four-digit year of your birth. For example: 1972”) event.cancelBubble = true return false } function showGenericHelp() { alert(“All fields are required.”) event.cancelBubble = true return false } function showLegend() { document.all.legend.style.visibility = “visible” } function hideLegend() { document.all.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.all.legend.style.visibility = “hidden” document.all.legend.innerHTML = msg } </SCRIPT> </HEAD> <BODY onLoad=”init()” onHelp=”return showGenericHelp()”> <H1>onHelp Event Handler</H1> <HR> <P ID=”legend” STYLE=”visibility:hidden; font-size:10px”> </P> <FORM> Name: <INPUT TYPE=”text” NAME=”name” SIZE=30 onFocus=”showLegend()” onBlur=”hideLegend()” onHelp=”return showNameHelp()”> <BR> Year of Birth: <INPUT TYPE=”text” NAME=”YOB” SIZE=30 onFocus=”showLegend()” onBlur=”hideLegend()” elementObject.onHelp CD-237 Appendix F ✦ Examples from Parts III and IV onHelp=”return showYOBHelp()”> </FORM> </BODY> </HTML> onKeyDown onKeyPress onKeyUp NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓✓✓ Example Listing 15-41 is a working laboratory that you can use to better understand the way keyboard event codes and modifier keys work in IE5+ and NN6. The actual code of the listing is less important than watching the page while you use it. For every key or key combination that you press, the page shows the keyCode value for the onKeyDown, onKeyPress, and onKeyUp events. If you hold down one or more modi- fier keys while performing the key press, the modifier key name is highlighted for each of the three events. Note that when run in NN6, the keyCode value is not the character code (which doesn’t show up in this example for NN6). Also, you may need to click the NN6 page for the document object to recognize the keyboard events. The best way to watch what goes on during keyboard events is to press and hold a key to see the key codes for the onKeyDown and onKeyPress events. Then release the key to see the code for the onKeyUp event. Notice, for instance, that if you press the A key without any modifier key, the onKeyDown event key code is 65 (A) but the onKeyPress key code in IE (and the charCode property in NN6 if it were displayed here) is 97 (a). If you then repeat the exercise but hold the Shift key down, all three events generate the 65 (A) key code (and the Shift modifier labels are highlighted). Releasing the Shift key causes the onKeyUp event 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 the onKeyPress event because those keys don’t generate those events. They do, however, generate onKeyDown and onKeyUp events. elementObject.onKeyDown CD-238 Part VI ✦ Appendixes Listing 15-41: Keyboard Event Handler Laboratory <HTML> <HEAD> <TITLE>Keyboard Event Handler Lab</TITLE> <STYLE TYPE=”text/css”> TD {text-align:center} </STYLE> <SCRIPT LANGUAGE=”JavaScript”> function init() { document.onkeydown = showKeyDown document.onkeyup = showKeyUp document.onkeypress = showKeyPress } function showKeyDown(evt) { evt = (evt) ? evt : window.event document.getElementById(“pressKeyCode”).innerHTML = 0 document.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 } elementObject.onKeyDown CD-239 Appendix F ✦ Examples from Parts III and IV 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” } </SCRIPT> </HEAD> <BODY onLoad=”init()”> <H1>Keyboard Event Handler Lab</H1> <HR> <FORM> <TABLE BORDER=2 CELLPADDING=2> <TR><TH></TH><TH>onKeyDown</TH><TH>onKeyPress</TH><TH>onKeyUp</TH></TR> <TR><TH>Key Codes</TH> <TD ID=”downKeyCode”>0</TD> <TD ID=”pressKeyCode”>0</TD> <TD ID=”upKeyCode”>0</TD> </TR> <TR><TH>Char Codes (IE5/Mac; NN6)</TH> <TD ID=”downCharCode”>0</TD> <TD ID=”pressCharCode”>0</TD> <TD ID=”upCharCode”>0</TD> </TR> <TR><TH ROWSPAN=3>Modifier Keys</TH> <TD><SPAN ID=”shiftDown”>Shift</SPAN></TD> <TD><SPAN ID=”shift”>Shift</SPAN></TD> <TD><SPAN ID=”shiftUp”>Shift</SPAN></TD> </TR> <TR> <TD><SPAN ID=”ctrlDown”>Ctrl</SPAN></TD> <TD><SPAN ID=”ctrl”>Ctrl</SPAN></TD> <TD><SPAN ID=”ctrlUp”>Ctrl</SPAN></TD> </TR> <TR> <TD><SPAN ID=”altDown”>Alt</SPAN></TD> <TD><SPAN ID=”alt”>Alt</SPAN></TD> <TD><SPAN ID=”altUp”>Alt</SPAN></TD> Continued elementObject.onKeyDown CD-240 Part VI ✦ Appendixes Listing 15-41 (continued) </TR> </TABLE> </FORM> </BODY> </HTML> Spend some time with this lab, and try all kinds of keys and key combinations until you understand the way the events and key codes work. onLoseCapture NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example See Listing 15-30 earlier in this chapter for an example of how to use onLoseCapture with an event-capturing scenario for displaying a context menu. The onLoseCapture event handler hides the context menu when the user performs any action that causes the menu to lose mouse capture. onMouseDown onMouseUp NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓✓✓ Example To demonstrate a likely scenario of changing button images in response to rolling atop an image, 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). Because the image object is not part of the document object model for NN2 or IE3 (which reports itself as Navigator version 2), the page is designed to accept all browsers. Only those browsers that support precached elementObject.onMouseDown CD-241 Appendix F ✦ Examples from Parts III and IV images and image swapping (and thus pass the test for the presence of the document.images array) 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 is instantaneous the first time the user calls upon new versions of the images. Listing 15-42: Using onMouseDown and onMouseUp Event Handlers <HTML> <HEAD> <TITLE>onMouseDown and onMouseUp Event Handlers</TITLE> <SCRIPT LANGUAGE=”JavaScript”> if (document.images) { var RightNormImg = new Image(16,16) var RightUpImg = new Image(16,16) var RightDownImg = new Image(16,16) var LeftNormImg = new Image(16,16) var LeftUpImg = new Image(16,16) var LeftDownImg = new Image(16,16) RightNormImg.src = “RightNorm.gif” RightUpImg.src = “RightUp.gif” RightDownImg.src = “RightDown.gif” LeftNormImg.src = “LeftNorm.gif” LeftUpImg.src = “LeftUp.gif” LeftDownImg.src = “LeftDown.gif” } function setImage(imgName, type) { if (document.images) { var imgFile = eval(imgName + type + “Img.src”) document.images[imgName].src = imgFile return false } } </SCRIPT> </HEAD> <BODY> <H1>onMouseDown and onMouseUp Event Handlers</H1> <HR> <P>Roll atop and click on the buttons to see how the link event handlers swap images:</P> <CENTER> <A HREF=”javascript:void(0)” onMouseOver=”return setImage(‘Left’,’Up’)” onMouseDown=”return setImage(‘Left’,’Down’)” Continued elementObject.onMouseDown . generic help. elementObject.onHelp CD-236 Part VI ✦ Appendixes Listing 15-40: Creating Context-Sensitive Help <HTML> <HEAD> <SCRIPT LANGUAGE= JavaScript > function showNameHelp(). Event Handlers <HTML> <HEAD> <TITLE>onDragEnter and onDragLeave Event Handlers</TITLE> <SCRIPT LANGUAGE= JavaScript > function showEnter() { status = “Entered at: “ + new Date() event.returnValue =. the header, the message is cleared elementObject.onDragEnter CD-233 Appendix F ✦ Examples from Parts III and IV via the onDragLeave event handler.</P> </BODY> </HTML> onDragOver NN2