What is JavaScript event bubbling and capturing?

What is JavaScript event bubbling and capturing?

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 and then to the body, triggering any event listeners attached at those levels.

How do I stop the event from bubbling?

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

What about event capturing? How is it different?

In event capturing, the event is captured from the top of the DOM tree down to the target element. You can enable capturing by setting the third argument of addEventListener to true.