Examples of common, practical uses of event bubbling and capturing?

Question

Can someone provide practical, everyday examples of event bubbling and event capturing in jQuery/javascript? I see all kinds of examples demonstrating these concepts but they always seem like things you'd never actually need in a regular web app.

Both descriptions and code snippets would be greatly appreciated.

Timbale

Answer 1

Practical event bubbling?

With or without jQuery (bearing in mind that you can handle bubbled events without using a library) there are a number of scenarios where you'd want to structure your code to take advantage of bubbling.

One example: let's say you have a page where elements are being created dynamically, but you want to process a click on those elements. You can't bind an event handler directly to them before they exist, but binding individual handlers to them when you create them is a bit of a pain. Instead, bind an event handler to a container object: click events will bubble up from the individual elements to the container but you can still tell which element was clicked - jQuery makes this easy if you are using the appropriate syntax of .on(), or .delegate() (or even .live() if you have a really old version of jQuery) because it sets this to the clicked element.

<div id="someContainer"></div>

$("#someContainer").on("click", ".dynamicElement", function() {
    // this is the element, do something with it
});

This says that on click of an element with the class "dynamicElement" that is a child of the "someContainer" div do something. It will work regardless of whether the "dynamicElement" element existed at page load, was added later in response to some other user action, or perhaps loaded with Ajax.

Dollar

thanks nnnnnn, I have been regularly using the particular example you mention. I'm wondering if you might share other ones too? thanks! – Timbale

....I would imagine this is more efficient as well, registering a single listener vs. registering many. – Nonagon

Answer 2

I add images dynamically to a div, I plan on using event bubbling to capture onload events in the containing div.

Nonagon

The onload is to know when the image was actually rendered on screen? Can you provide a code snippet? – Timbale

that's right, it is when it has been rendered, so you can then set display = 'inline' to show the image. This will normalize what the user sees before the image has downloaded ( instead of little cute images by the browser people ). Sorry no snippets yet. – Nonagon

-@pure_code, can you explain why your example qualifies as event bubbling? I want to upvote your answer but would like to make sure its sufficiently useful to future visitors first. – Timbale

...it's a one to many relationship, i have many images that when an event occurs will dispatch(internally) their event out and up to the containing div ( and up even further ), the div will act as a choke point to capture the "bubbles" and act using information from the event argument. – Nonagon