JavaScript Bible, Gold Edition part 92 ppsx

returnValue NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 While IE4+ continues to honor the original way of preventing default action for an event handler that is, having the last statemen

Trang 1

return a nullvalue for the keyCodeproperty during onKeyPressevents In other words, the keyCodeproperty for onKeyPressevents is more like a character code than a key code

To capture the exact keyboard key that the user presses, use either the onKeyDownor onKeyUpevent handler For these events, the eventobject captures

a numeric code associated with a particular key on the keyboard For the character keys, this varies with the language assigned as the system language Importantly, there is no distinction between uppercase or lowercase: The “A” key on the Latin keyboard returns a value of 65, regardless of the state of the Shift key At the same time, however, the press of the Shift key fired its own onKeyDownand onKeyUp events, setting the keyCodevalue to 16 Other non-character keys — arrows, page navigation, function, and similar — have their own codes as well This gets very detailed, including special key codes for the numeric keyboard keys that are differ-ent from their corresponding numbers along the top row of the alphanumeric key-board

Be sure to see the extensive section on keyboard events in Chapter 15 for exam-ples of how to apply the keyCodeproperty in applications

Example (with Listing 29-16) on the CD-ROM

Related Items:onKeyDown, onKeyPress, onKeyUpevent handlers

nextPage

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

The nextPageproperty is applicable only if your IE5.5/Windows page uses a TemplatePrinter behavior Values of this property are one of the following strings: left, right, or an empty string For more information about the TemplatePrinter behavior for Windows-only versions of IE5.5+, see

http://msdn.microsoft.com/workshop/browser/hosting/printpreview/reference/ behaviors/TemplatePrinter.asp

propertyName

On the

CD-ROM

(IE) event.propertyName

Trang 2

The propertyNameproperty is filled only after an onPropertyChangeevent

fires This property is not available through Version 5 of IE/Macintosh

If a script modifies a property, the onPropertyChangeevent handler fires, and

the string name of the property is stuffed into the event.propertyNameproperty

If the property happens to be a property of the styleobject associated with the

element, the propertyNameis the full property reference, as in

style.backgroundColor

Example

See Listing 15-46 in the section about the onPropertyChangeevent handler for

an example of the values returned by this property

Related Items:onPropertyChangeevent handler (Chapter 15)

repeat

The repeatproperty reveals for onKeyDownevents only whether the key is in

repeat mode (as determined by the Keyboard control panel settings in the system)

With this information, you can prevent the automatic triggering of repeat mode

from causing multiple characters from being recognized by the browser This

prop-erty can come in handy if users may be physically challenged and may occasionally

and accidentally hold down a key too long The following script fragment in an

onKeyDownevent handler for a text box or TEXTAREA prevents multiple characters

from appearing even if the system goes into repeat mode:

if (event.repeat) {

event.returnValue = false

}

By disabling the default action while in repeat mode, no further characters reach

the text box until repeat mode goes away (meaning, with the press of another key)

This property is not available in IE/Mac through Version 5

Related Items:onKeyDownevent handler

returnValue

While IE4+ continues to honor the original way of preventing default action for

an event handler (that is, having the last statement of the event handler evaluate to

(IE) event.returnValue

Trang 3

return false), the IE4+ event model provides a property that lets the cancellation

of default action take place entirely within a function invoked by an event handler

By default, the returnValueproperty of the eventobject is true, meaning that the element processes the event after the scripted handler completes its job, just

as if the script weren’t there Normal processing, for example, is displaying a typed character, navigating to a link’s HREF URL upon being clicked, or submitting a form after the Submit button is clicked

But you don’t always want the default action to occur For example, consider a text box that is supposed to allow only numbers be typed in it The onKeyPress event handler can invoke a function that inspects each typed character If the char-acter is not a numeric charchar-acter, then it should not reach the text box for display The following validation function may be invoked from the onKeyPressevent han-dler of just such a text box:

function checkIt() { var charCode = event.keyCode

if (charCode < 48 || charCode > 57) { alert(“Please make sure entries are numerals only.”) event.returnValue = false

} }

By using this event handler, the errant character won’t appear in the text box Note that this property is not a substitute for the returnstatement of a func-tion If you need a value to be returned to the invoking statement, you can use a returnstatement in addition to setting the event.returnValueproperty

Example on the CD-ROM

Related Items:returnstatement (Chapter 41)

saveType

The saveTypeproperty is assigned a value only when an oncontentsaveevent

