The DOM ForestISSUE #18 of 21

event types · focus · blur · load · resize

NodetteVSThe Event Bubbler

Nodette saysFocus, blur, load, resize and scroll events track UI lifecycle and viewport changes.

focus/blur fire when elements gain/lose focus (use focusin/focusout if you need bubbling). load fires when the page or an image finishes; DOMContentLoaded when the DOM is ready (before images). resize and scroll fire often — throttle/debounce their handlers to stay smooth.

Power-ups you unlock

focus/blur (focusin/out bubble)
DOMContentLoaded (DOM ready) vs load (everything)
resize & scroll fire rapidly — throttle them
window-level lifecycle events

The Event Bubbler attacks — common mistakes

Heavy work directly in scroll/resize (jank)
Relying on load when DOMContentLoaded suffices
focus/blur not bubbling (use focusin/out)

Boss battleReport the window width on resize (throttled in your head) and on load.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><pre id="o"></pre>
<script>const o=document.getElementById('o');function show(){o.textContent='width: '+window.innerWidth;}show();window.addEventListener('resize',show);</script></body></html>

▶ Open the interactive comic issue

‹ Event Types · Pointer · Touch · Drag Custom Events · New CustomEvent · DispatchEvent ›