JQuery_ Novice to Ninja - Earle Castledine [59]
The easiest way to understand event propagation is to see it in action. To illustrate this concept we’ll set up a quick little experiment. It will consist of the following basic markup: two divs, one inside the other. The outer and inner divs will have ids of outer and inner, respectively:
chapter_05/02_event_propagation/index.html (excerpt)
Click Outer!
Click Inner!
Next, we’ll add a click handler to each of the div elements, so that when we click on an element an alert will pop up and tell us the element’s name:
chapter_05/02_event_propagation/script.js (excerpt)
$('div').click(function() {
alert('Hello from ' + $(this).attr('id'));
});
First, click on the outer div: unsurprisingly, you’ll see an alert saying “Hello from outer.” Now, click on the inner div. You’ll see the expected “Hello from inner.” But then you’ll also see “Hello from outer” … what gives? We only clicked once, so why are we seeing two click events?
As you probably guessed, rather than two click events, it’s actually one click event happening in two different places. The event starts at our inner div and checks to see if there are any event handlers attached to it. It then bubbles (or propagates) up to the div’s parent element (in this case the outer div), and checks to see if there are any event handlers attached that element. The event continues to bubble up the DOM hierarchy until there are no more parents available.
This event bubbling is desirable in many cases; we’ll often want to handle the same event at multiple levels of the DOM. For example, if we wanted to set a parent node’s class when any children were clicked, it would be far more efficient to add an event handler to the parent node itself than to add a handler to each child. But we still want to be able to attach individual click handlers to any of the children.
On the other hand, it can be undesirable to have an event to bubble up. Sometimes we want the child node to stop the event going any further. As an example, imagine we were making a Whac-A-Mole type game. The game is made up of two parts: a game board and some moles. The moles randomly appear on the screen for a few seconds and then disappear. We might want to attach a handler to each mole to detect a direct hit, and another handler to the game board to detect a miss. With event propagation, we’d end up recording both a hit and a miss as the event bubbled up to our game board.
There are a few techniques available for controlling event propagation. A common JavaScript technique is simply to return false from the event handler. This works fine, and is supported across all major browsers. However, jQuery’s event system normalizes all events to the W3C standard, which means there’s no need to worry about how different browsers treat different edge cases.
To stop event propagation using jQuery we use the stopPropagation method, as we did above in our expandable menu code. As we did at the end of the last chapter, we pass our anonymous callback function an e parameter to hold the event. Then we simply call stopPropagation on that event, and it will cease propagating further up the DOM.
Default Event Actions
Now is probably a good time to discuss another common method for controlling event flow: preventDefault. The preventDefault command stops the browser from executing the default action that an event would normally perform. Its most common use is stopping a link from loading its target when clicked:
$('a').click(function(e) {
e.preventDefault();
});
This code effectively disables every link on the page. It’s highly unusual to want to do this to every link, of course, but it’s common to override a link’s action this way when we’re implementing progressive enhancements—such as