Bubbling and Capturing
You may see reference to "Bubbling and Capturing" in relation to the way that the DOM (Document Object Model) processes events within the document.
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.
In most cases of design you will not have to consider this aspect but if your delve deaper in the workings of the DOM you will find examples of EventHandlers being added and configured for elements to acheive a particular action.
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 javascript.info 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.
An example of Bubbling and Capturing in action can be seen in the operation of the accordian. This has been developed further as an expanding list. The adding of event listeners and the processing of the events is detailed here
javascript.info
The code below is from the javascript.info site and shows how events "bubble" throughout the DOM:
The HTML for the original demo
<style>
body * {
margin: 10px;
border: 1px solid blue;
}
</style>
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>
The javascript.info 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('*'))
Selecting all the elements on the page
The Javascript for the original demo
<script>
for(let elem of document.querySelectorAll('*')) {
elem.addEventListener(
"click", e => alert(`Capturing: ${elem.tagName}`)
, true);
elem.addEventListener(
"click", e => alert(`Bubbling: ${elem.tagName}`));
}
</script>
The example above features the ever popular addEventListener method and also Arrow function expressions.
A reworked demo - based on thejavascript.info example
The problem with the javascript.info 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"
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:
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
The Demo explained
As I was saying this is not well explained and my attempt here is not a lot better than the websites that I took my research. Trapping the events, as does the document object, and displaying when the different phases of the event is not easy to demonstrate. In most cases this happens in the back-ground and the visitor to a document is not aware that there are "phases" of this action.
In addition, it is not clear (and it still is not to me) why you would want to capture the different phases in the processing of your page (document).
Background to this page
Queries such as "javascript event bubbling and capturing" and "dom event bubbling" find this page.
In my web design efforts I have also wondered how this all comes together and I am trying to put a few pages together in an attempt to make more sense.
The examples that I feature here and other code samples that I have found have not been clarified by the use of Arrow Functions.
Other places I have seen "Message" handling between objects
SQLWindows and sending messages between objects.