jQuery in Action phần 6 pptx

102 CHAPTER 4

Events are where it happens!

In addition to the bind() command, jQuery provides a handful of shortcut

commands to establish specific event handlers. Because the syntax of each of

these commands is identical except for the method name of the command, we’ll

save some space and present them all in the following single syntax descriptor:

jQuery also provides a specialized version of the bind() command, named one(),

that establishes an event handler as a one-shot deal. Once the event handler exe￾cutes the first time, it’s automatically removed as an event handler. Its syntax is

similar to the bind() command and is as follows:

Command syntax: specific event binding

eventTypeName(listener)

Establishes the specified function as the event handler for the event type named by the

method’s name. The supported commands are as follows:

■ blur

■ change

■ click

■ dblclick

■ error

■ focus

■ keydown

■ keypress

■ keyup

■ load

■ mousedown

■ mousemove

■ mouseout

■ mouseover

■ mouseup

■ resize

■ scroll

■ select

■ submit

■ unload

Note that when using these shortcut methods, we cannot specify a data value to be placed

in the event.data property.

Parameters

listener (Function) The function that’s to be established as the event handler.

Returns

The wrapped set.

Command syntax: one

one(eventType,data,listener)

Establishes a function as the event handler for the specified event type on all elements in

the matched set. Once executed, the handler is automatically removed.

Parameters

eventType (String) Specifies the name of the event type for which the handler is to be

established.

data (Object) Caller-supplied data that’s attached to the Event instance for avail￾ability to the handler functions. If omitted, the handler function can be spec￾ified as the second parameter.

listener (Function) The function that’s to be established as the event handler.

Returns

The wrapped set.

The jQuery Event Model 103

These commands give us many choices to bind an event handler to matched ele￾ments. And once a handler is bound, we may eventually need to remove it.

4.2.2 Removing event handlers

Typically, once an event handler is established, it remains in effect for the remainder

of the life of the page. Particular interactions may dictate that handlers be removed

based on certain criteria. Consider, for example, a page where multiple steps are pre￾sented, and once a step has been completed, its controls revert to read-only.

For such cases, it would be advantageous to remove event handlers under

script control. We’ve seen that the one() command can automatically remove a

handler after it has completed its first (and only) execution, but for the more gen￾eral case where we’d like to remove event handlers under our own control, jQuery

provides the unbind() command.

The syntax of unbind() is as follows:

This command can be used to remove event handlers from the elements of the

matched set at various levels of granularity. All listeners can be removed by omit￾ting parameters, or listeners of a specific type can be removed by providing that

event type.

Specific handlers can be removed by providing a reference to the function orig￾inally established as the listener. For this to be possible, a reference to the function

must be retained when binding the function as an event listener in the first place.

For this reason, when a function that’s eventually to be removed as a handler is

Command syntax: unbind

unbind(eventType,listener)

unbind(event)

Removes events handlers from all elements of the wrapped set as specified by the optional

passed parameters. If no parameters are provided, all listeners are removed from the ele￾ments.

Parameters

eventType (String) If provided, specifies that only listeners established for the specified

event type are to be removed.

listener (Function) If provided, identifies the specific listener that’s to be removed.

event (Event) Removes the listener that triggered the event described by this Event

instance.

Returns

The wrapped set.

104 CHAPTER 4

Events are where it happens!

originally established as a listener, it’s either defined as a top-level function (so that

it can be referred to by its top-level variable name) or a reference to it is retained by

some other means. Supplying the function as an anonymous inline reference

would make it impossible to later reference the function in a call to unbind().

So far, we’ve seen that the jQuery Event Model makes it easy to establish (as

well as remove) event handlers without worries about browser differences, but

what about writing the event handlers themselves?

4.2.3 Inspecting the Event instance

When an event handler established with the bind() command is invoked, the

Event instance is passed to it as the first parameter to the function. This eliminates

the need to worry about the window.event property under Internet Explorer, but

what about accessing the divergent properties of the Event instance?

Even when using jQuery to establish handlers, the Event instance passed to

the event handler is a clone of the native object as defined by the browser. That

means that in standards-compliant browsers, the Event instance will follow the

standardized layout of properties, and under Internet Explorer, the instance will

use the proprietary layout. Before the proprietary instance is passed to the event

handler, jQuery does its best to fix up the object so that the most commonly

accessed properties and methods of that object follow the standardized format.

So once again, except for the most obscure of Event properties, we can write the

code for our event handlers without regard for browser platform.

Table 4.1 shows the Event properties that are safe to access in a platform￾independent manner.

Table 4.1 Safe Event instance properties

Property Description

altKey Set to true if the Alt key was pressed when the event was triggered, false if not.

The Alt key is labeled Option on most Mac keyboards.

ctrlKey Set to true if the Ctrl key was pressed when the event was triggered, false if not.

data The value, if any, passed as the second parameter to the bind() command when the

handler was established.

keyCode For keyup and keydown events, this returns the key that was pressed. Note that for

alphabetic characters, the uppercase version of the letter will be returned, regardless

of whether the user typed an uppercase or lowercase letter. For example, both a and A

will return 65. You can use shiftKey to determine which case was entered. For key￾press events, use the which property, which is reliable across browsers.

continued on next page