Episode 1 — Fundamentals / 1.15 — Event Handling in JavaScript

1.15.e — Browser & Window Events (DOMContentLoaded, load, resize, scroll)

In one sentence: Lifecycle events tell you when the DOM is ready and when everything has finished loading; resize and scroll track the viewport — all four need clear timing expectations and sometimes throttling or passive listeners.

Navigation: ← 1.15.d — classList & Events · 1.15 Overview

1. DOMContentLoaded (document)

Fires when HTML has been fully parsed and DOM is built — without waiting for images, stylesheets, or subframes to finish loading.

document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM ready — safe to query elements");
});

Use for: attaching listeners, initial DOM reads, bootstrapping UI that does not need every asset.

Deferred scripts (defer, type="module") run before DOMContentLoaded fires (after document parsed). Classic blocking scripts at end of body also see a ready DOM.

2. load (window)

Fires when the page and its subresources (images, stylesheets — at least those without async quirks) have loaded.

window.addEventListener("load", () => {
  console.log("Full load — measure image dimensions, init canvas with assets, etc.");
});

Use for: work that requires layout with images, WebGL textures, or “splash screen until assets ready.”

Order: DOMContentLoaded fires first (typically), then load later.

3. resize (window)

Fires when the viewport is resized (including mobile orientation changes).

window.addEventListener("resize", () => {
  console.log(window.innerWidth, window.innerHeight);
});

Throttle: resize can fire in rapid bursts — debounce/throttle expensive layout work.

Media-query-like logic in JS often reads matchMedia instead of only resize — advanced pattern.

4. scroll (window or element)

window.addEventListener("scroll", () => {
  console.log(window.scrollY);
}, { passive: true });

passive: true tells the browser you will not call preventDefault() in this listener, so scrolling can stay smooth (especially on touch devices).

Do not confuse window scroll with element scroll — attach to the scrolling container you care about.

5. Quick comparison

EventTargetTypical timing
DOMContentLoadeddocumentDOM parsed
loadwindowPage + main resources
resizewindowViewport size changed
scrollwindow / elementScroll position changed

6. Key takeaways

  1. DOMContentLoaded = “I can touch the DOM”; load = “heavy assets likely ready.”
  2. resize / scroll need performance hygiene (throttle, passive, avoid forced sync layout).
  3. Attach scroll to the element that actually scrolls (document.documentElement vs a div with overflow: auto).

Explain-It Challenge

Explain without notes:

  1. Why is DOMContentLoaded usually earlier than load?
  2. Why add { passive: true } to a scroll listener that only reads scrollY?
  3. Name one task better done in a load handler than in DOMContentLoaded.

Navigation: ← 1.15.d — classList & Events · 1.15 Overview