JavaScript Bible, Gold Edition part 176 pdf

Listing 15-42 continuedonMouseUp=”return setImage‘Left’,’Up’” onMouseOut=”return setImage‘Left’,’Norm’” > IE4+ and NN6+ simplify the implementation of this kind of thr

Trang 1

Listing 15-42 (continued)

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

onMouseOut=”return setImage(‘Left’,’Norm’)”

>

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

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

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

onMouseUp=”return setImage(‘Right’,’Up’)”

onMouseOut=”return setImage(‘Right’,’Norm’)”

>

</CENTER>

</BODY>

</HTML>

IE4+ and NN6+ simplify the implementation of this kind of three-state image button

by allowing you to assign the event handlers directly to IMG element objects Wrapping images inside links is a backward compatibility approach that allows older browsers to respond to clicks on images for navigation or other scripting tasks.

onMouseEnter onMouseLeave

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

Example

You can modify Listing 15-43 with the IE5.5 syntax by substituting onMouseEnter

for onMouseOverand onMouseLeavefor onMouseOut The effect is the same.

onMouseMove

elementObject.onMouseMove

Trang 2

Listing 15-43 is a simplified example of dragging elements in IE4+ (See Chapter 31

for more dragging examples.) Three images are individually positioned on the page.

Most of the scripting code concerns itself with the geography of click locations, the

stacking order of the images, and the management of the onMouseMoveevent

han-dler so that it is active only when an item is dragged.

Scripts assign the onMouseDownand onMouseUpevent handlers to the document

object, invoking the engage()and release()functions, respectively When a user

mouses down anywhere in the document, the engage()function starts by invoking

setSelectedObj() This function examines the target of the mouseDownevent If it

is one of the map images, the selectedObjglobal variable is set to the image

object and the element is brought to the front of the stacking order of images (any

previously stacked image is returned to its normal position in the stack).

MouseDownevents on any other element simply make sure that the selectedObj

variable is null The presence of a value assigned to selectedObjserves as a kind

of switch for other functions: When the variable contains a value, it means that the

user is doing something associated with dragging an element.

Back at the engage()function — provided the user mouses down on one of the

drag-gable images — the onMouseMoveevent handler is assigned to the documentobject,

setting it to invoke the dragIt()function For the sake of users, the offset of the

mouse down event from the top-left corner of the image is preserved in the offsetX

and offsetYvariables (minus any scrolling that the body is subject to at that instant).

These offset values are necessary to let the scripts set the location of the image during

dragging (the location is set for the top-left corner of the image) while keeping the

cur-sor in the same location within the image as when the user first presses the mouse.

As the user drags the image, the onMouseDownevent handler fires repeatedly,

allow-ing the dragIt()function to continually update the location of the element relative

to the current cursor position (the event.clientXand event.clientYproperties).

The global offset variables are subtracted from the cursor position to preserve the

relation of the image’s top-left corner to the initial cursor position at mouse down.

Upon the user releasing the mouse button, the release()function turns off the

onMouseMoveevent handler (setting it to null) This prevents the event from being

processed at all during normal usage of the page The selectedObjglobal variable

is also set to null, turning off the “switch” that indicates dragging is in session

Listing 15-43: Dragging Elements with onMouseMove

<HTML>

<HEAD><TITLE>onMouseMove Event Handler</TITLE>

Continued

Trang 3

#camap {position:absolute; left:20; top:120}

#ormap {position:absolute; left:80; top:120}

#wamap {position:absolute; left:140; top:120}

</STYLE>

// global variables used while dragging var offsetX = 0

var offsetY = 0 var selectedObj var frontObj // set document-level event handlers document.onmousedown = engage document.onmouseup = release // positioning an object at a specific pixel coordinate function shiftTo(obj, x, y) {

obj.style.pixelLeft = x obj.style.pixelTop = y }

// setting the z-order of an object function bringToFront(obj) {

if (frontObj) { frontObj.style.zIndex = 0 }

frontObj = obj frontObj.style.zIndex = 1 }

// set global var to a reference to dragged element function setSelectedObj() {

