What is the same listener added twice?

Same function reference, type and capture flag: added once.

What is the onclick assigned twice?

The second assignment overwrites the first.

What is the default phase?

Bubble; capture needs { capture: true } or true.

What is the once: true?

Listener is removed automatically after its first call.

What is the passive: true?

A preventDefault() call inside the listener has no effect.

What is the removeEventListener match?

Type, same function reference and capture flag; otherwise no effect.

What is the stopPropagation()?

Stops ancestors; same-element listeners and default action still happen.

What is the stopImmediatePropagation()?

No remaining listener runs on this or any other element.

Browser and Events17% of the exam

Events, listeners and propagation

How addEventListener registers, deduplicates and removes listeners, how an event travels through the capture, target and bubble phases, and how to choose between stopPropagation, stopImmediatePropagation and preventDefault, delegate events to a parent, and dispatch custom events with detail and bubbles.

Official exam objective

Given a business requirement, utilize Events, event handlers, and propagation.

~8 min read · 14 practice questions · updated Oct 16, 2026

What the exam expects

Register, deduplicate and remove listeners with addEventListener, its options (once, capture, passive) and removeEventListener, and predict what an onclick property does alongside them.
Trace the order in which capture, target and bubble listeners run for one click.
Pick stopPropagation, stopImmediatePropagation or preventDefault from the requirement.
Implement event delegation with event.target, event.currentTarget and closest(), knowing which events bubble.
Dispatch custom events with detail and bubbles and predict when their listeners run.
Key terms: listener (a function registered for an event type on a target); propagation (the path an event takes through the target's ancestors); capture phase (window down to the target's parent); bubble phase (the target's parent back up to window); default action (what the browser does on its own, such as submitting a form); delegation (one listener on a parent handling events from its descendants).

Key facts

Fact	Detail	Source
Same listener added twice	Same function reference, type and capture flag: added once	addEventListener() (opens in a new tab)
`onclick` assigned twice	The second assignment overwrites the first	Introduction to events (opens in a new tab)
Default phase	Bubble; capture needs `{ capture: true }` or `true`	Event bubbling (opens in a new tab)
`once: true`	Listener is removed automatically after its first call	addEventListener() (opens in a new tab)
`passive: true`	A `preventDefault()` call inside the listener has no effect	addEventListener() (opens in a new tab)
`removeEventListener` match	Type, same function reference and capture flag; otherwise no effect	removeEventListener() (opens in a new tab)
`stopPropagation()`	Stops ancestors; same-element listeners and default action still happen	stopPropagation() (opens in a new tab)
`stopImmediatePropagation()`	No remaining listener runs on this or any other element	stopImmediatePropagation() (opens in a new tab)
`target` vs `currentTarget`	Deepest element fired on vs element whose listener is running	Event bubbling (opens in a new tab)
Non-bubbling events	`focus` and `mouseenter`; use `focusin` and `mouseover` to delegate	focus event (opens in a new tab)mouseenter event (opens in a new tab)
`Event`/`CustomEvent` defaults	`bubbles: false`, `cancelable: false`, `detail: null`	Event() (opens in a new tab)CustomEvent() (opens in a new tab)
`dispatchEvent()` timing	Listeners run synchronously before it returns	dispatchEvent() (opens in a new tab)

Same listener added twice

Detail: Same function reference, type and capture flag: added once
Source: addEventListener() (opens in a new tab)

onclick assigned twice

Detail: The second assignment overwrites the first
Source: Introduction to events (opens in a new tab)

Default phase

Detail: Bubble; capture needs { capture: true } or true
Source: Event bubbling (opens in a new tab)

once: true

Detail: Listener is removed automatically after its first call
Source: addEventListener() (opens in a new tab)

passive: true

Detail: A preventDefault() call inside the listener has no effect
Source: addEventListener() (opens in a new tab)

removeEventListener match

Detail: Type, same function reference and capture flag; otherwise no effect
Source: removeEventListener() (opens in a new tab)

stopPropagation()

Detail: Stops ancestors; same-element listeners and default action still happen
Source: stopPropagation() (opens in a new tab)

stopImmediatePropagation()

Detail: No remaining listener runs on this or any other element
Source: stopImmediatePropagation() (opens in a new tab)

target vs currentTarget

Detail: Deepest element fired on vs element whose listener is running
Source: Event bubbling (opens in a new tab)

Non-bubbling events

Detail: focus and mouseenter; use focusin and mouseover to delegate
Source: focus event (opens in a new tab)mouseenter event (opens in a new tab)

Event/CustomEvent defaults

Detail: bubbles: false, cancelable: false, detail: null
Source: Event() (opens in a new tab)CustomEvent() (opens in a new tab)

dispatchEvent() timing

Detail: Listeners run synchronously before it returns
Source: dispatchEvent() (opens in a new tab)

Sources for this section (11)

Check yourself

Why does a delegated listener on a list still handle items appended after it was registered?
When does `stopPropagation()` still let another listener run on the same element?
Why does a character counter wired to `change` on a `textarea` update only after the user clicks away?
Which two ways make a listener run only on the first click?
What does `event.detail` hold in a listener for `new CustomEvent('saved')` dispatched without options?

The questions are free to read. Answers with their sources and self-grading are included with the pack.

Keep reading with the JavaScript Developer pack

Core concepts
Exam traps
Worked scenario

The pack includes:

All 24 lessons of the JavaScript Developer guide, with reading progress
Interactive decision walks and step-by-step sequence steppers
Inline practice questions and one-click topic practice (14 questions for this lesson)
An official source cited for every claim
An AI tutor that answers from the guide
Unlimited timed practice exams

Get the pack Already own it? Sign in

What the exam expects

Key facts

Check yourself

Keep reading with the JavaScript Developer pack

Practice for the JavaScript Developer exam