What is the difference between event bubbling and capturing in JavaScript?

What is the difference between event bubbling and capturing in JavaScript?

Event bubbling is when an event starts from the target element and bubbles up to the root, while capturing is the opposite.

Can you give me an example of each?

Sure! In bubbling, if you click a button inside a div, the click event goes from the button to the div. In capturing, it goes from the document to the div, then to the button.

When would I use capturing instead of bubbling?

Capturing is useful when you want to intercept an event before it reaches the target, like for validation or logging.

Are there any performance implications between the two?

Yes, bubbling can be more efficient since it stops at the first matching handler, while capturing may require more checks.