JavaScript Bible, Gold Edition part 175 pptx

onDragEnter onDragLeave NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Example Listing 15-38 shows the onDragEnterand onDragLeaveevent handlers in use.. Listing 15-38: Using onDragEnter and

Trang 1

onDragEnter onDragLeave

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

Example

Listing 15-38 shows the onDragEnterand onDragLeaveevent 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 onDragLeaveevent 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>

function showEnter() { status = “Entered at: “ + new Date() event.returnValue = false

} function clearMsg() { status = “”

event.returnValue = false }

</SCRIPT>

</HEAD>

<BODY>

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

Trang 2

via the onDragLeave event handler.</P>

</BODY>

</HTML>

onDragOver

Example

See Listing 15-37 of the onDragevent handler to see how the onDragOverevent

handler contributes to making an element a drop target.

onDragStart

Example

See Listing 15-37 of the onDragevent handler to see how to apply the onDragStart

event handler in a typical drag-and-drop scenario.

onDrop

Example

See Listing 15-37 of the onDragevent handler to see how to apply the onDropevent

handler in a typical drag-and-drop scenario.

elementObject.onDrop

Trang 3

Example

Listing 15-39 demonstrates how the onFilterChangeevent handler can trigger a second transition effect after another one completes The onLoadevent handler triggers the first effect Although the onFilterChangeevent 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>

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>

<H1>onFilterChange Event Handler</H1>

<HR>

<P>The completion of the first transition (“circle-in”)

elementObject.onFilterChange

Trang 4

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’)”>

</BODY>

</HTML>

onFocus

Example

See Listing 15-34 earlier in this chapter for an example of the onFocusand onBlur

event handlers.

onHelp

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

Trang 5

Listing 15-40: Creating Context-Sensitive Help

<HTML>

<HEAD>

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>

<H1>onHelp Event Handler</H1>

<HR>

<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

Trang 6

onHelp=”return showYOBHelp()”>

</FORM>

</BODY>

</HTML>

onKeyDown

onKeyPress

onKeyUp

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 keyCodevalue for the

onKeyDown, onKeyPress, and onKeyUpevents If you hold down one or more

modi-fier keys while performing the key press, the modimodi-fier key name is highlighted for

each of the three events Note that when run in NN6, the keyCodevalue 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 documentobject 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 onKeyDownand onKeyPressevents Then release

the key to see the code for 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 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 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

the onKeyPressevent because those keys don’t generate those events They do,

however, generate onKeyDownand onKeyUpevents.

elementObject.onKeyDown

Trang 7

Listing 15-41: Keyboard Event Handler Laboratory

<HTML>

<HEAD>

<TITLE>Keyboard Event Handler Lab</TITLE>

TD {text-align:center}

</STYLE>

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

}

Trang 8

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>

<H1>Keyboard Event Handler Lab</H1>

<HR>

<FORM>

<TR><TH></TH><TH>onKeyDown</TH><TH>onKeyPress</TH><TH>onKeyUp</TH></TR>

<TR><TH>Key Codes</TH>

</TR>

<TR><TH>Char Codes (IE5/Mac; NN6)</TH>

</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>

</TR>

<TR>

Continued

Trang 9

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

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

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

Trang 10

images and image swapping (and thus pass the test for the presence of the

document.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 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>

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>

<A HREF=”javascript:void(0)”

onMouseOver=”return setImage(‘Left’,’Up’)”

onMouseDown=”return setImage(‘Left’,’Down’)”

Continued

elementObject.onMouseDown

Định dạng
Số trang	10
Dung lượng	87,3 KB