JavaScript Event Bubbling

Event Bubbling

Events bubble up from child to parent:

``` ┌─────────────┐ │ Parent │ ← Event reaches here │ ┌────────┐ │ │ │ Child │ │ ← Click happens here │ └────────┘ │ └─────────────┘ ```

stopPropagation()

```javascript button.addEventListener('click', (e) => { e.stopPropagation(); // Stop bubbling }); ```

Key Takeaway

Events bubble up the DOM tree. Use stopPropagation() to stop. Understanding bubbling is crucial for event handling.