Sun Dial Menu
DOM Event Propagation
tempusfugit.me.uk
 

Bubbling and Capturing

This page is being reworked

I need to add formatting to code samples and links to other DOM pages

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.

javascript.info

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

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('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('*'))

<style>
   * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<div>
<form>FORM
  <div>DIV
    <p>P<:/p>
  </div>
</form>

<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>
</div>

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

A reworked demo - based on thejavascript.info example

I added a new style section for the divs/ the from and the p tags. I changed the script to create an HTML collection from the class="demo"

FORM
DIV inner

P

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 thik 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

Site design by Tempusfugit Web Design -