How deeply does Web Components in Action cover event bubbling?

Explains propagation through DOM layers and demonstrates CustomEvent configuration, stopping short of broader event-dispatch internals.

Event bubbling

As explained in Web Components in Action

Event bubbling is DOM event propagation in which an event moves from its originating element upward through ancestor elements.

Event bubbling carries an event from its originating element through parent elements toward the document. Native events such as click bubble by default; CustomEvent instances require explicit configuration. section 14.2

Use bubbling to let an ancestor listen for events dispatched by a descendant:

Create a CustomEvent with detail data such as a message and number. section 14.2
Set bubbles: true when the custom event must pass through ancestor elements. section 14.2
Dispatch the event on the originating element and listen higher in the DOM, such as on document. section 14.2
Remember that an event without bubbling stops at its target unless the listener is attached directly there. section 14.2

Listing 14.4. Custom Event bubbling

<html>
<head>
   <title>Custom Event Bubbling</title>
   <script>
       document.addEventListener('myevent', function(e) {
           console.log('The message', e.detail.message, 'with number',
                        e.detail.number);
       });

       const event = new CustomEvent('myevent', {
           bubbles: true,                           #1
           detail: {
               message: 'hi',
               number: 5
           }
       });

       setTimeout( function() {
           document.getElementById('target')        #2
                       .dispatchEvent(event);
       }, 2000);
   </script>
</head>
<body>
   <div id="target"></div>                          #3
</body>
</html>

Inspect a complete CustomEvent example that dispatches from a target element, carries detail data, and reaches a document listener through bubbles: true. section 14.2

How Web Components in Action covers it

liveBook manning.com

Read Web Components in Action on liveBook Get the book at manning.com

Also explained in

liveBook manning.com

Secrets of the JavaScript Ninja, Second EditionThe phase of event dispatch in which an event travels from its target up through the DOM hierarchy.
liveBook manning.com

React Quickly, Second EditionEvent bubbling is the propagation stage in which an event travels from its originating target toward outer targets.

Compare how 3 books explain event bubbling →

Related concepts

event delegationused by · Event delegation is an event-handling technique in which an ancestor handles events from descendant elements through event propagation.
event propagationpart of · Event propagation is the process by which an event travels through a hierarchy of elements during capture, target, and bubbling phases.
eventconfigured by · An event is an occurrence, change, or associated record or notification recognized as significant within a system or context.
event.composedPathmeasured by · event.composedPath is a DOM event method that returns the ordered propagation path an event follows through the document and related objects.
Document Object Modelpart of · The Document Object Model (DOM) is a standard programming interface that represents a document as a structured tree of objects and provides ways to access and modify its content and structure.
blur eventcontrasts with · A blur event is a browser event dispatched when an element or window loses focus.

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.