is bound to an IE/Windows DHTML behavior (.htc) For more information about behaviors, see

http://msdn.microsoft.com/workshop/author/behaviors/overview.asp

Related Items:addBehavior()method

On the

CD-ROM

(IE) event.saveType

Trang 4

The srcElementproperty is a reference to the HTML element object that is the

original target of the event Because an event may bubble up through the element

containment hierarchy and be processed at any level along the way, having a

prop-erty that points back to the element from which the event originated is comforting

After you have a reference to that element, you can read or write any properties

that belong to that element or invoke any of its methods

Example (with Listing 29-17) on the CD-ROM

Related Items:fromElement, toElementproperties

srcFilter

According to Microsoft, the srcFilterproperty should return a string of the

name of the filter that was applied to trigger an onFilterChangeevent handler

While the property exists in the eventobject, its value is always null, at least

through IE5.5 This property, because it is filter related, is a Windows-only property

Related Items:onFilterChangeevent handler; style.filterobject

srcUrn

Value: String Read-Only

On the

CD-ROM

(IE) event.srcUrn

Trang 5

If an event is fired in an IE/Windows behavior attached to an element, and the behavior has a URN identifier defined for it, the srcUrnproperty returns the string from the URN identifier For more information about behaviors, see

http://msdn.microsoft.com/workshop/author/behaviors/overview.asp

Related Items:addBehavior()method

toElement

See fromElement

type

You can find out what kind of event fired to create the current eventobject by way of the typeproperty The value is a string version of the event name — just the name of the event without the “on” prefix that is normally associated with event names in IE This property can be helpful when you designate one event handler function to process different kinds of events For example, both the onMouseDown and onClickevent handlers for an object can invoke one function Inside the func-tion, a branch is written for whether the type comes in as mousedownor click, with different processing for each event type That is not to endorse such event handler function sharing, but for you to be aware of this power should your script constructions find the property helpful

This property and its values are fully compatible with the NN4 and NN6 event models

Example on the CD-ROM

Related Items: All event handlers (Chapter 15).

NN6+ event Object

Properties Methods Event Handlers

button

On the

CD-ROM

(NN6) eventObject

Trang 6

Properties Methods Event Handlers

cancelBubble

cancelable

charCode

clientX

clientY

ctrlKey

currentTarget

detail

eventPhase

isChar

keyCode

layerX

layerY

metaKey

pageX

pageY

relatedTarget

screenX

screenY

shiftKey

target

timeStamp

type

view

Syntax

Accessing NN6+ event object properties and methods:

eventObject.property | method([parameters])

(NN6) eventObject

Trang 7

About this object

Although it is based largely on the event object as defined by the W3C DOM Level 2, the NN6+ event object also carries forward several characteristics from the NN4 event object A few properties are continued primarily for backward compati-bility But because development for NN6 will likely forego the peculiarities of the NN4 DOM and event models, you should ignore these items (as highlighted below) Wherever possible, look forward and embrace the W3C DOM aspects of the event model

While the NN6 event model provides a bubbling event propagation model just as IE4+, the incompatibility of referencing event objects between the event models is still there In NN6 (as in NN4), an event object is explicitly passed as a parameter to event handler (or, rather, event listener) functions But after you have a browser-specific event object assigned to a variable inside a function, a few important prop-erties have the same names between the IE4+ and NN6+ event models If Microsoft adopts more of the W3C DOM event model in future versions of IE, the compatibil-ity situation should improve

The event object discussed in this section is the instance of an event that is cre-ated as the result of a user or system event action The NN6 DOM includes an addi-tional static Eventobject Many of the properties of the static Eventobject are inherited by the event instances, so the detailed coverage of those shared proper-ties is in this section because it is the event object you’ll be scripting for the most part

In many code fragments in the following detail sections, you will see references that begin with the evtreference This assumes that the statement(s) resides inside a function that has assigned the incoming event object to the evtparameter variable:

function myFunction(evt) { }

As shown earlier in this chapter, you can equalize NN6 and IE4+ event object ref-erences when it is practical to do so because the scripts work on identical (or simi-lar) event object properties

Properties

altKey

ctrlKey

metaKey

shiftKey

(NN6) eventObject.altKey

Trang 8

When an event object is created in response to a user or system action, these

four properties are set based on whether their corresponding keys were being held

down at the time — a Shift-click, for example If the key was held down, the property

