preventDefault()

`event.preventDefault()` cancels a cancelable event's browser default action, such as link navigation or form submission. It does not stop event propagation, and it cannot cancel behavior from a passive listener or for a non-cancelable event.

`event.preventDefault()` tells the browser not to perform the default action associated with a cancelable event. For example, it can prevent a link click from navigating, a form submission from proceeding, or a checkbox click from changing its checked state.

Call it on the event object inside an event listener, such as `event.preventDefault()`. It does not take arguments and returns `undefined`. Check `event.cancelable` when you need to know whether the event's default action can be canceled.

Canceling a default action does not stop the event from propagating through the DOM. Other listeners can still run unless propagation is separately stopped with a method such as `stopPropagation()`.

The call has no effect for a non-cancelable event or when made from a passive listener. For ordinary application needs, prefer built-in HTML behavior and validation where they fit—for example, `disabled`, `readonly`, or constraint validation—rather than canceling events unnecessarily.

Key points

• `preventDefault()` cancels a cancelable event's browser-defined default action.
• It does not stop the event from propagating.
• It has no effect on non-cancelable events and cannot cancel from a passive listener.
• Prefer native HTML or CSS mechanisms when they meet the need.

Interview questions

What does `event.preventDefault()` do?

`preventDefault()` asks the browser not to perform the default action for a cancelable event. A common example is preventing a link click from navigating so an application can handle the action itself. The event can still propagate to other listeners. If the event is non-cancelable or the listener is passive, the call cannot cancel the default action.

How is `preventDefault()` different from `stopPropagation()`?

`preventDefault()` cancels the event's default action, while `stopPropagation()` prevents the event from traveling to further targets in the DOM. They address different parts of event handling and can be used independently. For instance, a listener can cancel link navigation while still allowing an ancestor's click listener to run.

How would you prevent a form from submitting while handling it with JavaScript?

Form submission can be intercepted in a `submit` listener by calling `event.preventDefault()`. The handler can then validate or process the data without the browser carrying out its normal submission behavior. This should be used when custom handling is needed; built-in constraint validation is often preferable for straightforward input rules. The application should still provide appropriate validation and feedback.

When might calling `preventDefault()` fail to cancel an action?

First check whether the event is cancelable; a non-cancelable event cannot have its default action prevented. Also check whether the listener is passive, because passive listeners are not allowed to cancel default behavior. A passive listener may produce a console warning if it calls `preventDefault()`. If cancellation is essential, attach a non-passive listener where appropriate and consider whether a native alternative better solves the problem.