What is event propagation in JavaScript?

What is event propagation in JavaScript?

Event propagation is the way events travel through the DOM. It consists of two phases: capturing and bubbling.

Can you explain the difference between capturing and bubbling?

Sure! In capturing, the event starts from the root and goes down to the target element. In bubbling, it starts from the target and goes up to the root.

How can I stop event propagation?

You can stop event propagation by using the stopPropagation() method on the event object.

Can you give me an example of using stopPropagation?

Certainly! If you have a button inside a div and you want to prevent the div's click event from firing when the button is clicked, you can do this:

button.addEventListener('click', function(event) {
    event.stopPropagation();
    // Button click logic here
});