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 event 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.

How can I stop event bubbling?

You can stop event bubbling by calling event.stopPropagation() in your event handler. This prevents the event from reaching parent elements.

What are some use cases for event capturing?

Event capturing can be useful for handling events at a higher level before they reach specific elements, such as logging or preventing default actions.