Learning jQuery 1.3 : Compound events

8/11/2012 5:21:38 PM
Most of jQuery's event-handling methods correspond directly to native JavaScript events. A handful, however, are custom handlers added for convenience and cross-browser optimization. One of these, the .ready() method, we have discussed in detail already. The .toggle() and .hover() methods are two more custom event handlers; they are both referred to as compound event handlers because they intercept combinations of user actions, and respond to them using more than one function.

Showing and hiding advanced features

Suppose that we wanted to be able to hide our style switcher when it is not needed. One convenient way to hide advanced features is to make them collapsible. We will allow one click on the label to hide the buttons, leaving the label alone. Another click on the label will restore the buttons. We need another class to handle the hidden buttons:

.hidden {
display: none;

We could implement this feature by storing the current state of the buttons in a variable, and checking its value each time the label is clicked to know whether to add or remove the hidden class on the buttons. We could also directly check for the presence of the class on a button, and use this information to decide what to do. Instead, jQuery provides the .toggle() method, which performs this housekeeping task for us.

There are in fact two .toggle() methods defined by jQuery. For information on the effect method of this name (which is distinguished by different argument types), see:

The .toggle() event method takes two or more arguments, each of which is a function. The first click on the element causes the first function to execute, the second click triggers the second function, and so forth. Once each function has been invoked, the cycle begins again from the first function. With .toggle(), we can implement our collapsible style switcher quite easily:

$(document).ready(function() {
$('#switcher h3').toggle(function() {
$('#switcher .button').addClass('hidden');
}, function() {
$('#switcher .button').removeClass('hidden');

After the first click, the buttons are all hidden:

And a second click returns them to visibility:

Once again we rely on implicit iteration; this time, to hide all the buttons in one fell swoop without requiring an enclosing element.

For this specific case, jQuery provides another mechanism for the collapsing we are performing. We can use the .toggleClass() method to automatically check for the presence of the class before applying or removing it:

$(document).ready(function() {
$('#switcher h3').click(function() {
$('#switcher .button').toggleClass('hidden');

In this case, .toggleClass() is probably the more elegant solution, but .toggle() is a more versatile way to perform two or more different actions in alternation.

Highlighting clickable items

In illustrating the ability of the click event to operate on normally non-clickable page elements, we have crafted an interface that gives few hints that the buttons—actually just <div> elements—are actually live parts of the page, awaiting user interaction. To remedy this, we can give the buttons a rollover state, making it clear that they interact in some way with the mouse:

#switcher .hover {
cursor: pointer;
background-color: #afa;

The CSS specification includes a pseudo-class called :hover, which allows a stylesheet to affect an element's appearance when the user's mouse cursor hovers over it. In Internet Explorer 6, this capability is restricted to link elements, so we can't use it for other items in cross-browser code. Instead, jQuery allows us to use JavaScript to change an element's styling—and indeed, perform any arbitrary action—both when the mouse cursor enters the element and when it leaves the element.

The .hover() method takes two function arguments, just as in our .toggle() example above. In this case, the first function will be executed when the mouse cursor enters the selected element, and the second is fired when the cursor leaves. We can modify the classes applied to the buttons at these times to achieve a rollover effect:

$(document).ready(function() {
$('#switcher .button').hover(function() {
}, function() {

We once again use implicit iteration and event context for short, simple code. Now when hovering over any button, we see our class applied as shown in the following screenshot:

The use of .hover() also means we avoid headaches caused by event propagation in JavaScript. To understand this, we need to take a look at how JavaScript decides which element gets to handle a given event.

  •  Programming the iPhone : Tables and Embedded Controls
  •  Programming the iPhone : Scrolling Controls
  •  BlackBerry Java Application Development : Networking - Testing for availability of transports
  •  XNA Game Studio 4.0 : Multitouch Input For Windows Phones (part 2) - Displaying GestureSample Data
  •  XNA Game Studio 4.0 : Multitouch Input For Windows Phones (part 1)
  •  Motorola Motoluxe
  •  Apple's Undiscovered Country : The future of the iPhone
  •  Apple's Undiscovered Country : The Future Of The Ipad
  •  Programming the iPhone : Standard Control Types (part 6) - Segmented Controls
  •  Programming the iPhone : Standard Control Types (part 5) - Search Bars
  •  Programming the iPhone : Standard Control Types (part 4) - Tables and Pickers
  •  Programming the iPhone : Standard Control Types (part 3) - Sliders
  •  Programming the iPhone : Standard Control Types (part 2) - Modal Buttons
  •  Programming the iPhone : Standard Control Types (part 1) - Buttons
  •  Sony Introduced 3 New Phones In Xperia Series: Tipo, Miro And Ion
  •  Samsung Galaxy SIII And HTC One X: A Detailed And Thorough Comparison
  •  In Control
  •  BlackBerry Virtual Keyboard: The Development Through Each Appliance
  •  3D Phone – Why Is LG Optimus 3D Max P725 The Best Choice, Still?
  •  XNA Game Studio 4.0 : Xbox 360 Gamepad (part 2) - Moving Sprites Based on Gamepad Input
    Top 10
    HP ElitePad 900 - A Well-Built Business Tablet
    Huawei MediaPad 7 Lite Android Tablet
    Best New App-Ons – August 2013
    How To See Through Website Lies
    17 Killer Mac Apps Under $20 (Part 5)
    17 Killer Mac Apps Under $20 (Part 4)
    17 Killer Mac Apps Under $20 (Part 3)
    17 Killer Mac Apps Under $20 (Part 2)
    17 Killer Mac Apps Under $20 (Part 1)
    PC Specialist Fusion Z11 - Black Midi Tower Window Gaming Case
    Most View
    Projectors Test - 300in Picture! Full HD! 3D And All For Under A Grand! (Part 3) : Optoma HD25, Optoma HD25 specs
    The Ideal Modern IT Department (Part 1)
    The Best Entry Level Phones – November 2012 (Part 4) - Motorola Motosmart
    Homeplug Problems In A Factory Setting (Part 1)
    Using Standard NT Security Features in Windows 7 : WORKING DIRECTLY WITH WINDOWS NT SECURITY (part 2) - Changing User Permissions
    Debugging and Deploying Mobile Games (part 2) - Choosing a Debugger, Deploying Mobile Games
    How To Tidy The Windows 8 UI (Part 2)
    Music And More To Go
    Home Cinema Amplifiers Awards – Q1 2013
    Best Photo Printers Revealed – Jan 2013 (Part 6)