JavaScript – What Does Bubbling Mean in This Context?

javascriptprototyping

This page it has the following:

If we want to stop the event (e.g., prevent its default action and stop it bubbling), we can do so with the extended event object's Event#stop method:

$('foo').observe('click', function(event) {
  event.stop();
});

Best Answer

Bubbling is an event flow mechanism in the DOM where events that are designated as "bubbling" (such as your click event), after being dispatched to their target, follow the target's parent chain upwards, checking for and triggering any event listeners registered on each successive target.

In other words, given a DOM like this:

<div id="foo">
  <div id="bar">
    <a href="/something">Click Target!</a>
  </div>
</div>

The click event that is triggered when the anchor is clicked will bubble up through the chain, triggering any click handlers on div#bar and div#foo on the way up.

Related Topic