What is bubbling and capturing in event handling?

Can you explain bubbling and capturing in event handling?

Sure! Bubbling and capturing are two phases of event propagation in the DOM. Bubbling means the event starts from the target element and bubbles up to the root, while capturing starts from the root and goes down to the target.

How does bubbling work in practice?

In practice, when you click a button inside a div, the click event first triggers on the button, then bubbles up to the div, and finally to the document.

What about capturing? Can you give an example?

Certainly! In capturing, if you set an event listener on the document for a click event, it will trigger first as the event travels down to the button before reaching it.

Are there any performance implications of using these methods?

Yes, using too many event listeners can affect performance, especially in deep DOM trees. It's important to manage them wisely.