Sun Dial Menu

Bubbling and Capturing

In my opinion the explanation of the way that the DOM processes, creates and reacts to events is not well documented or explained. I am not saying that I will be able to do so here, but I will try.

The examples that I feature here and other code samples that I have found have not been clarified by the use of Arrow Functions.

In my research into the way that Event Handlers for DOM objects, and JavaScript in general the concept of "bubbling-and-capturing" came to my attention. This is actually quite neat. The examples on explain this quite well but are not really easy to follow when the bubbling and capturing is happening.

Demo on this page - Uses Alert() boxes which are a pain - I want to develop a demo using timed modals.

Other places I have seen "Message" handling between objects

SQLWindows and sending messages between objects.

The code below is from the site and shows how events "bubble" throughout the DOM:

The HTML for the original demo

body * {
margin: 10px;
border: 1px solid blue;

<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>

The site illustrates this behaviour very well. At the moment the code that I was trying to get bubbles and captures all the elements on the page.
This includes the links to related pages, thus making it difficult to navigate away from. I will have to return when I have worked out for (let elem of document.querySelectorAll('*'))

Top Menu

Selecting all the elements on the page

The Javascript for the original demo

for(let elem of document.querySelectorAll('*')) {
"click", e => alert(`Capturing: ${elem.tagName}`)
, true);
"click", e => alert(`Bubbling: ${elem.tagName}`));

The example above features the ever popular addEventListener method and also Arrow function expressions.

Top Menu

A reworked demo - based on example

The problem with the example is that ALL the elements on the page are selected by the querySelectorAll(*) selector.

I added a new style section for the DIVs the FORM and the P tags. I changed the script to create an HTML collection from the class="demo"

DIV inner


Instead of selecting all the elements on the page I am only selecting the classes form.demo div.demo and p.demo

The EventListeners added to the elements have both the tagName and class reported in the Alert boxes. The event sequence is now seen as a "traversal" of the 4 elements, the outer div, the form then the inner div and then the p tag.

This demo is not very elegant but at least it gives a little more insight into the Bubble and Capture process.

The DEV Community

Here is anothe example. I admit that I am still a little confused and not sure where I would use this.

The DEV Community say that the proces is:

" Event bubbling and capturing are two ways of event propagation in the HTML DOM API, when an event occurs in an element inside another element, and both elements have registered a handle for that event.
With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements.
With capturing, the event is first captured by the outermost element and propagated to the inner elements. "

In short I think that the events normally are handled from the inner-most nested element out. If you want to handle things from the outside in then useCapture in the eventListener().

The normal processing of the event handling can have the propagation stopped by the use of the preventDefault('') Method

Top Menu



Top Menu

Site design by Tempusfugit Web Design -