JavaScript Event Bubbling

Event Bubbling

Events bubble up from child to parent:

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

stopPropagation()

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.