How do event capturing, bubbling, and delegation work in the DOM, and how would you build a delegated event system for a list with thousands of interactive rows?

Question

Accepted Answer

Imagine you have a big box of toys. Instead of picking up each toy to see if it's touched, you just listen to the whole box. When a toy is touched, the box tells you which toy it was. That's event delegation: one listener for many things.

How do event capturing, bubbling, and delegation work in the DOM, and how would you build a delegated event system for a list with thousands of interactive rows?

Diagram

Go deeper

More JavaScript questions