Detailed explanation
In JavaScript, preventDefault() and stopPropagation() control different parts of DOM event handling. preventDefault() asks the browser to cancel an event’s default action, such as following a link, submitting a form, or inserting text during certain keyboard interactions. stopPropagation() controls where the event travels through the DOM. Neither method substitutes for the other: cancelling navigation does not stop ancestor listeners from running, and stopping propagation does not cancel navigation. This distinction matters when combining interactive elements, nested components, and event delegation.
An event normally follows a dispatch path through three phases: capture, target, and bubble. Capture listeners run from outer ancestors towards the target; target listeners run at the element where the event occurs; then, if the event bubbles, ancestor bubble listeners run outwards. Calling stopPropagation() prevents further propagation along this path. For example, calling it in a button’s click handler prevents a parent’s bubble-phase click handler from receiving that click. However, ancestor capture listeners may already have executed. It also does not stop other listeners in the current listener invocation on the same element; stopImmediatePropagation() additionally prevents remaining listeners there from executing.
Default behaviour is separate from that propagation path. In form.addEventListener('submit', e => { e.preventDefault(); save(); }), the handler cancels the form submission’s default action and runs application-defined saving logic. The submit event can still reach ancestor listeners, which might perform logging or other processing. Cancellation only works when the event is cancelable and the listener is not passive. After successful cancellation, event.defaultPrevented is true; event.cancelable indicates whether cancellation is supported. If cancellation is needed, call preventDefault() synchronously during dispatch, not after awaiting an asynchronous operation.
Interviewers usually judge whether you can predict both listener execution and browser behaviour. For a link inside a clickable container, preventDefault() blocks navigation while allowing the container handler to run; stopPropagation() blocks the container’s bubble handler while leaving navigation intact. Use both only when both outcomes are required. Avoid stopping propagation unnecessarily because it can break delegated handlers, analytics, or unrelated component behaviour higher in the DOM.
Key points to remember
- preventDefault() cancels a cancelable default action without stopping event propagation.
- stopPropagation() stops further propagation without cancelling the default action.
- Propagation includes capture, target, and, for bubbling events, the bubble phase.
- stopImmediatePropagation() also stops remaining listeners on the current element.
- Passive listeners cannot cancel default actions; successful cancellation sets defaultPrevented to true.
Common mistakes candidates make
- Assuming stopPropagation() prevents link navigation or form submission.
- Expecting stopPropagation() to undo capture listeners that already ran or stop other listeners in the current invocation.
- Calling preventDefault() from a passive listener or after await and expecting reliable cancellation.
Likely follow-up questions
How does stopImmediatePropagation() differ from stopPropagation()?
Both stop further propagation along the event path. stopImmediatePropagation() also prevents remaining listeners on the current element from running, while stopPropagation() does not stop other listeners in the current invocation.
Does returning false from an event listener cancel the event?
Not when the listener is registered with addEventListener(); its return value is ignored. Some other APIs have different semantics: jQuery treats returning false as both preventDefault() and stopPropagation(), so identify the API before answering.
Why should form submission usually be handled on the form rather than the submit button?
Listening for submit covers normal submission paths, including clicking a submit button and implicit submission through Enter. Calling preventDefault() there cancels the default submission, whereas a button click handler alone may miss other submission paths.
Interview tip: Explain default action and event propagation as separate mechanisms, then demonstrate their independent effects with a link inside a clickable parent.