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

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

Event capturing and bubbling are two phases of event propagation in the DOM. In capturing, the event starts from the document and goes down to the target element. In bubbling, the event starts from the target element and goes up to the document.

Can you give me an example of each?

Sure! For event capturing, you might add an event listener to a parent element that listens for clicks before the event reaches the child. For bubbling, if you click on a child element, the event will first trigger the child's listener and then propagate up to the parent.

When would I use event capturing instead of bubbling?

You might use event capturing when you want to intercept an event before it reaches a specific target, such as for validation or to prevent certain actions.

Are there any performance implications between the two?

Yes, event capturing can be less efficient because it requires traversing the DOM from the top down, while bubbling starts from the target and goes up, which can be faster in many cases.