Study notes · 10% of the exam

DOM, Events and Browser APIs

How the page is built, how events travel, what makes rendering slow, and the browser security rules that shape every front-end design.

Key points

1
Events capture down from window to the target, then bubble back up. target is where the event started; currentTarget is where the listener sits. Delegate with e.target.closest(selector).
2
stopPropagation stops other elements, stopImmediatePropagation also stops other listeners on the same element, and preventDefault cancels the default action. They are independent.
3
Reading geometry (offsetWidth, getBoundingClientRect, scrollTop) after a style write forces a synchronous layout. Batch reads before writes, and animate only transform and opacity.
4
defer and module scripts run in document order after parsing and before DOMContentLoaded; async scripts run as soon as they arrive. load waits for images.
5
fetch rejects only on network errors (check response.ok), a body can be read once, credentials default to same-origin, and there is no default timeout.
6
CORS limits what a page can read; it does not stop requests being sent, so it is not a CSRF defence. Use SameSite cookies, tokens and Origin checks.
7
Keep secrets out of reach of script: HttpOnly cookies, textContent instead of innerHTML, exact origin checks on postMessage, and a strict CSP.

Live collections from getElementsBy* shrink as you change them inside a loop; querySelectorAll returns a static list.
focus, blur, mouseenter and mouseleave do not bubble. Use focusin/focusout or a capture-phase listener for delegation.
A storage event never fires in the tab that made the change, and pushState never fires popstate.

Ten questions, with the answer and explanation after each one.