Learning jQuery 1.3 : The journey of an event

8/11/2012 5:23:00 PM
When an event occurs on a page, an entire hierarchy of DOM elements gets a chance to handle the event. Consider a page model like this:
<div class="foo">
DOM elementshierarchy<span class="bar">
<a href="">
The quick brown fox jumps over the lazy dog.
How razorback-jumping frogs can level six piqued gymnasts!

We then visualize the code as a set of nested elements as shown in the following figure:

For any event, there are multiple elements that could logically be responsible for reacting. When the link on this page is clicked, for example, the <div>, <span>, and <a> all should get the opportunity to respond to the click. After all, the three are all under the user's mouse cursor at the time. The <p> element, on the other hand, is not part of this interaction at all.

One strategy for allowing multiple elements to respond to a click is called event capturing. With event capturing, the event is first given to the most all-encompassing element, and then to successively more specific ones. In our example, this means that first the <div> gets passed the event, then the <span>, and finally the <a>.

Technically, in browser implementations of event capturing, specific elements register to listen for events that occur among their descendants. The approximation provided here is close enough for our needs.

The opposite strategy is called event bubbling. The event gets sent to the most specific element, and after this element has an opportunity to react, the event bubbles up to more general elements. In our example, the <a> would be handed the event first, and then the <span> and <div> in that order.

Unsurprisingly, different browser developers originally decided on different models for event propagation. The DOM standard that eventually developed thus specified that both strategies should be used: first the event is captured from general elements to specific ones, and then the event bubbles back up to the top of the DOM tree. Event handlers can be registered for either part of the process.

Not all browsers have been updated to match this new standard, and in those that support capturing it typically must be specifically enabled. To provide cross-browser consistency, therefore, jQuery always registers event handlers for the bubbling phase of the model. We can always assume that the most specific element will get the first opportunity to respond to any event.

Side effects of event bubbling

Event bubbling can cause unexpected behavior, especially when the wrong element responds to a mouseover or mouseout. Consider a mouseout event handler attached to the <div> in our example. When the user's mouse cursor exits the <div>, the mouseout handler is run as anticipated. Since this is at the top of the hierarchy, no other elements get the event. On the other hand, when the cursor exits the <a> element, a mouseout event is sent to that. This event will then bubble up to the <span> and then to the <div>, firing the same event handler. This bubbling sequence is likely not desired; for the buttons in our style switcher example, it could mean the highlight was turned off prematurely.

The .hover() method is aware of these bubbling issues, and when we use that method to attach events, we can ignore the problems caused by the wrong element getting a mouseover or mouseout event. This makes .hover() a very attractive alternative to binding the individual mouse events.

If action only needs to be taken when the mouse enters or leaves an element, but not both, we can bind jQuery's mouseenter and mouseleave events, which also circumvent bubbling concerns. These events are paired so often, however, that .hover() is generally the right choice.

The mouseout scenario just described illustrates the need to constrain the scope of an event. While .hover() handles this specific case, we will encounter other situations in which we need to limit an event spatially (preventing the event from being sent to certain elements) or temporally (preventing the event from being sent at certain times).

  •  Learning jQuery 1.3 : Compound events
  •  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?
    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
    Intel In Flux: Are We Heading To A Socket-Less Future? (Part 1)
    Handy Hints And Tips
    Master The New Calendar
    Toshiba Camileo S40 - A Small Pistol-Grip Camcorder
    USB DACs Super Test: PC + DAC = HI-FI (Part 5)
    Microsoft ASP.NET 4 : Dynamic Data Details
    ASRock FM2A85X Extreme6 Socket FM2 Mainboard Review (Part 7)
    Lenovo Thinkpad Carbon Touch Ultrabook Review (Part 2)
    People, Always The Weakest Link
    Sondek LP 12 - The One And Only (Part 1)