48 Event Bubbling

Event bubbling describes the order in which events are propagated or "bubbled" up from the target element to its ancestors in the DOM hierarchy.

• When an event occurs on a nested element (e.g. a button within a div within a section)
• It triggers a sequence of event propagation that starts from the innermost element and bubbles up to the outermost parent.

┌───────────────────────────────────────┐
│ Grandparent                           │
│                                       |
│ ┌─────────────────────────────────┐   │
│ │ Parent                          │   │
│ │                                 │   │
│ │ ┌────────────────────────────┐  │   │
│ │ │Child                       │  │   │
│ │ │                            │  │   │
│ │ └────────────────────────────┘  │   │
│ └─────────────────────────────────┘   │
└───────────────────────────────────────┘