is assigned a value of true; otherwise the value is false The metaKeyproperty

corresponds to the Command key on the Macintosh keyboard but does not register

for the Windows key on Wintel computers

Most commonly, you use expressions consisting of this property as if

construc-tion condiconstruc-tion statements Because these are Boolean values, you can combine

mul-tiple properties in a single condition For example, if you have a branch of a

function that is to execute only if the event occurred with both the Shift and

Control keys held down, the condition looks as the following:

if (evt.shiftKey && evt.ctrlKey) {

// statements to execute

}

Conversely, you can take a more user-friendly approach to provide special

pro-cessing if the user holds down any one of the four modifier keys:

if (evt.shiftKey || evt.ctrlKey || evt.metaKey || evt.altKey) {

// statements to execute

}

The rationale behind this approach is to offer perhaps some shortcut operation

for users, but not force them to memorize a specific modifier key combination

Example

See Listing 29-10, where the values of these properties are used to set the

checkedproperties of corresponding checkboxes for a variety of event types

Related Items: None.

bubbles

Not every event bubbles For example, an onsubmitevent propagates no further

than the form object with which the event is associated Events that do not bubble

have their event object’s bubblesproperty set to false; all others have the

prop-erty set to true You use this property in the rare circumstances of a single event

handler function processing a wide variety of events You may want to perform

cial operations only on events that can bubble and handle the others without

spe-cial treatment For this branch, you can use the property in an ifcondition

statement:

if (evt.bubbles) {

// special processing for bubble-able events

}

(NN6) eventObject.bubbles

Trang 9

You do not have to branch, however, just to cancel bubbling A non-propagating event doesn’t mind if you tell it not to propagate

Related Items:cancelBubbleproperty

button

The buttonproperty reveals the button that was pressed to activate the mouse event The left (primary) button returns a value of 1 If the mouse is a three-button mouse, the middle button returns 2 The right button (on any multi-button mouse) returns a value of 3 Note that these values differ from those stated in the W3C DOM (0, 1, and 2, respectively), but these values are backward-compatible with the NN4 whichproperty

Mouse buttons other than the primary one are easier to look for in mousedownor mouseupevents, rather than onclickevents In the case of a user pressing multiple buttons, only the most recent button is registered

Exercise caution when scripting the buttonproperty for both IE4+ and NN6+ The respective event models define different button values for mouse buttons

Example

See Listing 29-11, where the buttonproperty is revealed in the statusbar Try pressing individual mouse buttons on, say, the screen button

Related Items: None.

cancelBubble

The cancelBubbleproperty is a rare instance of an IE4+ event property being implemented in NN6 even though the property is not defined in the W3C DOM The property operates the same as in IE4+ in that it determines whether the current event object bubbles up any higher in the element containment hierarchy of the document By default, this property is false, meaning that if the event is supposed

to bubble, then it will do so automatically

To prevent event bubbling for the current event, set the property to true any-where within the event handler function As an alternative, you can cancel bubbling directly in an element’s event handler attribute, as in the following:

onClick=”doButtonClick(this); event.cancelBubble = true”

(NN6) eventObject.cancelBubble

Trang 10

Cancelling event bubbling works only for the current event The very next event

to fire will have bubbling enabled (provided the event bubbles)

If you are trying to migrate your code as much as possible to the W3C DOM, then

use the stopPropagation()method instead of cancelBubble For cross-browser

compatibility, however, cancelBubbleis a safe bet

Example

See Listing 29-6 to see the cancelBubbleproperty in action in an IE

environ-ment Even though that listing has some features that apply to IE5.5+, the bubble

cancelling demonstration works all the way back to IE4

Related Items:stopPropagation()method

cancelable

If an event is cancelable, then its default action can be prevented from occurring

with the help of a script While most events are cancelable, some are not The

can-celable property lets you inquire about a particular event object to see if its event

type is cancelable Values for the property are Booleans You may want to perform

special operations only on events that are cancelable, and handle the others

with-out special treatment For this branch, you can use the property in an ifcondition

statement:

if (evt.cancelable) {

// special processing for cancelable events

}

You do not have to branch, however, just to prevent an event’s default action A

non-cancelable event doesn’t mind if you tell it to prevent the default action

Related Items:preventDefault()method

charCode

keyCode

The NN6 event object model clearly distinguishes between the Unicode

charac-ter attached to the alphanumeric keys of the keyboard and the code attached to

(NN6) eventObject.charCode

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