Module 12 · Browser APIs

The Event Model

Beginner10m read8m practice18m total

EventsEventTargetEvent ObjectListeners

Introduction

The browser event model is how JavaScript reacts to user and system activity: clicks, key presses, form submissions, pointer movement, media events, and more. You register a listener on an EventTarget; later, the browser calls your function with an Event object.

Interviewers use events to test practical browser fluency: addEventListener, this vs event.currentTarget, preventDefault, propagation control, and listener options like once, passive, and capture.

Why This Matters

Events are the boundary between a static page and an application. A clear event model prevents double submissions, broken keyboard behavior, memory leaks from forgotten listeners, and confusing bugs where a parent handler runs after a child handler.

Theory

EventTarget and listeners

Many browser objects implement EventTarget: elements, the document, the window, media objects, and more. The core API is addEventListener(type, listener, options) and removeEventListener(type, listener, options).

Option	Meaning	Interview note
`capture`	Run during capture phase	Same idea as old third argument `true`
`once`	Auto-remove after first call	Useful for one-time onboarding or setup
`passive`	Listener promises not to call `preventDefault`	Improves scroll performance
`signal`	Remove when an `AbortController` aborts	Clean lifecycle management

The Event object

Key fields and methods:

event.type is the event name.
event.target is where the event originated.
event.currentTarget is the object whose listener is currently running.
event.preventDefault() cancels the browser's default action when the event is cancelable.
event.stopPropagation() prevents the event from moving to later ancestors.
event.stopImmediatePropagation() also prevents later listeners on the same target from running.

Default action vs propagation

preventDefault stops browser behavior such as navigation or form submission. It does not stop parent listeners. stopPropagation stops event travel through the path. It does not cancel the default action.

Handler identity matters

To remove a listener, pass the same function reference and compatible capture setting. Anonymous inline functions are convenient but cannot be removed later unless you keep the reference.

Visual Diagrams

Listener dispatch overview

User action
  |
  v
Browser creates Event object
  |
  v
Browser finds event path
  |
  v
Matching listeners run
  |
  v
Default action may run

The browser owns dispatch; your listener receives an object describing what happened.

Propagation methods

preventDefault
  cancels browser action

stopPropagation
  stops travel to later ancestors

stopImmediatePropagation
  also stops later listeners on same target

A common interview trap is claiming `preventDefault` stops bubbling. It does not.

Code Examples

Read the Event object

target is the original source. currentTarget is the element whose listener is currently executing.

Loading…

Prevent a default form action

Use preventDefault when JavaScript should handle a cancelable browser action.

Loading…

Use listener options for lifecycle

once removes a listener automatically. signal lets a component clean up related listeners.

Loading…

Playground

Loading editor…

Console

Press Run to execute the code and see output here.

Output Prediction

Predict the output #1

javascript

1const event = {
2  defaultPrevented: false,
3  propagationStopped: false,
4  preventDefault() {
5    this.defaultPrevented = true;
6  },
7  stopPropagation() {
8    this.propagationStopped = true;
9  }
10};
11 
12event.stopPropagation();
13console.log(event.defaultPrevented);
14console.log(event.propagationStopped);

Coding Exercises

Build a tiny listener dispatcher

Medium

Implement dispatch(listeners) where each listener receives an event-like object. If a listener calls stopImmediatePropagation, no later listeners should run. Return the names of listeners that ran.

Interview Questions

1What is the difference between `event.target` and `event.currentTarget`?

event.target is the original object where the event started. event.currentTarget is the object whose listener is currently running. During propagation, one target can produce many current targets as the event travels through ancestors.

Asked at:MetaMicrosoftGoogle

Follow-ups

How does this matter for event delegation?

2Compare `preventDefault`, `stopPropagation`, and `stopImmediatePropagation`.

preventDefault cancels a cancelable browser default action. stopPropagation stops the event from continuing to later ancestors. stopImmediatePropagation also prevents later listeners on the same current target from running.

Asked at:AmazonNetflix

Quiz

1. Which listener option automatically removes the listener after it runs once?

2. What does `preventDefault()` do?

Summary

Events are dispatched to listeners registered on EventTarget objects.
`target` is the source; `currentTarget` is the object currently handling the event.
`preventDefault` cancels default action; propagation methods control event travel and listener ordering.
Use options like `once`, `passive`, `capture`, and `signal` deliberately.

Cheat Sheet

Add: target.addEventListener(type, handler, options).

Remove: same handler reference and matching capture setting.

Event fields: type, target, currentTarget, defaultPrevented.

Cancel default: preventDefault().

Stop travel: stopPropagation().

Stop same-target listeners too: stopImmediatePropagation().

Options: { capture, once, passive, signal }.