Set 6 leaves the language behind and moves into the browser. You will see how events travel through the DOM, where to store data on the client, how fetch handles errors and cancelling, and the performance APIs that frontend interviewers like to ask about.
How to practise: read each question and tap the option you think is correct. You will see right away whether you got it, along with a short explanation, and your score is tracked at the bottom of the screen. This set has 15 questions.
Topics covered in this set
- Event capturing, bubbling and delegation
- preventDefault, stopPropagation and passive listeners
- localStorage, sessionStorage and cookies
- fetch, error handling and AbortController
- Debounce, throttle and requestAnimationFrame
- IntersectionObserver and CORS basics
JavaScript MCQs with answers and explanations
Q1. In which order do the three phases of DOM event propagation happen?
a) Target → bubbling → capturing
b) Only bubbling happens by default
c) Bubbling → target → capturing
d) Capturing → target → bubbling
Q2. A click on the button logs what?
outer.addEventListener('click', () => console.log('outer'));
btn.addEventListener('click', () => console.log('btn'));
outer.addEventListener('click', () => console.log('outer-cap'), true);
// btn is inside outer
a) outer, btn, outer-cap
b) btn, outer-cap, outer
c) btn, outer, outer-cap
d) outer-cap, btn, outer
Q3. What is event delegation?
a) Calling dispatchEvent on every child
b) Attaching one listener to a common ancestor and using event.target to handle events from many children
c) Passing an event to a Web Worker
d) Copying a listener to each new element
Q4. What is the difference between event.target and event.currentTarget?
a) They are always the same
b) currentTarget is the element that was clicked first
c) target is always document
d) target is the element where the event started; currentTarget is the element whose listener is running
Q5. What does event.preventDefault() do?
a) Stops all other listeners on the element
b) Removes the listener
c) Stops the event from bubbling
d) Cancels the browser's default action, such as following a link or submitting a form, but propagation continues
Q6. What does { passive: true } tell the browser when adding a touchstart or wheel listener?
a) The listener runs only once
b) The listener will not call preventDefault, so scrolling can start without waiting for it
c) The listener runs in the capture phase
d) The listener is removed after a timeout
Q7. Which statement about localStorage and sessionStorage is correct?
a) Both send their data to the server with every request
b) localStorage persists until cleared; sessionStorage is scoped to the tab and cleared when the tab closes
c) Both can store objects without conversion
d) sessionStorage is shared across all tabs of the origin
Q8. Which cookie attribute prevents JavaScript from reading the cookie through document.cookie?
a) SameSite
b) Path
c) Secure
d) HttpOnly
Q9. A fetch() call gets an HTTP 404 response. What happens?
a) The promise resolves with a Response whose ok property is false
b) The promise rejects
c) The browser retries automatically
d) fetch throws synchronously
Q10. How do you cancel an in-flight fetch request?
a) Pass an AbortController's signal to fetch and call controller.abort()
b) Set the response to null
c) Call fetch.cancel()
d) Use clearTimeout on the promise
Q11. A search box should call the API only after the user has stopped typing for 300 ms. Which technique fits?
a) Throttle
b) Polling
c) requestAnimationFrame
d) Debounce
Q12. Why is requestAnimationFrame preferred over setInterval for animations?
a) It runs the callback just before the next repaint and pauses in background tabs
b) It runs on a separate thread
c) It runs faster than the screen refresh rate
d) It never drops frames
Q13. What is IntersectionObserver commonly used for?
a) Detecting when an element enters or leaves the viewport, for lazy loading or infinite scroll
b) Measuring network speed
c) Detecting changes to element attributes
d) Watching localStorage changes
Q14. A page on https://app.example.com calls fetch on https://api.other.com and gets a CORS error. Where must the fix be made?
a) In the browser settings
b) By using XMLHttpRequest instead
c) On the api.other.com server, by sending a suitable Access-Control-Allow-Origin header
d) In the client code by adding mode: "no-cors"
Q15. When does a browser send a CORS preflight (OPTIONS) request?
a) For cross-origin requests that are not "simple", for example with a PUT method or a Content-Type of application/json
b) Only when cookies are present
c) For every cross-origin request
d) Only for same-origin requests
Quick revision notes
- Order: capture → target → bubble. Listeners run in the bubble phase by default.
- Delegation means one listener on the parent that checks event.target.
- preventDefault stops the default action. stopPropagation stops the event moving further.
- fetch rejects only on network errors or abort, so always check response.ok.
- Debounce waits for a pause. Throttle limits how often. CORS is fixed on the server.
Frequently asked questions
Where should I store an auth token in the browser?
An HttpOnly, Secure, SameSite cookie is usually safer than localStorage, because a script injected through XSS can't read it.
Can I use debounce and throttle without a library?
Yes. Each is a few lines with setTimeout and a closure. Libraries like lodash just add extras such as leading and trailing calls.
Does stopPropagation break event delegation?
It can. If a child's handler stops propagation, the parent's delegated listener never gets the event. Use it only when you really need it.
Comments
Post a Comment