PRACTICE • LEARN • GROW
Module 7 Final Quiz: The DOM & Events MCQs
Solve topic-wise placement questions and improve your skills.
Module 7 Final Quiz: The DOM & Events Progress
0 of 12 completed
0%
Topic Track
You are viewing MCQs in preview mode. Log in to select options, submit answers, and track your progress.
Log In to Answer
1
What is the DOM in browser environments?
A.
The Data Output Model
B.
A live, hierarchical tree of object nodes representing the HTML document in memory
C.
The browser's caching layer
D.
A server-side database protocol
Explanation & Key
Correct Answer:
2
What does
document.querySelector('.card') return if multiple elements match class 'card'?
A.
An array of all matching elements
B.
The very first element matching the selector in document tree order
C.
A NodeList
D.
null
Explanation & Key
Correct Answer:
3
Why is
element.textContent strongly preferred over element.innerHTML when rendering user-submitted text?
A.
textContent is slower than innerHTML
B.
textContent treats text literally and prevents Cross-Site Scripting (XSS) script injections
C.
innerHTML removes styling
D.
textContent can parse HTML tags
Explanation & Key
Correct Answer:
4
What does
element.classList.toggle('active') do?
A.
It always adds the class 'active'
B.
It always removes the class 'active'
C.
It adds 'active' if not present, or removes 'active' if already present
D.
It replaces all existing classes with 'active'
Explanation & Key
Correct Answer:
5
What are the three phases of DOM event propagation?
A.
Initialization, Execution, Termination
B.
Capturing phase, Target phase, and Bubbling phase
C.
Request phase, Response phase, Close phase
D.
Synchronous phase, Asynchronous phase, Microtask phase
Explanation & Key
Correct Answer:
6
By default, in which phase do listeners attached with
addEventListener('click', fn) fire?
A.
Capturing phase
B.
Bubbling phase
C.
Target phase only
D.
Rendering phase
Explanation & Key
Correct Answer:
7
What is the difference between
e.target and e.currentTarget inside an event handler?
A.
They are always identical
B.
e.target is the element that actually triggered the event; e.currentTarget is the element the event listener is attached to
C.
e.currentTarget is the child element, e.target is the parent
D.
e.target only works with mouse events
Explanation & Key
Correct Answer:
8
What does
e.preventDefault() accomplish in a form submit event handler?
A.
It stops the event from bubbling up the DOM
B.
It prevents the browser's default behavior of reloading the page and submitting a standard HTTP POST request
C.
It clears all form input fields
D.
It disables the submit button
Explanation & Key
Correct Answer:
9
What method stops an event from bubbling further up the DOM hierarchy?
A.
e.preventDefault()
B.
e.stopPropagation()
C.
e.cancel()
D.
e.detach()
Explanation & Key
Correct Answer:
10
What is Event Delegation in web development?
A.
Passing an event handler to a Web Worker
B.
Attaching a single event listener to a common ancestor element to handle events for all existing and dynamically added child elements via bubbling
C.
Dispatching custom synthetic events
D.
Overriding built-in browser events
Explanation & Key
Correct Answer:
11
Why does
removeEventListener('click', () => {}) fail to remove an existing listener?
A.
removeEventListener requires an element ID
B.
An anonymous arrow function creates a new unique memory reference that does not match the original listener reference
C.
removeEventListener is deprecated
D.
Listeners can only be removed before DOMContentLoaded
Explanation & Key
Correct Answer:
12
What is the primary difference between a NodeList returned by querySelectorAll and an HTMLCollection?
A.
NodeLists cannot be looped over
B.
querySelectorAll returns a static (non-live) NodeList that does not automatically update when DOM elements change; HTMLCollections are live
C.
HTMLCollection only holds text nodes
D.
NodeLists can only store div elements
Explanation & Key
Correct Answer:
Question Palette
Answered
Current
Not Attempted
Wrong
