What is the difference between event capturing and bubbling?

Can you explain the difference between event capturing and bubbling in JavaScript?

Sure! Event capturing is when the event starts from the root and goes down to the target element, while bubbling is the opposite; the event starts from the target and goes up to the root.

Why would I use one over the other?

You might use capturing when you want to intercept an event before it reaches the target, while bubbling is useful for handling events after they occur.

Can you give me an example of each?

Of course! For capturing, you might add an event listener to a parent element to catch clicks before they reach child elements. For bubbling, you could add a listener to a child element to handle clicks after they happen.

Are there any performance implications between the two?

Yes, capturing can be less efficient because it traverses the entire DOM tree down to the target, while bubbling only goes up from the target, which can be faster in many cases.