var imgObj = window.event.srcElement

if (imgObj.id.indexOf(“map”) == 2) { selectedObj = imgObj

bringToFront(selectedObj) return

} selectedObj = null return

} // do the dragging (called repeatedly by onMouseMove) function dragIt() {

if (selectedObj) {

Trang 4

shiftTo(selectedObj, (event.clientX offsetX), (event.clientY

-offsetY))

return false

}

// set global vars and turn on mousemove trapping (called by onMouseDown)

function engage() {

setSelectedObj()

if (selectedObj) {

document.onmousemove = dragIt

offsetX = window.event.offsetX - document.body.scrollLeft

offsetY = window.event.offsetY - document.body.scrollTop

}

// restore everything as before (called by onMouseUp)

function release() {

if (selectedObj) {

document.onmousemove = null

selectedObj = null

}

</SCRIPT>

</HEAD>

<BODY>

<H1>onMouseMove Event Handler</H1>

<HR>

Click and drag the images:

</SCRIPT>

</BODY>

</HTML>

onMouseOut

onMouseOver

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

elementObject.onMouseOut

Trang 5

Listing 15-44 uses the U.S Pledge of Allegiance with four links to demonstrate how

to use the onMouseOverand onMouseOutevent handlers Notice that for each link, the handler runs a general-purpose function that sets the window’s status message The function returns a truevalue, which the event handler call evaluates to repli-cate the required return truestatement needed for setting the status bar In one status message, I supply a URL in parentheses to let you evaluate how helpful you think it is for users.

Listing 15-44: Using onMouseOver and onMouseOut Event

Handlers

<HTML>

<HEAD>

<TITLE>onMouseOver and onMouseOut Event Handlers</TITLE>

function setStatus(msg) { status = msg

return true }

// destination of all link HREFs function emulate() {

alert(“Not going there in this demo.”) }

</SCRIPT>

</HEAD>

<BODY>

<H1>onMouseOver and onMouseOut Event Handlers

</H1>

<HR>

<H1>Pledge of Allegiance</H1>

<HR>

I pledge <A HREF=”javascript:emulate()” onMouseOver=”return setStatus(‘View dictionary definition’)” onMouseOut=”return setStatus(‘’)”>allegiance</A> to the

of the <A HREF=”javascript:emulate()” onMouseOver=”return setStatus(‘View info about the U.S government’)” onMouseOut=”return setStatus(‘’)”>United States of America</A>, and to the Republic for which it stands, one nation <A

HREF=”javascript:emulate()” onMouseOver=”return setStatus(‘Read about the history of this phrase in the Pledge’)” onMouseOut=”return setStatus(‘’)”>under God</A>, indivisible, with liberty and justice for all

</BODY>

</HTML>

elementObject.onMouseOut

Trang 6

Example

Listing 15-45 demonstrates how to use the onBeforePasteand onPasteevent

han-dlers (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 (one column of nouns, one column of adjectives) and then

pasted into blanks in a paragraph The onBeforeCopyand onCopyevent handlers

are assigned to the TABLE element because the events from the TD elements

bub-ble up to the TABLE container and there is less HTML code to contend with.

Inside the paragraph, two SPAN elements contain underscored blanks To paste text

into the blanks, 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 handler in the paragraph (which gets the event as it bubbles

up from either SPAN) sets the event.returnValueproperty to false, thus

allow-ing the Paste item to appear in the context and Edit menus (not a normal

occur-rence in HTML body content).

At paste time, the innerHTMLproperty of the target SPAN is set to the text data

stored in the clipboard The event.returnValueproperty is set to falsehere, as

well, to prevent normal system pasting from interfering with the controlled version

Listing 15-45: Using onBeforePaste and onPaste Event

Handlers

<HTML>

<HEAD>

<TITLE>onBeforePaste and onPaste Event Handlers</TITLE>

TD {text-align:center}

TH {text-decoration:underline}

.blanks {text-decoration:underline}

</STYLE>

Continued

elementObject.onPaste

Trang 7

function selectWhole() { var obj = window.event.srcElement var range = document.body.createTextRange() range.moveToElementText(obj)

range.select() event.returnValue = false }

function handleCopy() { var rng = document.selection.createRange() clipboardData.setData(“Text”,rng.text) event.returnValue = false

} function handlePaste() { var elem = window.event.srcElement

if (elem.className == “blanks”) { elem.innerHTML = clipboardData.getData(“Text”) }

event.returnValue = false }

function handleBeforePaste() { var elem = window.event.srcElement

if (elem.className == “blanks”) { event.returnValue = false }

}

</SCRIPT>

</HEAD>

<BODY>

<H1>onBeforePaste and onPaste Event Handlers</H1>

<HR>

<P>Your goal is to copy and paste one noun and one adjective from the following table into the blanks

of the sentence Select a word from the table and copy it to the clipboard Select one or more spaces

of the blanks in the sentence and choose Paste to replace the blank with the clipboard contents.</P>

<TR><TH>Nouns</TH><TH>Adjectives</TH></TR>

<TR><TD>truck</TD><TD>round</TD></TR>

<TR><TD>ball</TD><TD>pretty</TD></TR>

</TABLE>

     </SPAN>

elementObject.onPaste

Trang 8

is so <SPAN ID=”blank2” CLASS=”blanks”>

     </SPAN>!”</P>

<BUTTON onClick=”location.reload()”>Reset</BUTTON>

</BODY>

</HTML>

onPropertyChange

Example

The page generated by Listing 15-46 contains four radio buttons that alter the

innerHTMLand style.colorproperties of a paragraph The paragraph’s

onPropertyChangeevent handler invokes the showChange()function, which

extracts information about the event and displays the data in the status bar of the

window Notice how the property name includes style.when you modify the style

sheet property.

Listing 15-46: Using the onPropertyChange Property

<HTML>

<HEAD>

<TITLE>onPropertyChange Event Handler</TITLE>

function normalText() {

myP.innerText = “This is a sample paragraph.”

}

function shortText() {

myP.innerText = “Short stuff.”

}

function normalColor() {

myP.style.color = “black”

}

function hotColor() {

myP.style.color = “red”

}

Continued

elementObject.onPropertyChange

Trang 9

function showChange() { var objID = event.srcElement.id var propName = event.propertyName var newValue = eval(objID + “.” + propName) status = “The “ + propName + “ property of the “ + objID status += “ object has changed to \”” + newValue + “\”.”

}

</SCRIPT>

</HEAD>

<BODY>

<H1>onPropertyChange Event Handler</H1>

<HR>

<P ID=”myP” onPropertyChange = “showChange()”>This is a sample paragraph.</P>

<FORM>

Text: <INPUT TYPE=”radio” NAME=”btn1” CHECKED onClick=”normalText()”>Normal

<INPUT TYPE=”radio” NAME=”btn1” onClick=”shortText()”>Short

<BR>

Color: <INPUT TYPE=”radio” NAME=”btn2” CHECKED onClick=”normalColor()”>Black

<INPUT TYPE=”radio” NAME=”btn2” onClick=”hotColor()”>Red

</FORM>

</BODY>

</HTML>

onReadyStateChange

Example

You can use the onReadyStateChangeevent handler to assist with a status display while a long external file, such as a Java applet, loads For example, you might have

a small image on a page that changes with the state change of an applet The

<APPLET>tag assigns a function to the onReadyStateChangeevent handler:

Then the function changes the image for each state type:

elementObject.onReadyStateChange

Trang 10

function showState(obj) {

var img = document.all.statusImage

switch (obj.readyState) {

case “uninitialized” :

img.src = uninit.src

break

case “loading” :

img.src = loading.src

break

case “complete” :

img.src = ready.src

}

The preceding function assumes that the state images are precached as the page

loads.

onResize

Example

If you want to capture the user’s resizing of the browser window (or frame), you

can assign a function to the onResizeevent handler either via script

window.onresize = handleResize

or by an HTML attribute of the BODY element:

onSelectStart

elementObject.onSelectStart

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