jQuery in Action
108
CHAPTER 4
Events are where it happens!
jQuery provides a few event-related convenience commands that make it easier to
use these interaction behaviors on our pages. Let's look at them.
use these interaction behaviors on our pages. Let's look at them.
Toggling listeners
The first of these is the
toggle()
command, which establishes a pair of click event han-
dlers that swap off with each other on every other click event. Its syntax is as follows:
A common use for this convenience command is to toggle the enabled state of an
element based upon how many times it has been clicked. We can simulate this
using the image element of our previous examples, changing its opacity to reflect
whether it's enabled (fully opaque) or disabled (partially transparent). We could
do this example for real by toggling the read-only state of a text input control, but
that would not make as clear a visual statement for demonstration purposes. Let's
fake it with the image example.
element based upon how many times it has been clicked. We can simulate this
using the image element of our previous examples, changing its opacity to reflect
whether it's enabled (fully opaque) or disabled (partially transparent). We could
do this example for real by toggling the read-only state of a text input control, but
that would not make as clear a visual statement for demonstration purposes. Let's
fake it with the image example.
Consider figure 4.8, which shows a page containing the image in a time-lapse
display of the page in three states:
1
On initial display
2
After clicking the image once
3
After clicking the image again
The code for this example is shown in listing 4.6 and can be found in the file
chapter4/toggle.html.
chapter4/toggle.html.
Command syntax: toggle
toggle(listenerOdd,listenerEven)
Establishes the passed functions as click event handlers on all elements of the wrapped set
that toggle between each other with every other trigger of a click event
that toggle between each other with every other trigger of a click event
Parameters
listenerOdd
(Function) A function that serves as the click event handler for all odd-
numbered clicks (the first, the third, the fifth, and so on)
listenerEven
(Function) A function that serves as the click event handler for all even-
numbered clicks (the second, the fourth, the sixth, and so on)
numbered clicks (the second, the fourth, the sixth, and so on)
Returns
The wrapped set
The wrapped set