MENU


Handling Document Events

Document event types
Category Event types
Lifecycle readystatechange, DOMContentLoaded
Focus focus, blur (no bubbling), focusin, focusout
Forms, CSS submit, invalid, animationend, transitionend
Drag and drop dragstart, dragover, drop, dragend
The order of loading eventsHTMLLive
<output></output>
<script>
  const log = (text) => document.querySelector("output").append(text, " > ");
  document.addEventListener("readystatechange", () => log(document.readyState));
  document.addEventListener("DOMContentLoaded", () => log("DOMContentLoaded"));
  addEventListener("load", () => log("load"));
  log(`script (${document.readyState})`);
</script>
Browser output of Listing 8.45
Browser output of 45

A drop zone must cancel dragover, or the browser refuses the drop. Mutation events such as DOMNodeInserted no longer fire in Chrome 152 1 ; use MutationObserver (MutationObserver).