Browser events: `preventDefault()`

Calling the preventDefault() method of the event object will cancel the default handling that the browser is programmed to execute.

Opening a new page on an a element click event, for example.

Or submitting a form on the submit event.

Calling preventDefault() is what you need to do to completely customize the action. Perhaps by creating a fetch request to load some JSON instead of opening a new page on a link click.

Other event handlers defined on this same element will execute. Unless you call event.stopImmediatePropagation().

Lessons this unit:

0: Introduction
1: Handling events
2: The `DOMContentLoaded` event
3: The `event` object
4: Mouse events
5: Keyboard events
6: ▶︎ `preventDefault()`
7: Stopping event propagation
8: Bubbling and capturing
9: Form submit event
10: Input fields events
11: Creating custom events