JavaScript DOM Events Bubbling & Capturing Quiz
Answer 30 questions on event propagation phases, capturing basics, target behavior, bubbling mechanics, addEventListener options, stopping propagation, preventing default actions, and event delegation techniques.
30 Questions
~60 minutes
1
Question 1
Which sequence describes the standard DOM event propagation order?
A
Capturing → Target → Bubbling
B
Bubbling → Target → Capturing
C
Target → Capturing → Bubbling
D
Capturing → Bubbling → Target
2
Question 2
Why is understanding all three phases important?
A
It lets developers position listeners to fire before or after ancestors, enabling analytics, vetoes, or delegated behaviors
B
Browsers randomly choose phases
C
Events only run in capturing
D
Bubbling never happens
3
Question 3
What defines the capturing phase?
A
Event travels from window/document down toward the target element
B
Event travels from target up to root
C
Event stays at target only
D
Event is canceled before dispatch
4
Question 4
When is capture-phase listening particularly helpful?
A
When you must intercept an event before descendants, e.g., to log analytics or block it early
B
When you only care about the final target
C
When events do not bubble
D
When preventing default on forms
5
Question 5
What logs?
javascript
document.addEventListener('click', () => console.log('doc capture'), true)
document.body.addEventListener('click', () => console.log('body capture'), true)
document.body.addEventListener('click', () => console.log('body bubble'))
button.addEventListener('click', () => console.log('button bubble'))
button.click()A
doc capture, body capture, button bubble, body bubble
B
button bubble, body bubble, doc capture, body capture
C
doc capture, body capture, body bubble, button bubble
D
body capture, doc capture, button bubble, body bubble
6
Question 6
What is special about the target phase?
A
Listeners on the target run regardless of capture flag—capturing listeners fire before bubbling listeners but both execute at the target
B
Target phase runs twice
C
Target phase only supports inline handlers
D
stopPropagation skips target listeners
7
Question 7
Why might two listeners on the same target fire in different phases?
A
One registered with capture=true executes during capture, the other with false during bubbling
B
Browsers alternate randomly
C
Target cannot have multiple listeners
D
Different event types merge
8
Question 8
What defines the bubbling phase?
A
Event travels from target up to document, triggering bubble listeners on ancestors
B
Event remains on the target
C
Event travels from document downwards
D
Event is canceled automatically
9
Question 9
Which events do not bubble by default in browsers?
A
focus and blur
B
click and keyup
C
submit and change
D
custom events
10
Question 10
What logs?
javascript
outer.addEventListener('click', () => console.log('outer bubble'))
inner.addEventListener('click', () => console.log('inner bubble'))
inner.click()
A
inner bubble, outer bubble
B
outer bubble, inner bubble
C
outer bubble only
D
inner bubble only
11
Question 11
What does the third argument (options) in addEventListener control?
A
Flags like capture, once, and passive
B
Event priority queue
C
DOM restructuring
D
CSS specificity
12
Question 12
How does capture: true affect listener execution?
A
Listener fires while event travels down, before target bubble listeners
B
Listener fires last
C
Listener never runs
D
Listener only runs once ever
13
Question 13
What logs?
javascript
const log = []
parent.addEventListener('click', () => log.push('parent capture'), { capture: true })
parent.addEventListener('click', () => log.push('parent bubble'))
child.addEventListener('click', () => log.push('child bubble'))
child.click()
console.log(log)A
["parent capture","child bubble","parent bubble"]
B
["child bubble","parent capture","parent bubble"]
C
["parent bubble","parent capture","child bubble"]
D
["child bubble"]
14
Question 14
What does event.stopPropagation do?
A
Prevents the event from moving to the next ancestor but still allows default behavior unless preventDefault is also called
B
Stops default browser actions
C
Pauses JavaScript execution
D
Cancels current listener
15
Question 15
How does stopImmediatePropagation differ?
A
It halts propagation and prevents other listeners on the same target/phase from running
B
It resumes propagation
C
It only works on document
D
It is identical to preventDefault
16
Question 16
What logs?
javascript
outer.addEventListener('click', () => console.log('outer'))
inner.addEventListener('click', (event) => {
console.log('inner')
event.stopPropagation()
})
inner.click()A
inner
B
outer
C
outer, inner
D
inner, outer
17
Question 17
What does event.preventDefault do?
A
Cancels the browser action associated with the event, such as navigating for links or submitting for forms
B
Stops propagation automatically
C
Removes the DOM node
D
Reloads the page
18
Question 18
Why might you pair preventDefault with custom validation?
A
It lets you stop form submission until client-side checks pass, then submit manually when valid
B
It speeds up network requests
C
It converts POST to GET
D
It bypasses CORS
19
Question 19
What logs?
javascript
document.querySelector('a').addEventListener('click', (event) => {
event.preventDefault()
console.log('link clicked but stayed on page')
})
document.querySelector('a').click()
A
link clicked but stayed on page
B
Navigation occurs without log
C
Throws TypeError
D
No output
20
Question 20
What is event delegation?
A
Attaching one listener on a common ancestor to handle events for dynamic child elements via event.target
B
Cloning nodes before events
C
Using capture only
D
Disabling bubbling
21
Question 21
Why is event delegation efficient for large lists?
A
It reduces the number of listeners and automatically supports elements added later
B
It prevents default actions
C
It disables capture phase
D
It forces passive behavior
22
Question 22
What logs?
javascript
list.addEventListener('click', (event) => {
if (event.target.matches('li')) {
console.log(event.target.dataset.id)
}
})
const li = document.createElement('li')
li.dataset.id = '42'
list.appendChild(li)
li.click()
A
42
B
undefined
C
No output because li added later
D
Throws TypeError
23
Question 23
What logs?
javascript
const log = []
window.addEventListener('click', () => log.push('window capture'), true)
document.addEventListener('click', () => log.push('document bubble'))
const div = document.createElement('div')
div.addEventListener('click', () => log.push('div bubble'))
document.body.append(div)
div.click()
console.log(log)A
["window capture","div bubble","document bubble"]
B
["div bubble","document bubble","window capture"]
C
["document bubble","div bubble"]
D
["window capture","document bubble","div bubble"]
24
Question 24
What logs?
javascript
const parent = document.getElementById('parent')
const child = document.getElementById('child')
parent.addEventListener('click', () => console.log('parent capture'), { capture: true })
child.addEventListener('click', () => console.log('child capture'), { capture: true })
child.addEventListener('click', () => console.log('child bubble'))
parent.addEventListener('click', () => console.log('parent bubble'))
child.click()
A
parent capture, child capture, child bubble, parent bubble
B
child capture, parent capture, child bubble, parent bubble
C
child bubble, parent bubble, parent capture, child capture
D
parent capture, child bubble, child capture, parent bubble
25
Question 25
What logs?
javascript
const result = []
const handler = (label) => (event) => {
result.push(label)
if (label === 'child bubble 1') event.stopImmediatePropagation()
}
child.addEventListener('click', handler('child bubble 1'))
child.addEventListener('click', handler('child bubble 2'))
parent.addEventListener('click', handler('parent bubble'))
child.click()
console.log(result)A
["child bubble 1"]
B
["child bubble 1","child bubble 2","parent bubble"]
C
["child bubble 1","parent bubble"]
D
["child bubble 1","child bubble 2"]
26
Question 26
What logs?
javascript
form.addEventListener('submit', (event) => {
event.preventDefault()
console.log('blocked', event.defaultPrevented)
})
form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
A
blocked true
B
blocked false
C
true blocked
D
No output
27
Question 27
What logs?
javascript
const panel = document.getElementById('panel')
panel.addEventListener('click', (event) => {
if (event.target.matches('button.remove')) {
console.log('removing', event.target.dataset.id)
}
})
const btn = document.createElement('button')
btn.className = 'remove'
btn.dataset.id = '7'
panel.append(btn)
btn.click()
A
removing 7
B
undefined
C
Throws TypeError
D
No output because appended later
28
Question 28
Why should passive: true be used on scroll or touch listeners?
A
It signals you will not call preventDefault, allowing browser optimizations for smoother scrolling
B
It forces capture phase
C
It guarantees listener runs once
D
It makes events bubble faster
29
Question 29
How does event.currentTarget differ from event.target in delegated handlers?
A
currentTarget is the element whose listener is running, while target is the original node that initiated the event
B
They are always identical
C
currentTarget points to window
D
target is only available during capturing
30
Question 30
Why should stopPropagation be used sparingly?
A
It can break unrelated features relying on bubbling, making behavior hard to predict and debug if overused
B
It deletes DOM nodes
C
It slows down events dramatically
D
Browsers warn users about it