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

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

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

Can you give me an example of each?

Sure! For bubbling, if you click a button inside a div, the click event first triggers on the button, then on the div. For capturing, if you set the event listener on the div with the capture option, it will trigger on the div first, then on the button.

How do I implement event capturing in my code?

You can implement event capturing by passing true as the third argument in addEventListener. For example: element.addEventListener('click', handler, true);.

Are there any performance considerations I should be aware of?

Yes, event capturing can be less efficient than bubbling because it requires traversing the DOM from the root to the target. Use it judiciously.