What is Stop Propagation in JavaScript ?

In JavaScript, `stopPropagation` is a method used to prevent the further propagation of an event through the DOM (Document Object Model) hierarchy. Events in JavaScript follow a bubbling or capturing phase, during which they traverse up or down the DOM tree. When an event occurs on a specific element, it triggers handlers on that element and then propagates to its ancestors or descendants. By invoking `stopPropagation` within an event handler, you halt the event’s propagation, preventing it from reaching other elements. This can be particularly useful in scenarios where multiple elements share a common ancestor, and you want to handle the event exclusively for a specific element without triggering the same event on its parent or sibling elements. For instance, consider a button within a clickable div. Without `stopPropagation`, clicking the button would also trigger the click event on the div. By using `stopPropagation`, you ensure that only the button’s click event is processed, enhancing event control and preventing unintended side effects in your JavaScript application.