event.PreventDefault Vs. event.stopPropagation
The event.preventDefault() serves to prevent the default behavior triggered by the browser in response to an event, such as form submission or hyperlink navigation. However, it does not interfere with the event's propagation up the DOM tree. Conversely, event.stopPropagation() is employed to halt the upward propagation of an event through the DOM hierarchy, preventing it from reaching higher-level elements, while it does not impede the default behavior initiated by the browser. Each method addresses a specific aspect of event control, and their combined use is often necessary to comprehensively manage event interactions.
Event capture involves the registration of an EventListener on an ancestor of the event's target, allowing it to intercept events of a particular type before they reach the target element. If a capturing EventListener wishes to halt the event's further processing, it can utilize the stopPropagation method, which prevents the event from continuing to propagate. However, it's important to note that additional EventListeners registered at the same hierarchy level will still receive the event. Event cancellation, on the other hand, is achieved by calling the preventDefault method of the Event interface. When one or more EventListeners call preventDefault during any phase of event flow, the default action associated with the event will be canceled, providing control over event behavior.
Here we can see, preventDefault only the browsers default action is stopped but the div's click handler still fires.Full Source
Here we can see, with stopPropagation only the buttons click handler is called and the divs click handler never fires.Full Source
- The event.preventDefault() method on a child will stop the event on the child but it will happen on it's parent (and the ancestors too!).
- The event.stopPropagation() method on a child will stop that event from happening on the parent (the entire ancestors).