What is event bubbling and capturing in JavaScript?

What is 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 how bubbling works?

Sure! Imagine you have a button inside a div. If you click the button, the click event bubbles up to the div, triggering any click event listeners on the div as well.

What about capturing? How does that work?

In capturing, the event is intercepted at the root and travels down to the target. If you set an event listener on the div with the capture option, it will execute before the button's listener.

How can I prevent event bubbling?

You can prevent event bubbling by using the stopPropagation() method on the event object in your event handler.