We often nest related DOM elements when we write our markup. For instance, we may have an div containing an img, an h2, and a p tags

<div> <img src="..." /> <h2>My item</h2> <p>Item description</p> </div>

Suppose we wanted to allow the user to click anywhere inside of this div. If we were simply navigating the user to a new page, an a tag with a properly set href would be sufficient. But if we want to perform some other action on the current page, we'll want to use JavaScript to listen for click events to the entire div and all of it's children.

Fortunately, we don't have to listen and respond to a click on each DOM element - div, img, h2, and p. We only have to listen to events on the parent! This is due to event bubbling.

When an event occurs on any DOM element on a page, the event is bubbled up through it's parent elements triggering the event on each. So in our example above, if a user clicks on the p element, the click event will be triggered on the p followed by the parent div following by the parent of the div all the way to the document object.