diff --git a/files/en-us/learn_web_development/core/scripting/loops/index.md b/files/en-us/learn_web_development/core/scripting/loops/index.md
index de9d292dd8972bf..9ad888edc334ab5 100644
--- a/files/en-us/learn_web_development/core/scripting/loops/index.md
+++ b/files/en-us/learn_web_development/core/scripting/loops/index.md
@@ -73,10 +73,8 @@ const btn = document.querySelector("button");
 const canvas = document.querySelector("canvas");
 const ctx = canvas.getContext("2d");
 
-document.addEventListener("DOMContentLoaded", () => {
-  canvas.width = document.documentElement.clientWidth;
-  canvas.height = document.documentElement.clientHeight;
-});
+canvas.width = document.documentElement.clientWidth;
+canvas.height = document.documentElement.clientHeight;
 
 function random(number) {
   return Math.floor(Math.random() * number);
diff --git a/files/en-us/learn_web_development/extensions/forms/form_validation/index.md b/files/en-us/learn_web_development/extensions/forms/form_validation/index.md
index 0c6ee09f4f6d1a8..86d46e1c9afb561 100644
--- a/files/en-us/learn_web_development/extensions/forms/form_validation/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/form_validation/index.md
@@ -800,8 +800,8 @@ const setEmailClass = (isValid) => {
 };
 
 // Update error message and visibility
-const updateError = (isValidInput) => {
-  if (isValidInput) {
+const updateError = (isValid) => {
+  if (isValid) {
     error.textContent = "";
     error.removeAttribute("class");
   } else {
@@ -810,32 +810,27 @@ const updateError = (isValidInput) => {
   }
 };
 
-// Initialize email validity on page load
-const initializeValidation = () => {
-  const emailInput = isValidEmail();
-  setEmailClass(emailInput);
-};
-
 // Handle input event to update email validity
 const handleInput = () => {
-  const emailInput = isValidEmail();
-  setEmailClass(emailInput);
-  updateError(emailInput);
+  const validity = isValidEmail();
+  setEmailClass(validity);
+  updateError(validity);
 };
 
 // Handle form submission to show error if email is invalid
 const handleSubmit = (event) => {
   event.preventDefault();
 
-  const emailInput = isValidEmail();
-  setEmailClass(emailInput);
-  updateError(emailInput);
+  const validity = isValidEmail();
+  setEmailClass(validity);
+  updateError(validity);
 };
 
 // Now we can rebuild our validation constraint
 // Because we do not rely on CSS pseudo-class, we have to
 // explicitly set the valid/invalid class on our email field
-window.addEventListener("load", initializeValidation);
+const validity = isValidEmail();
+setEmailClass(validity);
 // This defines what happens when the user types in the field
 email.addEventListener("input", handleInput);
 // This defines what happens when the user tries to submit the data
diff --git a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_2/index.md b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_2/index.md
index c5ccff8c89dc598..42d95f81cd4d2ca 100644
--- a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_2/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_2/index.md
@@ -159,12 +159,10 @@ This is the second example that explain [how to build custom form widgets](/en-U
 ### JavaScript
 
 ```js
-window.addEventListener("load", () => {
-  const form = document.querySelector("form");
+const form = document.querySelector("form");
 
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
+form.classList.remove("no-widget");
+form.classList.add("widget");
 ```
 
 ### Result
diff --git a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_3/index.md b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_3/index.md
index 28598fb3b7545d2..254cffb8496295c 100644
--- a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_3/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_3/index.md
@@ -199,42 +199,38 @@ function highlightOption(select, option) {
 // Event binding //
 // ------------- //
 
-window.addEventListener("load", () => {
-  const form = document.querySelector("form");
+const form = document.querySelector("form");
 
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
+form.classList.remove("no-widget");
+form.classList.add("widget");
 
-window.addEventListener("load", () => {
-  const selectList = document.querySelectorAll(".select");
+const selectList = document.querySelectorAll(".select");
 
-  selectList.forEach((select) => {
-    const optionList = select.querySelectorAll(".option");
+selectList.forEach((select) => {
+  const optionList = select.querySelectorAll(".option");
 
-    optionList.forEach((option) => {
-      option.addEventListener("mouseover", () => {
-        highlightOption(select, option);
-      });
+  optionList.forEach((option) => {
+    option.addEventListener("mouseover", () => {
+      highlightOption(select, option);
     });
+  });
 
-    select.addEventListener("click", (event) => {
-      toggleOptList(select);
-    });
+  select.addEventListener("click", (event) => {
+    toggleOptList(select);
+  });
 
-    select.addEventListener("focus", (event) => {
-      activeSelect(select, selectList);
-    });
+  select.addEventListener("focus", (event) => {
+    activeSelect(select, selectList);
+  });
 
-    select.addEventListener("blur", (event) => {
-      deactivateSelect(select);
-    });
+  select.addEventListener("blur", (event) => {
+    deactivateSelect(select);
+  });
 
-    select.addEventListener("keyup", (event) => {
-      if (event.key === "Escape") {
-        deactivateSelect(select);
-      }
-    });
+  select.addEventListener("keyup", (event) => {
+    if (event.key === "Escape") {
+      deactivateSelect(select);
+    }
   });
 });
 ```
diff --git a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_4/index.md b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_4/index.md
index 2464c664206c7b3..064ec7a69922690 100644
--- a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_4/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_4/index.md
@@ -215,78 +215,72 @@ function getIndex(select) {
 // Event binding //
 // ------------- //
 
-window.addEventListener("load", () => {
-  const form = document.querySelector("form");
+const form = document.querySelector("form");
 
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
+form.classList.remove("no-widget");
+form.classList.add("widget");
 
-window.addEventListener("load", () => {
-  const selectList = document.querySelectorAll(".select");
+const selectList = document.querySelectorAll(".select");
 
-  selectList.forEach((select) => {
-    const optionList = select.querySelectorAll(".option");
+selectList.forEach((select) => {
+  const optionList = select.querySelectorAll(".option");
 
-    optionList.forEach((option) => {
-      option.addEventListener("mouseover", () => {
-        highlightOption(select, option);
-      });
+  optionList.forEach((option) => {
+    option.addEventListener("mouseover", () => {
+      highlightOption(select, option);
     });
+  });
 
-    select.addEventListener("click", (event) => {
-      toggleOptList(select);
-    });
+  select.addEventListener("click", (event) => {
+    toggleOptList(select);
+  });
 
-    select.addEventListener("focus", (event) => {
-      activeSelect(select, selectList);
-    });
+  select.addEventListener("focus", (event) => {
+    activeSelect(select, selectList);
+  });
 
-    select.addEventListener("blur", (event) => {
-      deactivateSelect(select);
-    });
+  select.addEventListener("blur", (event) => {
+    deactivateSelect(select);
   });
 });
 
-window.addEventListener("load", () => {
-  const selectList = document.querySelectorAll(".select");
+const selectList = document.querySelectorAll(".select");
 
-  selectList.forEach((select) => {
-    const optionList = select.querySelectorAll(".option");
-    const selectedIndex = getIndex(select);
+selectList.forEach((select) => {
+  const optionList = select.querySelectorAll(".option");
+  const selectedIndex = getIndex(select);
 
-    select.tabIndex = 0;
-    select.previousElementSibling.tabIndex = -1;
+  select.tabIndex = 0;
+  select.previousElementSibling.tabIndex = -1;
 
-    updateValue(select, selectedIndex);
+  updateValue(select, selectedIndex);
 
-    optionList.forEach((option, index) => {
-      option.addEventListener("click", (event) => {
-        updateValue(select, index);
-      });
+  optionList.forEach((option, index) => {
+    option.addEventListener("click", (event) => {
+      updateValue(select, index);
     });
+  });
 
-    select.addEventListener("keyup", (event) => {
-      let index = getIndex(select);
-
-      if (event.key === "Escape") {
-        deactivateSelect(select);
-      }
-      if (event.key === "ArrowDown" && index < optionList.length - 1) {
-        index++;
-        event.preventDefault();
-      }
-      if (event.key === "ArrowUp" && index > 0) {
-        index--;
-        event.preventDefault();
-      }
-
-      if (event.key === "Enter" || event.key === " ") {
-        toggleOptList(select);
-      }
+  select.addEventListener("keyup", (event) => {
+    let index = getIndex(select);
 
-      updateValue(select, index);
-    });
+    if (event.key === "Escape") {
+      deactivateSelect(select);
+    }
+    if (event.key === "ArrowDown" && index < optionList.length - 1) {
+      index++;
+      event.preventDefault();
+    }
+    if (event.key === "ArrowUp" && index > 0) {
+      index--;
+      event.preventDefault();
+    }
+
+    if (event.key === "Enter" || event.key === " ") {
+      toggleOptList(select);
+    }
+
+    updateValue(select, index);
   });
 });
 ```
diff --git a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_5/index.md b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_5/index.md
index 4c2a2ee19c84e49..22f3ae38bedea04 100644
--- a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_5/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_5/index.md
@@ -221,68 +221,64 @@ function getIndex(select) {
 // Event binding //
 // ------------- //
 
-window.addEventListener("load", () => {
-  const form = document.querySelector("form");
+const form = document.querySelector("form");
 
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
-
-window.addEventListener("load", () => {
-  const selectList = document.querySelectorAll(".select");
+form.classList.remove("no-widget");
+form.classList.add("widget");
 
-  selectList.forEach((select) => {
-    const optionList = select.querySelectorAll(".option");
-    const selectedIndex = getIndex(select);
+const selectList = document.querySelectorAll(".select");
 
-    select.tabIndex = 0;
-    select.previousElementSibling.tabIndex = -1;
+selectList.forEach((select) => {
+  const optionList = select.querySelectorAll(".option");
+  const selectedIndex = getIndex(select);
 
-    updateValue(select, selectedIndex);
+  select.tabIndex = 0;
+  select.previousElementSibling.tabIndex = -1;
 
-    optionList.forEach((option, index) => {
-      option.addEventListener("mouseover", () => {
-        highlightOption(select, option);
-      });
+  updateValue(select, selectedIndex);
 
-      option.addEventListener("click", (event) => {
-        updateValue(select, index);
-      });
+  optionList.forEach((option, index) => {
+    option.addEventListener("mouseover", () => {
+      highlightOption(select, option);
     });
 
-    select.addEventListener("click", (event) => {
-      toggleOptList(select);
+    option.addEventListener("click", (event) => {
+      updateValue(select, index);
     });
+  });
 
-    select.addEventListener("focus", (event) => {
-      activeSelect(select, selectList);
-    });
+  select.addEventListener("click", (event) => {
+    toggleOptList(select);
+  });
 
-    select.addEventListener("blur", (event) => {
-      deactivateSelect(select);
-    });
+  select.addEventListener("focus", (event) => {
+    activeSelect(select, selectList);
+  });
 
-    select.addEventListener("keyup", (event) => {
-      let index = getIndex(select);
-
-      if (event.key === "Escape") {
-        deactivateSelect(select);
-      }
-      if (event.key === "ArrowDown" && index < optionList.length - 1) {
-        index++;
-        event.preventDefault();
-      }
-      if (event.key === "ArrowUp" && index > 0) {
-        index--;
-        event.preventDefault();
-      }
-
-      if (event.key === "Enter" || event.key === " ") {
-        toggleOptList(select);
-      }
+  select.addEventListener("blur", (event) => {
+    deactivateSelect(select);
+  });
 
-      updateValue(select, index);
-    });
+  select.addEventListener("keyup", (event) => {
+    let index = getIndex(select);
+
+    if (event.key === "Escape") {
+      deactivateSelect(select);
+    }
+    if (event.key === "ArrowDown" && index < optionList.length - 1) {
+      index++;
+      event.preventDefault();
+    }
+    if (event.key === "ArrowUp" && index > 0) {
+      index--;
+      event.preventDefault();
+    }
+
+    if (event.key === "Enter" || event.key === " ") {
+      toggleOptList(select);
+    }
+
+    updateValue(select, index);
   });
 });
 ```
diff --git a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md
index cdc4d79bb2b5fad..088a4c7873c482a 100644
--- a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md
@@ -713,10 +713,8 @@ This CSS visually hides one of the elements, but it is still available to screen
 Now we need a JavaScript switch to determine if the script is running or not. This switch is a couple of lines: if at page load time our script is running, it will remove the `no-widget` class and add the `widget` class, thereby swapping the visibility of the {{HTMLElement("select")}} element and the custom control.
 
 ```js
-window.addEventListener("load", () => {
-  document.body.classList.remove("no-widget");
-  document.body.classList.add("widget");
-});
+document.body.classList.remove("no-widget");
+document.body.classList.add("widget");
 ```
 
 #### Without JS
@@ -898,12 +896,10 @@ Check out the [full source code](/en-US/docs/Learn_web_development/Extensions/Fo
 ```
 
 ```js hidden
-window.addEventListener("load", () => {
-  const form = document.querySelector("form");
+const form = document.querySelector("form");
 
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
+form.classList.remove("no-widget");
+form.classList.add("widget");
 ```
 
 {{EmbedLiveSample("With_JS",120,130)}}
@@ -995,60 +991,57 @@ You need these to handle the various states of custom control.
 Next, we bind these functions to the appropriate events:
 
 ```js
-// We handle the event binding when the document is loaded.
-window.addEventListener("load", () => {
-  const selectList = document.querySelectorAll(".select");
-
-  // Each custom control needs to be initialized
-  selectList.forEach((select) => {
-    // as well as all its `option` elements
-    const optionList = select.querySelectorAll(".option");
-
-    // Each time a user hovers their mouse over an option, we highlight the given option
-    optionList.forEach((option) => {
-      option.addEventListener("mouseover", () => {
-        // Note: the `select` and `option` variable are closures
-        // available in the scope of our function call.
-        highlightOption(select, option);
-      });
-    });
+const selectList = document.querySelectorAll(".select");
 
-    // Each times the user clicks on or taps a custom select element
-    select.addEventListener("click", (event) => {
-      // Note: the `select` variable is a closure
-      // available in the scope of our function call.
+// Each custom control needs to be initialized
+selectList.forEach((select) => {
+  // as well as all its `option` elements
+  const optionList = select.querySelectorAll(".option");
 
-      // We toggle the visibility of the list of options
-      toggleOptList(select);
+  // Each time a user hovers their mouse over an option, we highlight the given option
+  optionList.forEach((option) => {
+    option.addEventListener("mouseover", () => {
+      // Note: the `select` and `option` variable are closures
+      // available in the scope of our function call.
+      highlightOption(select, option);
     });
+  });
 
-    // In case the control gains focus
-    // The control gains the focus each time the user clicks on it or each time
-    // they use the tabulation key to access the control
-    select.addEventListener("focus", (event) => {
-      // Note: the `select` and `selectList` variable are closures
-      // available in the scope of our function call.
+  // Each times the user clicks on or taps a custom select element
+  select.addEventListener("click", (event) => {
+    // Note: the `select` variable is a closure
+    // available in the scope of our function call.
 
-      // We activate the control
-      activeSelect(select, selectList);
-    });
+    // We toggle the visibility of the list of options
+    toggleOptList(select);
+  });
 
-    // In case the control loses focus
-    select.addEventListener("blur", (event) => {
-      // Note: the `select` variable is a closure
-      // available in the scope of our function call.
+  // In case the control gains focus
+  // The control gains the focus each time the user clicks on it or each time
+  // they use the tabulation key to access the control
+  select.addEventListener("focus", (event) => {
+    // Note: the `select` and `selectList` variable are closures
+    // available in the scope of our function call.
 
-      // We deactivate the control
-      deactivateSelect(select);
-    });
+    // We activate the control
+    activeSelect(select, selectList);
+  });
 
-    // Loose focus if the user hits `esc`
-    select.addEventListener("keyup", (event) => {
-      // deactivate on keyup of `esc`
-      if (event.key === "Escape") {
-        deactivateSelect(select);
-      }
-    });
+  // In case the control loses focus
+  select.addEventListener("blur", (event) => {
+    // Note: the `select` variable is a closure
+    // available in the scope of our function call.
+
+    // We deactivate the control
+    deactivateSelect(select);
+  });
+
+  // Loose focus if the user hits `esc`
+  select.addEventListener("keyup", (event) => {
+    // deactivate on keyup of `esc`
+    if (event.key === "Escape") {
+      deactivateSelect(select);
+    }
   });
 });
 ```
@@ -1227,46 +1220,42 @@ function highlightOption(select, option) {
   option.classList.add("highlight");
 }
 
-window.addEventListener("load", () => {
-  const form = document.querySelector("form");
+const form = document.querySelector("form");
 
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
+form.classList.remove("no-widget");
+form.classList.add("widget");
 
-window.addEventListener("load", () => {
-  const selectList = document.querySelectorAll(".select");
+const selectList = document.querySelectorAll(".select");
 
-  selectList.forEach((select) => {
-    const optionList = select.querySelectorAll(".option");
+selectList.forEach((select) => {
+  const optionList = select.querySelectorAll(".option");
 
-    optionList.forEach((option) => {
-      option.addEventListener("mouseover", () => {
-        highlightOption(select, option);
-      });
+  optionList.forEach((option) => {
+    option.addEventListener("mouseover", () => {
+      highlightOption(select, option);
     });
+  });
 
-    select.addEventListener(
-      "click",
-      (event) => {
-        toggleOptList(select);
-      },
-      false,
-    );
+  select.addEventListener(
+    "click",
+    (event) => {
+      toggleOptList(select);
+    },
+    false,
+  );
 
-    select.addEventListener("focus", (event) => {
-      activeSelect(select, selectList);
-    });
+  select.addEventListener("focus", (event) => {
+    activeSelect(select, selectList);
+  });
 
-    select.addEventListener("blur", (event) => {
-      deactivateSelect(select);
-    });
+  select.addEventListener("blur", (event) => {
+    deactivateSelect(select);
+  });
 
-    select.addEventListener("keyup", (event) => {
-      if (event.key === "Escape") {
-        deactivateSelect(select);
-      }
-    });
+  select.addEventListener("keyup", (event) => {
+    if (event.key === "Escape") {
+      deactivateSelect(select);
+    }
   });
 });
 ```
@@ -1322,60 +1311,57 @@ function getIndex(select) {
 With these two functions, we can bind the native controls to the custom ones:
 
 ```js
-// We handle event binding when the document is loaded.
-window.addEventListener("load", () => {
-  const selectList = document.querySelectorAll(".select");
+const selectList = document.querySelectorAll(".select");
 
-  // Each custom control needs to be initialized
-  selectList.forEach((select) => {
-    const optionList = select.querySelectorAll(".option");
-    const selectedIndex = getIndex(select);
+// Each custom control needs to be initialized
+selectList.forEach((select) => {
+  const optionList = select.querySelectorAll(".option");
+  const selectedIndex = getIndex(select);
 
-    // We make our custom control focusable
-    select.tabIndex = 0;
+  // We make our custom control focusable
+  select.tabIndex = 0;
 
-    // We make the native control no longer focusable
-    select.previousElementSibling.tabIndex = -1;
+  // We make the native control no longer focusable
+  select.previousElementSibling.tabIndex = -1;
 
-    // We make sure that the default selected value is correctly displayed
-    updateValue(select, selectedIndex);
+  // We make sure that the default selected value is correctly displayed
+  updateValue(select, selectedIndex);
 
-    // Each time a user clicks on an option, we update the value accordingly
-    optionList.forEach((option, index) => {
-      option.addEventListener("click", (event) => {
-        updateValue(select, index);
-      });
+  // Each time a user clicks on an option, we update the value accordingly
+  optionList.forEach((option, index) => {
+    option.addEventListener("click", (event) => {
+      updateValue(select, index);
     });
+  });
 
-    // Each time a user uses their keyboard on a focused control, we update the value accordingly
-    select.addEventListener("keyup", (event) => {
-      let index = getIndex(select);
-      // When the user hits the Escape key, deactivate the custom control
-      if (event.key === "Escape") {
-        deactivateSelect(select);
-      }
-
-      // When the user hits the down arrow, we jump to the next option
-      if (event.key === "ArrowDown" && index < optionList.length - 1) {
-        index++;
-        // Prevent the default action of the ArrowDown key press.
-        // Without this, the page would scroll down when the ArrowDown key is pressed.
-        event.preventDefault();
-      }
-
-      // When the user hits the up arrow, we jump to the previous option
-      if (event.key === "ArrowUp" && index > 0) {
-        index--;
-        // Prevent the default action of the ArrowUp key press.
-        event.preventDefault();
-      }
-      if (event.key === "Enter" || event.key === " ") {
-        // If Enter or Space is pressed, toggle the option list
-        toggleOptList(select);
-      }
+  // Each time a user uses their keyboard on a focused control, we update the value accordingly
+  select.addEventListener("keyup", (event) => {
+    let index = getIndex(select);
+    // When the user hits the Escape key, deactivate the custom control
+    if (event.key === "Escape") {
+      deactivateSelect(select);
+    }
+
+    // When the user hits the down arrow, we jump to the next option
+    if (event.key === "ArrowDown" && index < optionList.length - 1) {
+      index++;
+      // Prevent the default action of the ArrowDown key press.
+      // Without this, the page would scroll down when the ArrowDown key is pressed.
+      event.preventDefault();
+    }
+
+    // When the user hits the up arrow, we jump to the previous option
+    if (event.key === "ArrowUp" && index > 0) {
+      index--;
+      // Prevent the default action of the ArrowUp key press.
+      event.preventDefault();
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      // If Enter or Space is pressed, toggle the option list
+      toggleOptList(select);
+    }
 
-      updateValue(select, index);
-    });
+    updateValue(select, index);
   });
 });
 ```
@@ -1572,72 +1558,66 @@ function getIndex(select) {
   return nativeWidget.selectedIndex;
 }
 
-window.addEventListener("load", () => {
-  const form = document.querySelector("form");
+const form = document.querySelector("form");
 
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
+form.classList.remove("no-widget");
+form.classList.add("widget");
 
-window.addEventListener("load", () => {
-  const selectList = document.querySelectorAll(".select");
+const selectList = document.querySelectorAll(".select");
 
-  selectList.forEach((select) => {
-    const optionList = select.querySelectorAll(".option");
+selectList.forEach((select) => {
+  const optionList = select.querySelectorAll(".option");
 
-    optionList.forEach((option) => {
-      option.addEventListener("mouseover", () => {
-        highlightOption(select, option);
-      });
+  optionList.forEach((option) => {
+    option.addEventListener("mouseover", () => {
+      highlightOption(select, option);
     });
+  });
 
-    select.addEventListener("click", (event) => {
-      toggleOptList(select);
-    });
+  select.addEventListener("click", (event) => {
+    toggleOptList(select);
+  });
 
-    select.addEventListener("focus", (event) => {
-      activeSelect(select, selectList);
-    });
+  select.addEventListener("focus", (event) => {
+    activeSelect(select, selectList);
+  });
 
-    select.addEventListener("blur", (event) => {
-      deactivateSelect(select);
-    });
+  select.addEventListener("blur", (event) => {
+    deactivateSelect(select);
   });
 });
 
-window.addEventListener("load", () => {
-  const selectList = document.querySelectorAll(".select");
+const selectList = document.querySelectorAll(".select");
 
-  selectList.forEach((select) => {
-    const optionList = select.querySelectorAll(".option");
-    const selectedIndex = getIndex(select);
+selectList.forEach((select) => {
+  const optionList = select.querySelectorAll(".option");
+  const selectedIndex = getIndex(select);
 
-    select.tabIndex = 0;
-    select.previousElementSibling.tabIndex = -1;
+  select.tabIndex = 0;
+  select.previousElementSibling.tabIndex = -1;
 
-    updateValue(select, selectedIndex);
+  updateValue(select, selectedIndex);
 
-    optionList.forEach((option, index) => {
-      option.addEventListener("click", (event) => {
-        updateValue(select, index);
-      });
+  optionList.forEach((option, index) => {
+    option.addEventListener("click", (event) => {
+      updateValue(select, index);
     });
+  });
 
-    select.addEventListener("keyup", (event) => {
-      let index = getIndex(select);
-
-      if (event.key === "Escape") {
-        deactivateSelect(select);
-      }
-      if (event.key === "ArrowDown" && index < optionList.length - 1) {
-        index++;
-      }
-      if (event.key === "ArrowUp" && index > 0) {
-        index--;
-      }
+  select.addEventListener("keyup", (event) => {
+    let index = getIndex(select);
 
-      updateValue(select, index);
-    });
+    if (event.key === "Escape") {
+      deactivateSelect(select);
+    }
+    if (event.key === "ArrowDown" && index < optionList.length - 1) {
+      index++;
+    }
+    if (event.key === "ArrowUp" && index > 0) {
+      index--;
+    }
+
+    updateValue(select, index);
   });
 });
 ```
@@ -1903,62 +1883,58 @@ function getIndex(select) {
   return nativeWidget.selectedIndex;
 }
 
-window.addEventListener("load", () => {
-  const form = document.querySelector("form");
+const form = document.querySelector("form");
 
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
+form.classList.remove("no-widget");
+form.classList.add("widget");
 
-window.addEventListener("load", () => {
-  const selectList = document.querySelectorAll(".select");
+const selectList = document.querySelectorAll(".select");
 
-  selectList.forEach((select) => {
-    const optionList = select.querySelectorAll(".option");
-    const selectedIndex = getIndex(select);
-
-    select.tabIndex = 0;
-    select.previousElementSibling.tabIndex = -1;
+selectList.forEach((select) => {
+  const optionList = select.querySelectorAll(".option");
+  const selectedIndex = getIndex(select);
 
-    updateValue(select, selectedIndex);
+  select.tabIndex = 0;
+  select.previousElementSibling.tabIndex = -1;
 
-    optionList.forEach((option, index) => {
-      option.addEventListener("mouseover", () => {
-        highlightOption(select, option);
-      });
+  updateValue(select, selectedIndex);
 
-      option.addEventListener("click", (event) => {
-        updateValue(select, index);
-      });
+  optionList.forEach((option, index) => {
+    option.addEventListener("mouseover", () => {
+      highlightOption(select, option);
     });
 
-    select.addEventListener("click", (event) => {
-      toggleOptList(select);
+    option.addEventListener("click", (event) => {
+      updateValue(select, index);
     });
+  });
 
-    select.addEventListener("focus", (event) => {
-      activeSelect(select, selectList);
-    });
+  select.addEventListener("click", (event) => {
+    toggleOptList(select);
+  });
 
-    select.addEventListener("blur", (event) => {
-      deactivateSelect(select);
-    });
+  select.addEventListener("focus", (event) => {
+    activeSelect(select, selectList);
+  });
 
-    select.addEventListener("keyup", (event) => {
-      let index = getIndex(select);
+  select.addEventListener("blur", (event) => {
+    deactivateSelect(select);
+  });
 
-      if (event.key === "Escape") {
-        deactivateSelect(select);
-      }
-      if (event.key === "ArrowDown" && index < optionList.length - 1) {
-        index++;
-      }
-      if (event.key === "ArrowUp" && index > 0) {
-        index--;
-      }
+  select.addEventListener("keyup", (event) => {
+    let index = getIndex(select);
 
-      updateValue(select, index);
-    });
+    if (event.key === "Escape") {
+      deactivateSelect(select);
+    }
+    if (event.key === "ArrowDown" && index < optionList.length - 1) {
+      index++;
+    }
+    if (event.key === "ArrowUp" && index > 0) {
+      index--;
+    }
+
+    updateValue(select, index);
   });
 });
 ```
diff --git a/files/en-us/learn_web_development/extensions/forms/ui_pseudo-classes/index.md b/files/en-us/learn_web_development/extensions/forms/ui_pseudo-classes/index.md
index eabeeb7c0347669..1d6d6f25e8f90c5 100644
--- a/files/en-us/learn_web_development/extensions/forms/ui_pseudo-classes/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/ui_pseudo-classes/index.md
@@ -822,17 +822,10 @@ We've directly selected the inputs we want to disable using `input[type="text"]:
 Now finally, we've used some JavaScript to toggle the disabling of the billing address fields:
 
 ```js
-// Wait for the page to finish loading
-document.addEventListener(
-  "DOMContentLoaded",
-  () => {
-    // Attach `change` event listener to checkbox
-    document
-      .getElementById("billing-checkbox")
-      .addEventListener("change", toggleBilling);
-  },
-  false,
-);
+// Attach `change` event listener to checkbox
+document
+  .getElementById("billing-checkbox")
+  .addEventListener("change", toggleBilling);
 
 function toggleBilling() {
   // Select the billing text fields
@@ -955,17 +948,10 @@ button {
 ```
 
 ```js hidden live-sample___enabled-disabled-shipping
-// Wait for the page to finish loading
-document.addEventListener(
-  "DOMContentLoaded",
-  () => {
-    // Attach `change` event listener to checkbox
-    document
-      .getElementById("billing-checkbox")
-      .addEventListener("change", toggleBilling);
-  },
-  false,
-);
+// Attach `change` event listener to checkbox
+document
+  .getElementById("billing-checkbox")
+  .addEventListener("change", toggleBilling);
 
 function toggleBilling() {
   // Select the billing text fields
diff --git a/files/en-us/web/accessibility/aria/reference/roles/tab_role/index.md b/files/en-us/web/accessibility/aria/reference/roles/tab_role/index.md
index ec8484be7fc9336..2cb030f8364e1fb 100644
--- a/files/en-us/web/accessibility/aria/reference/roles/tab_role/index.md
+++ b/files/en-us/web/accessibility/aria/reference/roles/tab_role/index.md
@@ -161,43 +161,41 @@ To accomplish the first, we listen for the [`keydown`](/en-US/docs/Web/API/Eleme
 To handle changing the active `tab` and `tabpanel`, we have a function that takes in the event, gets the element that triggered the event, the triggering element's parent element, and its grandparent element. We then find all tabs with `aria-selected="true"` inside the parent element and sets it to `false`, then sets the triggering element's `aria-selected` to `true`. After that, we find all `tabpanel` elements in the grandparent element, make them all `hidden`, and finally select the element whose `id` is equal to the triggering `tab`'s `aria-controls` and removes the `hidden` attribute, making it visible.
 
 ```js
-window.addEventListener("DOMContentLoaded", () => {
-  // Only handle one particular tablist; if you have multiple tab
-  // lists (might even be nested), you have to apply this code for each one
-  const tabList = document.querySelector('[role="tablist"]');
-  const tabs = tabList.querySelectorAll(':scope > [role="tab"]');
-
-  // Add a click event handler to each tab
-  tabs.forEach((tab) => {
-    tab.addEventListener("click", changeTabs);
-  });
-
-  // Enable arrow navigation between tabs in the tab list
-  let tabFocus = 0;
-
-  tabList.addEventListener("keydown", (e) => {
-    // Move right
-    if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
-      tabs[tabFocus].setAttribute("tabindex", -1);
-      if (e.key === "ArrowRight") {
-        tabFocus++;
-        // If we're at the end, go to the start
-        if (tabFocus >= tabs.length) {
-          tabFocus = 0;
-        }
-        // Move left
-      } else if (e.key === "ArrowLeft") {
-        tabFocus--;
-        // If we're at the start, move to the end
-        if (tabFocus < 0) {
-          tabFocus = tabs.length - 1;
-        }
-      }
+// Only handle one particular tablist; if you have multiple tab
+// lists (might even be nested), you have to apply this code for each one
+const tabList = document.querySelector('[role="tablist"]');
+const tabs = tabList.querySelectorAll(':scope > [role="tab"]');
+
+// Add a click event handler to each tab
+tabs.forEach((tab) => {
+  tab.addEventListener("click", changeTabs);
+});
 
-      tabs[tabFocus].setAttribute("tabindex", 0);
-      tabs[tabFocus].focus();
+// Enable arrow navigation between tabs in the tab list
+let tabFocus = 0;
+
+tabList.addEventListener("keydown", (e) => {
+  // Move right
+  if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+    tabs[tabFocus].setAttribute("tabindex", -1);
+    if (e.key === "ArrowRight") {
+      tabFocus++;
+      // If we're at the end, go to the start
+      if (tabFocus >= tabs.length) {
+        tabFocus = 0;
+      }
+      // Move left
+    } else if (e.key === "ArrowLeft") {
+      tabFocus--;
+      // If we're at the start, move to the end
+      if (tabFocus < 0) {
+        tabFocus = tabs.length - 1;
+      }
     }
-  });
+
+    tabs[tabFocus].setAttribute("tabindex", 0);
+    tabs[tabFocus].focus();
+  }
 });
 
 function changeTabs(e) {
diff --git a/files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md b/files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md
index 40ce77a48a30f93..ea1d96141cb6c23 100644
--- a/files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md
+++ b/files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md
@@ -105,7 +105,7 @@ Here is a minimalistic template, which we'll be using as a starting point for la
           const ctx = canvas.getContext("2d");
         }
       }
-      window.addEventListener("load", draw);
+      draw();
     </script>
   </body>
 </html>
diff --git a/files/en-us/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md b/files/en-us/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md
index 8a9605316fc3ea7..32ca074d9a4ea5f 100644
--- a/files/en-us/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md
+++ b/files/en-us/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md
@@ -178,22 +178,20 @@ const height = 340;
 When the page loads, this code runs to set up and run the example:
 
 ```js
-window.onload = () => {
-  // lum in sRGB
-  const lum = {
-    r: 0.33,
-    g: 0.33,
-    b: 0.33,
-  };
-  // resize canvas
-  canvas1.width = width;
-  canvas1.height = height;
-  canvas2.width = width;
-  canvas2.height = height;
-  lightMix();
-  colorSphere();
-  runComposite();
+// lum in sRGB
+const lum = {
+  r: 0.33,
+  g: 0.33,
+  b: 0.33,
 };
+// resize canvas
+canvas1.width = width;
+canvas1.height = height;
+canvas2.width = width;
+canvas2.height = height;
+lightMix();
+colorSphere();
+runComposite();
 ```
 
 And this code, `runComposite()`, handles the bulk of the work, relying on a number of utility functions to do the hard parts.
diff --git a/files/en-us/web/api/customstateset/index.md b/files/en-us/web/api/customstateset/index.md
index ea4ea427964a2bd..69e6b078eaeb8ba 100644
--- a/files/en-us/web/api/customstateset/index.md
+++ b/files/en-us/web/api/customstateset/index.md
@@ -153,17 +153,15 @@ class LabeledCheckbox extends HTMLElement {
 customElements.define("labeled-checkbox", LabeledCheckbox);
 
 // Display a warning to unsupported browsers
-document.addEventListener("DOMContentLoaded", () => {
-  if (!LabeledCheckbox.isStateSyntaxSupported()) {
-    if (!document.getElementById("state-warning")) {
-      const warning = document.createElement("div");
-      warning.id = "state-warning";
-      warning.style.color = "red";
-      warning.textContent = "This feature is not supported by your browser.";
-      document.body.insertBefore(warning, document.body.firstChild);
-    }
+if (!LabeledCheckbox.isStateSyntaxSupported()) {
+  if (!document.getElementById("state-warning")) {
+    const warning = document.createElement("div");
+    warning.id = "state-warning";
+    warning.style.color = "red";
+    warning.textContent = "This feature is not supported by your browser.";
+    document.body.insertBefore(warning, document.body.firstChild);
   }
-});
+}
 ```
 
 In the `LabeledCheckbox` class:
@@ -270,17 +268,15 @@ class LabeledCheckbox extends HTMLElement {
 
 customElements.define("labeled-checkbox", LabeledCheckbox);
 
-document.addEventListener("DOMContentLoaded", () => {
-  if (!LabeledCheckbox.isStateSyntaxSupported()) {
-    if (!document.getElementById("state-warning")) {
-      const warning = document.createElement("div");
-      warning.id = "state-warning";
-      warning.style.color = "red";
-      warning.textContent = "This feature is not supported by your browser.";
-      document.body.insertBefore(warning, document.body.firstChild);
-    }
+if (!LabeledCheckbox.isStateSyntaxSupported()) {
+  if (!document.getElementById("state-warning")) {
+    const warning = document.createElement("div");
+    warning.id = "state-warning";
+    warning.style.color = "red";
+    warning.textContent = "This feature is not supported by your browser.";
+    document.body.insertBefore(warning, document.body.firstChild);
   }
-});
+}
 ```
 
 First, we define the custom element class `QuestionBox`, which extends `HTMLElement`.
@@ -441,17 +437,15 @@ class ManyStateElement extends HTMLElement {
 
 customElements.define("many-state-element", ManyStateElement);
 
-document.addEventListener("DOMContentLoaded", () => {
-  if (!LabeledCheckbox.isStateSyntaxSupported()) {
-    if (!document.getElementById("state-warning")) {
-      const warning = document.createElement("div");
-      warning.id = "state-warning";
-      warning.style.color = "red";
-      warning.textContent = "This feature is not supported by your browser.";
-      document.body.insertBefore(warning, document.body.firstChild);
-    }
+if (!LabeledCheckbox.isStateSyntaxSupported()) {
+  if (!document.getElementById("state-warning")) {
+    const warning = document.createElement("div");
+    warning.id = "state-warning";
+    warning.style.color = "red";
+    warning.textContent = "This feature is not supported by your browser.";
+    document.body.insertBefore(warning, document.body.firstChild);
   }
-});
+}
 ```
 
 #### HTML
diff --git a/files/en-us/web/api/datatransfer/cleardata/index.md b/files/en-us/web/api/datatransfer/cleardata/index.md
index 20e623077775dee..c3f7d1b7beab534 100644
--- a/files/en-us/web/api/datatransfer/cleardata/index.md
+++ b/files/en-us/web/api/datatransfer/cleardata/index.md
@@ -82,90 +82,87 @@ span.tweaked {
 ### JavaScript
 
 ```js
-window.addEventListener("DOMContentLoaded", () => {
-  // Select HTML elements
-  const draggable = document.getElementById("source");
-  const droppable = document.getElementById("target");
-  const status = document.getElementById("status");
-  const data = document.getElementById("data");
-  let dropped = false;
+// Select HTML elements
+const draggable = document.getElementById("source");
+const droppable = document.getElementById("target");
+const status = document.getElementById("status");
+const data = document.getElementById("data");
+let dropped = false;
 
-  // Register event handlers
-  draggable.addEventListener("dragstart", dragStartHandler);
-  draggable.addEventListener("dragend", dragEndHandler);
-  droppable.addEventListener("dragover", dragOverHandler);
-  droppable.addEventListener("dragleave", dragLeaveHandler);
-  droppable.addEventListener("drop", dropHandler);
+// Register event handlers
+draggable.addEventListener("dragstart", dragStartHandler);
+draggable.addEventListener("dragend", dragEndHandler);
+droppable.addEventListener("dragover", dragOverHandler);
+droppable.addEventListener("dragleave", dragLeaveHandler);
+droppable.addEventListener("drop", dropHandler);
 
-  function dragStartHandler(event) {
-    status.textContent = "Drag in process";
+function dragStartHandler(event) {
+  status.textContent = "Drag in process";
 
-    // Change target element's border to signify drag has started
-    event.currentTarget.style.border = "1px dashed blue";
+  // Change target element's border to signify drag has started
+  event.currentTarget.style.border = "1px dashed blue";
 
-    // Start by clearing existing clipboards; this will affect all types since we
-    // don't give a specific type.
+  // Start by clearing existing clipboards; this will affect all types since we
+  // don't give a specific type.
 
-    event.dataTransfer.clearData();
+  event.dataTransfer.clearData();
 
-    // Set the drag's format and data (use event target's id for data)
-    event.dataTransfer.setData("text/plain", event.target.id);
+  // Set the drag's format and data (use event target's id for data)
+  event.dataTransfer.setData("text/plain", event.target.id);
 
-    data.textContent = event.dataTransfer.getData("text/plain");
-  }
+  data.textContent = event.dataTransfer.getData("text/plain");
+}
 
-  function dragEndHandler(event) {
-    if (!dropped) {
-      status.textContent = "Drag canceled";
-    }
+function dragEndHandler(event) {
+  if (!dropped) {
+    status.textContent = "Drag canceled";
+  }
 
-    data.textContent = event.dataTransfer.getData("text/plain") || "empty";
+  data.textContent = event.dataTransfer.getData("text/plain") || "empty";
 
-    // Change border to signify drag is no longer in process
-    event.currentTarget.style.border = "1px solid black";
+  // Change border to signify drag is no longer in process
+  event.currentTarget.style.border = "1px solid black";
 
-    if (dropped) {
-      // Remove all event listeners
-      draggable.removeEventListener("dragstart", dragStartHandler);
-      draggable.removeEventListener("dragend", dragEndHandler);
-      droppable.removeEventListener("dragover", dragOverHandler);
-      droppable.removeEventListener("dragleave", dragLeaveHandler);
-      droppable.removeEventListener("drop", dropHandler);
-    }
+  if (dropped) {
+    // Remove all event listeners
+    draggable.removeEventListener("dragstart", dragStartHandler);
+    draggable.removeEventListener("dragend", dragEndHandler);
+    droppable.removeEventListener("dragover", dragOverHandler);
+    droppable.removeEventListener("dragleave", dragLeaveHandler);
+    droppable.removeEventListener("drop", dropHandler);
   }
+}
 
-  function dragOverHandler(event) {
-    status.textContent = "Drop available";
+function dragOverHandler(event) {
+  status.textContent = "Drop available";
 
-    event.preventDefault();
-  }
+  event.preventDefault();
+}
 
-  function dragLeaveHandler(event) {
-    status.textContent = "Drag in process (drop was available)";
+function dragLeaveHandler(event) {
+  status.textContent = "Drag in process (drop was available)";
 
-    event.preventDefault();
-  }
+  event.preventDefault();
+}
 
-  function dropHandler(event) {
-    dropped = true;
+function dropHandler(event) {
+  dropped = true;
 
-    status.textContent = "Drop done";
+  status.textContent = "Drop done";
 
-    event.preventDefault();
+  event.preventDefault();
 
-    // Get data linked to event format « text »
-    const _data = event.dataTransfer.getData("text/plain");
-    const element = document.getElementById(_data);
+  // Get data linked to event format « text »
+  const _data = event.dataTransfer.getData("text/plain");
+  const element = document.getElementById(_data);
 
-    // Append drag source element to event's target element
-    event.target.appendChild(element);
+  // Append drag source element to event's target element
+  event.target.appendChild(element);
 
-    // Change CSS styles and displayed text
-    element.style.cssText =
-      "border: 1px solid black;display: block; color: red";
-    element.textContent = "I'm in the Drop Zone!";
-  }
-});
+  // Change CSS styles and displayed text
+  element.style.cssText = "border: 1px solid black;display: block; color: red";
+  element.textContent = "I'm in the Drop Zone!";
+}
 ```
 
 {{EmbedLiveSample('Examples', 300, 300)}}
diff --git a/files/en-us/web/api/document/createelement/index.md b/files/en-us/web/api/document/createelement/index.md
index 96203a38a2d5189..2f6a15d063ab722 100644
--- a/files/en-us/web/api/document/createelement/index.md
+++ b/files/en-us/web/api/document/createelement/index.md
@@ -58,8 +58,6 @@ This creates a new `<div>` and inserts it before the element with the ID `div1`.
 #### JavaScript
 
 ```js
-document.body.onload = addElement;
-
 function addElement() {
   // create a new div element
   const newDiv = document.createElement("div");
@@ -74,6 +72,8 @@ function addElement() {
   const currentDiv = document.getElementById("div1");
   document.body.insertBefore(newDiv, currentDiv);
 }
+
+addElement();
 ```
 
 #### Result
diff --git a/files/en-us/web/api/document/domcontentloaded_event/index.md b/files/en-us/web/api/document/domcontentloaded_event/index.md
index 3b07845cda9e75c..a0b7216235296b4 100644
--- a/files/en-us/web/api/document/domcontentloaded_event/index.md
+++ b/files/en-us/web/api/document/domcontentloaded_event/index.md
@@ -14,6 +14,8 @@ The **`DOMContentLoaded`** event fires when the HTML document has been completel
 
 A different event, {{domxref("Window/load_event", "load")}}, should be used only to detect a fully-loaded page. It is a common mistake to use `load` where `DOMContentLoaded` would be more appropriate.
 
+Usually, to avoid running a script before the DOM it manipulates has been fully constructed, you can simply place the script at the end of the document body, immediately before the closing `</body>` tag, without wrapping it in an event listener.
+
 This event is not cancelable.
 
 ## Syntax
diff --git a/files/en-us/web/api/document_object_model/examples/index.md b/files/en-us/web/api/document_object_model/examples/index.md
index c4aac6122a52bdf..48be9a08abdad34 100644
--- a/files/en-us/web/api/document_object_model/examples/index.md
+++ b/files/en-us/web/api/document_object_model/examples/index.md
@@ -327,9 +327,7 @@ function showEventProperties(e) {
   document.body.appendChild(table);
 }
 
-window.onload = (event) => {
-  showEventProperties(event);
-};
+showEventProperties(event);
 ```
 
 {{EmbedLiveSample("example_7_displaying_event_object_properties", "", "300")}}
diff --git a/files/en-us/web/api/document_object_model/introduction/index.md b/files/en-us/web/api/document_object_model/introduction/index.md
index ef3017140be24e8..83868e9274fe534 100644
--- a/files/en-us/web/api/document_object_model/introduction/index.md
+++ b/files/en-us/web/api/document_object_model/introduction/index.md
@@ -88,19 +88,16 @@ and then adds it to the tree for the document:
 
 ```html
 <html lang="en">
-  <head>
+  <head> </head>
+  <body>
     <script>
-      // run this function when the document is loaded
-      window.onload = () => {
-        // create a couple of elements in an otherwise empty HTML page
-        const heading = document.createElement("h1");
-        const headingText = document.createTextNode("Big Head!");
-        heading.appendChild(headingText);
-        document.body.appendChild(heading);
-      };
+      // create a couple of elements in an otherwise empty HTML page
+      const heading = document.createElement("h1");
+      const headingText = document.createTextNode("Big Head!");
+      heading.appendChild(headingText);
+      document.body.appendChild(heading);
     </script>
-  </head>
-  <body></body>
+  </body>
 </html>
 ```
 
diff --git a/files/en-us/web/api/event/eventphase/index.md b/files/en-us/web/api/event/eventphase/index.md
index c99c6d83c05556a..b353e32dd8f719c 100644
--- a/files/en-us/web/api/event/eventphase/index.md
+++ b/files/en-us/web/api/event/eventphase/index.md
@@ -88,22 +88,17 @@ div {
 
 ```js
 let clear = false;
-let divInfo = null;
-let divs = null;
-let chCapture = null;
-
-window.onload = () => {
-  divInfo = document.getElementById("divInfo");
-  divs = document.getElementsByTagName("div");
-  chCapture = document.getElementById("chCapture");
-  chCapture.onclick = () => {
-    removeListeners();
-    addListeners();
-    clearDivs();
-  };
-  clearDivs();
+const divInfo = document.getElementById("divInfo");
+const divs = document.getElementsByTagName("div");
+const chCapture = document.getElementById("chCapture");
+
+chCapture.addEventListener("click", () => {
+  removeListeners();
   addListeners();
-};
+  clearDivs();
+});
+clearDivs();
+addListeners();
 
 function removeListeners() {
   for (const div of divs) {
diff --git a/files/en-us/web/api/file_api/using_files_from_web_applications/index.md b/files/en-us/web/api/file_api/using_files_from_web_applications/index.md
index dd0e750b48d5fb6..7a039d57f3d20a1 100644
--- a/files/en-us/web/api/file_api/using_files_from_web_applications/index.md
+++ b/files/en-us/web/api/file_api/using_files_from_web_applications/index.md
@@ -476,6 +476,15 @@ if (isset($_FILES["myFile"])) {
   <head>
     <meta charset="UTF-8" />
     <title>dnd binary upload</title>
+  </head>
+  <body>
+    <div>
+      <div
+        id="dropzone"
+        style="margin:30px; width:500px; height:300px; border:1px dotted grey;">
+        Drag & drop your file here
+      </div>
+    </div>
     <script>
       function sendFile(file) {
         const uri = "/index.php";
@@ -493,33 +502,21 @@ if (isset($_FILES["myFile"])) {
         xhr.send(fd);
       }
 
-      window.onload = () => {
-        const dropzone = document.getElementById("dropzone");
-        dropzone.ondragover = dropzone.ondragenter = (event) => {
-          event.stopPropagation();
-          event.preventDefault();
-        };
+      const dropzone = document.getElementById("dropzone");
+      dropzone.addEventListener("dragover", (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+      });
 
-        dropzone.ondrop = (event) => {
-          event.stopPropagation();
-          event.preventDefault();
+      dropzone.addEventListener("drop", (event) => {
+        event.preventDefault();
 
-          const filesArray = event.dataTransfer.files;
-          for (let i = 0; i < filesArray.length; i++) {
-            sendFile(filesArray[i]);
-          }
-        };
-      };
+        const filesArray = event.dataTransfer.files;
+        for (let i = 0; i < filesArray.length; i++) {
+          sendFile(filesArray[i]);
+        }
+      });
     </script>
-  </head>
-  <body>
-    <div>
-      <div
-        id="dropzone"
-        style="margin:30px; width:500px; height:300px; border:1px dotted grey;">
-        Drag & drop your file here
-      </div>
-    </div>
   </body>
 </html>
 ```
diff --git a/files/en-us/web/api/hid/getdevices/index.md b/files/en-us/web/api/hid/getdevices/index.md
index 02bad698d4f1671..73db5808364d02f 100644
--- a/files/en-us/web/api/hid/getdevices/index.md
+++ b/files/en-us/web/api/hid/getdevices/index.md
@@ -31,11 +31,9 @@ A {{jsxref("Promise")}} that resolves with a list of {{domxref("HIDDevice")}} ob
 The following example gets a list of devices and logs the device names to the console.
 
 ```js
-document.addEventListener("DOMContentLoaded", async () => {
-  let devices = await navigator.hid.getDevices();
-  devices.forEach((device) => {
-    console.log(`HID: ${device.productName}`);
-  });
+let devices = await navigator.hid.getDevices();
+devices.forEach((device) => {
+  console.log(`HID: ${device.productName}`);
 });
 ```
 
diff --git a/files/en-us/web/api/hiddevice/opened/index.md b/files/en-us/web/api/hiddevice/opened/index.md
index 14ab4545fd4507d..c210d2ef6f3a70f 100644
--- a/files/en-us/web/api/hiddevice/opened/index.md
+++ b/files/en-us/web/api/hiddevice/opened/index.md
@@ -21,11 +21,9 @@ A boolean value, true if the connection is open.
 The following example retrieves devices with {{domxref("HID.getDevices()")}} and logs the value of `opened` to the console.
 
 ```js
-document.addEventListener("DOMContentLoaded", async () => {
-  let devices = await navigator.hid.getDevices();
-  devices.forEach((device) => {
-    console.log(`HID: ${device.opened}`);
-  });
+let devices = await navigator.hid.getDevices();
+devices.forEach((device) => {
+  console.log(`HID: ${device.opened}`);
 });
 ```
 
diff --git a/files/en-us/web/api/hiddevice/productid/index.md b/files/en-us/web/api/hiddevice/productid/index.md
index 2e4ce3cf6bce603..ac5badc73cb7de4 100644
--- a/files/en-us/web/api/hiddevice/productid/index.md
+++ b/files/en-us/web/api/hiddevice/productid/index.md
@@ -21,11 +21,9 @@ An integer. If the device has no product ID, or the product ID cannot be accesse
 The following example retrieves devices with {{domxref("HID.getDevices()")}} and logs the value of `productId` to the console.
 
 ```js
-document.addEventListener("DOMContentLoaded", async () => {
-  let devices = await navigator.hid.getDevices();
-  devices.forEach((device) => {
-    console.log(`HID: ${device.productId}`);
-  });
+let devices = await navigator.hid.getDevices();
+devices.forEach((device) => {
+  console.log(`HID: ${device.productId}`);
 });
 ```
 
diff --git a/files/en-us/web/api/hiddevice/productname/index.md b/files/en-us/web/api/hiddevice/productname/index.md
index 88eb9df5ca2002b..e26b4375533ec5f 100644
--- a/files/en-us/web/api/hiddevice/productname/index.md
+++ b/files/en-us/web/api/hiddevice/productname/index.md
@@ -21,11 +21,9 @@ A string.
 The following example retrieves devices with {{domxref("HID.getDevices()")}} and logs the value of `productName` to the console.
 
 ```js
-document.addEventListener("DOMContentLoaded", async () => {
-  let devices = await navigator.hid.getDevices();
-  devices.forEach((device) => {
-    console.log(`HID: ${device.productName}`);
-  });
+let devices = await navigator.hid.getDevices();
+devices.forEach((device) => {
+  console.log(`HID: ${device.productName}`);
 });
 ```
 
diff --git a/files/en-us/web/api/hiddevice/vendorid/index.md b/files/en-us/web/api/hiddevice/vendorid/index.md
index eb2ef3e589b541d..3926fabb5a32a28 100644
--- a/files/en-us/web/api/hiddevice/vendorid/index.md
+++ b/files/en-us/web/api/hiddevice/vendorid/index.md
@@ -21,11 +21,9 @@ An integer. If the device has no vendor ID, or the vendor ID cannot be accessed
 The following example retrieves devices with {{domxref("HID.getDevices()")}} and logs the value of `vendorId` to the console.
 
 ```js
-document.addEventListener("DOMContentLoaded", async () => {
-  let devices = await navigator.hid.getDevices();
-  devices.forEach((device) => {
-    console.log(`HID: ${device.vendorId}`);
-  });
+let devices = await navigator.hid.getDevices();
+devices.forEach((device) => {
+  console.log(`HID: ${device.vendorId}`);
 });
 ```
 
diff --git a/files/en-us/web/api/htmlbuttonelement/labels/index.md b/files/en-us/web/api/htmlbuttonelement/labels/index.md
index 9b419cad0fc85d0..2c3b1e3acd9b7ff 100644
--- a/files/en-us/web/api/htmlbuttonelement/labels/index.md
+++ b/files/en-us/web/api/htmlbuttonelement/labels/index.md
@@ -30,12 +30,10 @@ with the `<button>` element.
 ### JavaScript
 
 ```js
-window.addEventListener("DOMContentLoaded", () => {
-  const button = document.getElementById("test");
-  for (const label of button.labels) {
-    console.log(label.textContent); // "Label 1" and "Label 2"
-  }
-});
+const button = document.getElementById("test");
+for (const label of button.labels) {
+  console.log(label.textContent); // "Label 1" and "Label 2"
+}
 ```
 
 {{EmbedLiveSample("Examples", "100%", 30)}}
diff --git a/files/en-us/web/api/htmlcanvaselement/todataurl/index.md b/files/en-us/web/api/htmlcanvaselement/todataurl/index.md
index 2a321ed5de512a6..c214ee73862d0bf 100644
--- a/files/en-us/web/api/htmlcanvaselement/todataurl/index.md
+++ b/files/en-us/web/api/htmlcanvaselement/todataurl/index.md
@@ -90,8 +90,6 @@ You can use this technique in coordination with mouse events in order to dynamic
 #### JavaScript
 
 ```js
-window.addEventListener("load", removeColors);
-
 function showColorImg() {
   this.style.display = "none";
   this.nextSibling.style.display = "inline";
@@ -132,6 +130,8 @@ function removeColors() {
     colorImg.parentNode.insertBefore(grayImg, colorImg);
   }
 }
+
+removeColors();
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/htmlimageelement/height/index.md b/files/en-us/web/api/htmlimageelement/height/index.md
index bd0612adcb01a4e..f373f5929ea8607 100644
--- a/files/en-us/web/api/htmlimageelement/height/index.md
+++ b/files/en-us/web/api/htmlimageelement/height/index.md
@@ -58,11 +58,11 @@ image given the width at which it's currently drawn.
 const clockImage = document.querySelector("img");
 let output = document.querySelector(".size");
 
-const updateHeight = (event) => {
+const updateHeight = () => {
   output.innerText = clockImage.height;
 };
 
-window.addEventListener("load", updateHeight);
+updateHeight();
 window.addEventListener("resize", updateHeight);
 ```
 
diff --git a/files/en-us/web/api/htmlimageelement/srcset/index.md b/files/en-us/web/api/htmlimageelement/srcset/index.md
index bb9e116d8197a08..ab0c7a4e2f24452 100644
--- a/files/en-us/web/api/htmlimageelement/srcset/index.md
+++ b/files/en-us/web/api/htmlimageelement/srcset/index.md
@@ -128,22 +128,19 @@ the wrap must occur.
 
 ### JavaScript
 
-The following code is run within a handler for the {{domxref("Window", "window")}}'s
-{{domxref("Window.load_event", "load")}} event. It uses the image's
+The following code uses the image's
 {{domxref("HTMLImageElement.currentSrc", "currentSrc")}} property to fetch and display
 the URL selected by the browser from the `srcset`.
 
 ```js
-window.addEventListener("load", () => {
-  const box = document.querySelector(".box");
-  const image = box.querySelector("img");
-
-  const newElem = document.createElement("p");
-  newElem.textContent = "Image: ";
-  newElem.appendChild(document.createElement("code")).textContent =
-    image.currentSrc;
-  box.appendChild(newElem);
-});
+const box = document.querySelector(".box");
+const image = box.querySelector("img");
+
+const newElem = document.createElement("p");
+newElem.textContent = "Image: ";
+newElem.appendChild(document.createElement("code")).textContent =
+  image.currentSrc;
+box.appendChild(newElem);
 ```
 
 ### Result
diff --git a/files/en-us/web/api/htmlimageelement/width/index.md b/files/en-us/web/api/htmlimageelement/width/index.md
index 6b365bf7536fd89..0c0c827563bcbc8 100644
--- a/files/en-us/web/api/htmlimageelement/width/index.md
+++ b/files/en-us/web/api/htmlimageelement/width/index.md
@@ -60,11 +60,11 @@ current width information is always available.
 const clockImage = document.querySelector("img");
 let output = document.querySelector(".size");
 
-const updateWidth = (event) => {
+const updateWidth = () => {
   output.innerText = clockImage.width;
 };
 
-window.addEventListener("load", updateWidth);
+updateWidth();
 window.addEventListener("resize", updateWidth);
 ```
 
diff --git a/files/en-us/web/api/htmlinputelement/labels/index.md b/files/en-us/web/api/htmlinputelement/labels/index.md
index feb28ae78cab881..a33bc04c4967b88 100644
--- a/files/en-us/web/api/htmlinputelement/labels/index.md
+++ b/files/en-us/web/api/htmlinputelement/labels/index.md
@@ -31,12 +31,10 @@ with the `<input>` element.
 ### JavaScript
 
 ```js
-window.addEventListener("DOMContentLoaded", () => {
-  const input = document.getElementById("test");
-  for (const label of input.labels) {
-    console.log(label.textContent); // "Label 1" and "Label 2"
-  }
-});
+const input = document.getElementById("test");
+for (const label of input.labels) {
+  console.log(label.textContent); // "Label 1" and "Label 2"
+}
 ```
 
 {{EmbedLiveSample("Examples", "100%", 30)}}
diff --git a/files/en-us/web/api/htmlmeterelement/labels/index.md b/files/en-us/web/api/htmlmeterelement/labels/index.md
index acc3050065da800..74f79d6f32af7be 100644
--- a/files/en-us/web/api/htmlmeterelement/labels/index.md
+++ b/files/en-us/web/api/htmlmeterelement/labels/index.md
@@ -30,12 +30,10 @@ with the `<meter>` element.
 ### JavaScript
 
 ```js
-window.addEventListener("DOMContentLoaded", () => {
-  const meter = document.getElementById("test");
-  for (const label of meter.labels) {
-    console.log(label.textContent); // "Label 1" and "Label 2"
-  }
-});
+const meter = document.getElementById("test");
+for (const label of meter.labels) {
+  console.log(label.textContent); // "Label 1" and "Label 2"
+}
 ```
 
 {{EmbedLiveSample("Examples", "100%", 30)}}
diff --git a/files/en-us/web/api/htmloutputelement/labels/index.md b/files/en-us/web/api/htmloutputelement/labels/index.md
index 21ea9b32b26c5b5..819ccc1f283f366 100644
--- a/files/en-us/web/api/htmloutputelement/labels/index.md
+++ b/files/en-us/web/api/htmloutputelement/labels/index.md
@@ -30,12 +30,10 @@ with the `<output>` element.
 ### JavaScript
 
 ```js
-window.addEventListener("DOMContentLoaded", () => {
-  const output = document.getElementById("test");
-  for (const label of output.labels) {
-    console.log(label.textContent); // "Label 1" and "Label 2"
-  }
-});
+const output = document.getElementById("test");
+for (const label of output.labels) {
+  console.log(label.textContent); // "Label 1" and "Label 2"
+}
 ```
 
 {{EmbedLiveSample("Examples", "100%", 30)}}
diff --git a/files/en-us/web/api/htmlprogresselement/labels/index.md b/files/en-us/web/api/htmlprogresselement/labels/index.md
index d0c6526f8b4a1fa..79062f8a9a99282 100644
--- a/files/en-us/web/api/htmlprogresselement/labels/index.md
+++ b/files/en-us/web/api/htmlprogresselement/labels/index.md
@@ -30,12 +30,10 @@ with the `<progress>` element.
 ### JavaScript
 
 ```js
-window.addEventListener("DOMContentLoaded", () => {
-  const progress = document.getElementById("test");
-  for (const label of progress.labels) {
-    console.log(label.textContent); // "Label 1" and "Label 2"
-  }
-});
+const progress = document.getElementById("test");
+for (const label of progress.labels) {
+  console.log(label.textContent); // "Label 1" and "Label 2"
+}
 ```
 
 {{EmbedLiveSample("Examples", "100%", 30)}}
diff --git a/files/en-us/web/api/htmlselectelement/labels/index.md b/files/en-us/web/api/htmlselectelement/labels/index.md
index a10a3d7d9240da7..6f75f2e64c72a7d 100644
--- a/files/en-us/web/api/htmlselectelement/labels/index.md
+++ b/files/en-us/web/api/htmlselectelement/labels/index.md
@@ -33,12 +33,10 @@ with the `<select>` element.
 ### JavaScript
 
 ```js
-window.addEventListener("DOMContentLoaded", () => {
-  const select = document.getElementById("test");
-  for (const label of select.labels) {
-    console.log(label.textContent); // "Label 1" and "Label 2"
-  }
-});
+const select = document.getElementById("test");
+for (const label of select.labels) {
+  console.log(label.textContent); // "Label 1" and "Label 2"
+}
 ```
 
 {{EmbedLiveSample("Examples", "100%", 30)}}
diff --git a/files/en-us/web/api/htmlselectelement/options/index.md b/files/en-us/web/api/htmlselectelement/options/index.md
index 46785b1ee0782f5..8bf813e1f99212d 100644
--- a/files/en-us/web/api/htmlselectelement/options/index.md
+++ b/files/en-us/web/api/htmlselectelement/options/index.md
@@ -32,12 +32,10 @@ elements contained by the `<select>` element.
 ### JavaScript
 
 ```js
-window.addEventListener("DOMContentLoaded", () => {
-  const select = document.getElementById("test");
-  for (const option of select.options) {
-    console.log(option.label); // "Option 1" and "Option 2"
-  }
-});
+const select = document.getElementById("test");
+for (const option of select.options) {
+  console.log(option.label); // "Option 1" and "Option 2"
+}
 ```
 
 {{EmbedLiveSample("Examples", "100%", 30)}}
diff --git a/files/en-us/web/api/htmltextareaelement/labels/index.md b/files/en-us/web/api/htmltextareaelement/labels/index.md
index 074f46dc45c7953..684daeb24d35b22 100644
--- a/files/en-us/web/api/htmltextareaelement/labels/index.md
+++ b/files/en-us/web/api/htmltextareaelement/labels/index.md
@@ -30,12 +30,10 @@ with the `<textArea>` element.
 ### JavaScript
 
 ```js
-window.addEventListener("DOMContentLoaded", () => {
-  const textArea = document.getElementById("test");
-  for (const label of textArea.labels) {
-    console.log(label.textContent); // "Label 1" and "Label 2"
-  }
-});
+const textArea = document.getElementById("test");
+for (const label of textArea.labels) {
+  console.log(label.textContent); // "Label 1" and "Label 2"
+}
 ```
 
 {{EmbedLiveSample("Examples", "100%", 100)}}
diff --git a/files/en-us/web/api/htmlvideoelement/requestvideoframecallback/index.md b/files/en-us/web/api/htmlvideoelement/requestvideoframecallback/index.md
index 6168cbf5eb815fe..b307724322accfb 100644
--- a/files/en-us/web/api/htmlvideoelement/requestvideoframecallback/index.md
+++ b/files/en-us/web/api/htmlvideoelement/requestvideoframecallback/index.md
@@ -80,52 +80,48 @@ You can compare the `now` callback parameter and the `expectedDisplayTime` metad
 This example shows how to use `requestVideoFrameCallback()` to draw the frames of a video onto a {{htmlelement("canvas")}} element at exactly the same frame rate as the video. It also logs the frame metadata to the screen for debugging purposes.
 
 ```js
-const startDrawing = () => {
-  const button = document.querySelector("button");
-  const video = document.querySelector("video");
-  const canvas = document.querySelector("canvas");
-  const ctx = canvas.getContext("2d");
-  const fpsInfo = document.querySelector("#fps-info");
-  const metadataInfo = document.querySelector("#metadata-info");
-
-  button.addEventListener("click", () =>
-    video.paused ? video.play() : video.pause(),
-  );
-
-  video.addEventListener("play", () => {
-    if (!("requestVideoFrameCallback" in HTMLVideoElement.prototype)) {
-      console.error(
-        "Your browser does not support the `Video.requestVideoFrameCallback()` API.",
-      );
-    }
-  });
-
-  let width = canvas.width;
-  let height = canvas.height;
-
-  let paintCount = 0;
-  let startTime = 0.0;
-
-  const updateCanvas = (now, metadata) => {
-    if (startTime === 0.0) {
-      startTime = now;
-    }
-
-    ctx.drawImage(video, 0, 0, width, height);
-
-    const elapsed = (now - startTime) / 1000.0;
-    const fps = (++paintCount / elapsed).toFixed(3);
-    fpsInfo.innerText = !isFinite(fps) ? 0 : fps;
-    metadataInfo.innerText = JSON.stringify(metadata, null, 2);
-
-    video.requestVideoFrameCallback(updateCanvas);
-  };
-
-  video.src = "https://mdn.github.io/shared-assets/videos/flower.mp4";
+const button = document.querySelector("button");
+const video = document.querySelector("video");
+const canvas = document.querySelector("canvas");
+const ctx = canvas.getContext("2d");
+const fpsInfo = document.querySelector("#fps-info");
+const metadataInfo = document.querySelector("#metadata-info");
+
+button.addEventListener("click", () =>
+  video.paused ? video.play() : video.pause(),
+);
+
+video.addEventListener("play", () => {
+  if (!("requestVideoFrameCallback" in HTMLVideoElement.prototype)) {
+    console.error(
+      "Your browser does not support the `Video.requestVideoFrameCallback()` API.",
+    );
+  }
+});
+
+let width = canvas.width;
+let height = canvas.height;
+
+let paintCount = 0;
+let startTime = 0.0;
+
+const updateCanvas = (now, metadata) => {
+  if (startTime === 0.0) {
+    startTime = now;
+  }
+
+  ctx.drawImage(video, 0, 0, width, height);
+
+  const elapsed = (now - startTime) / 1000.0;
+  const fps = (++paintCount / elapsed).toFixed(3);
+  fpsInfo.innerText = !isFinite(fps) ? 0 : fps;
+  metadataInfo.innerText = JSON.stringify(metadata, null, 2);
+
   video.requestVideoFrameCallback(updateCanvas);
 };
 
-window.addEventListener("load", startDrawing);
+video.src = "https://mdn.github.io/shared-assets/videos/flower.mp4";
+video.requestVideoFrameCallback(updateCanvas);
 ```
 
 ```css
diff --git a/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md b/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md
index 5a513944075c5d9..af757d4ae08fc8a 100644
--- a/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md
+++ b/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md
@@ -196,14 +196,11 @@ There's nothing magic in here. It's fairly basic CSS.
 That brings us to the JavaScript code which makes everything work. Let's start with the global variables:
 
 ```js
-let contentBox;
+const contentBox = document.querySelector("main");
 
 let nextArticleID = 1;
 let visibleAds = new Set();
 let previouslyVisibleAds = null;
-
-let adObserver;
-let refreshIntervalID = 0;
 ```
 
 These are used as follows:
@@ -216,37 +213,29 @@ These are used as follows:
   - : A {{jsxref("Set")}} which we'll use to track the ads currently visible on the screen.
 - `previouslyVisibleAds`
   - : Used to temporarily store the list of visible ads while the document is not visible (for example, if the user has tabbed to another page).
-- `adObserver`
-  - : Will hold our {{domxref("IntersectionObserver")}} used to track the intersection between the ads and the `<main>` element's bounds.
-- `refreshIntervalID`
-  - : Used to store the interval ID returned by {{domxref("Window.setInterval", "setInterval()")}}. This interval will be used to trigger our periodic refreshes of the ads' content.
 
 #### Setting up
 
-To set things up, we run the `startup()` function below when the page loads:
+To set things up, we run the following code when the page loads:
 
 ```js
-window.addEventListener("load", startup, false);
-
-function startup() {
-  contentBox = document.querySelector("main");
-
-  document.addEventListener("visibilitychange", handleVisibilityChange, false);
-
-  const observerOptions = {
-    root: null,
-    rootMargin: "0px",
-    threshold: [0.0, 0.75],
-  };
-
-  adObserver = new IntersectionObserver(intersectionCallback, observerOptions);
-
-  buildContents();
-  refreshIntervalID = setInterval(handleRefreshInterval, 1000);
-}
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
+const observerOptions = {
+  root: null,
+  rootMargin: "0px",
+  threshold: [0.0, 0.75],
+};
+const adObserver = new IntersectionObserver(
+  intersectionCallback,
+  observerOptions,
+);
+const refreshIntervalID = setInterval(handleRefreshInterval, 1000);
+
+buildContents();
 ```
 
-First, a reference to the content wrapping {{HTMLElement("main")}} element is obtained, so we can insert our content into it. Then we set up an event listener for the {{domxref("document.visibilitychange_event", "visibilitychange")}} event. This event is sent when the document becomes hidden or visible, such as when the user switches tabs in their browser. The Intersection Observer API doesn't take this into account when detecting intersection, since intersection isn't affected by page visibility. Therefore, we need to pause our timers while the page is tabbed out; hence this event listener.
+First, we set up an event listener for the {{domxref("document.visibilitychange_event", "visibilitychange")}} event. This event is sent when the document becomes hidden or visible, such as when the user switches tabs in their browser. The Intersection Observer API doesn't take this into account when detecting intersection, since intersection isn't affected by page visibility. Therefore, we need to pause our timers while the page is tabbed out; hence this event listener.
 
 Next we set up the options for the {{domxref("IntersectionObserver")}} which will monitor target elements (ads, in our case) for intersection changes relative to the document. The options are configured to watch for intersections with the document's viewport (by setting `root` to `null`). We have no margins to extend or contract the intersection root's rectangle; we want to match the boundaries of the document's viewport exactly for intersection purposes. And the `threshold` is set to an array containing the values 0.0 and 0.75; this will cause our callback to execute whenever a targeted element becomes completely obscured or first starts to become unobscured (intersection ratio 0.0) or passes through 75% visible in either direction (intersection ratio 0.75).
 
diff --git a/files/en-us/web/api/notifications_api/using_the_notifications_api/index.md b/files/en-us/web/api/notifications_api/using_the_notifications_api/index.md
index 4fb1a6af9e193eb..759121aa370e330 100644
--- a/files/en-us/web/api/notifications_api/using_the_notifications_api/index.md
+++ b/files/en-us/web/api/notifications_api/using_the_notifications_api/index.md
@@ -168,58 +168,56 @@ It's possible to handle multiple notifications this way:
 ```js
 const demoLogs = document.querySelector("#demo-logs");
 
-window.addEventListener("load", () => {
-  const button = document.querySelector("#notify");
-
-  button.addEventListener("click", () => {
-    if (Notification?.permission === "granted") {
-      demoLogs.innerText += `The site has permission to show notifications. Showing notifications.\n`;
-      // If the user agreed to get notified
-      // Let's try to send ten notifications
-      let i = 0;
-      // Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.
-      const interval = setInterval(() => {
-        // Thanks to the tag, we should only see the "Hi no 9 from MDN." notification
-        const n = new Notification(`Hi no ${i} from MDN.`, {
-          tag: "soManyNotification",
-        });
-        if (i === 9) {
-          clearInterval(interval);
-        }
-        i++;
-      }, 200);
-    } else if (Notification?.permission !== "denied") {
-      demoLogs.innerText += "Requesting notification permission.\n";
-      // If the user hasn't told if they want to be notified or not
-      // Note: because of Chrome, we are not sure the permission property
-      // is set, therefore it's unsafe to check for the "default" value.
-      Notification.requestPermission().then((status) => {
-        // If the user said okay
-        if (status === "granted") {
-          demoLogs.innerText +=
-            "User granted the permission. Sending notifications.\n";
-          let i = 0;
-          // Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.
-          const interval = setInterval(() => {
-            // Thanks to the tag, we should only see the "Message no 9 from MDN." notification
-            const n = new Notification(`Message no ${i} from MDN.`, {
-              tag: "soManyNotification",
-            });
-            if (i === 9) {
-              clearInterval(interval);
-            }
-            i++;
-          }, 200);
-        } else {
-          // Otherwise, we can fallback to a regular modal alert
-          demoLogs.innerText += `User denied the permission request.\n`;
-        }
+const button = document.querySelector("#notify");
+
+button.addEventListener("click", () => {
+  if (Notification?.permission === "granted") {
+    demoLogs.innerText += `The site has permission to show notifications. Showing notifications.\n`;
+    // If the user agreed to get notified
+    // Let's try to send ten notifications
+    let i = 0;
+    // Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.
+    const interval = setInterval(() => {
+      // Thanks to the tag, we should only see the "Hi no 9 from MDN." notification
+      const n = new Notification(`Hi no ${i} from MDN.`, {
+        tag: "soManyNotification",
       });
-    } else {
-      // If the user refuses to get notified, we can fallback to a regular modal alert
-      demoLogs.innerText += `The site does not have permission to show notifications.\n`;
-    }
-  });
+      if (i === 9) {
+        clearInterval(interval);
+      }
+      i++;
+    }, 200);
+  } else if (Notification?.permission !== "denied") {
+    demoLogs.innerText += "Requesting notification permission.\n";
+    // If the user hasn't told if they want to be notified or not
+    // Note: because of Chrome, we are not sure the permission property
+    // is set, therefore it's unsafe to check for the "default" value.
+    Notification.requestPermission().then((status) => {
+      // If the user said okay
+      if (status === "granted") {
+        demoLogs.innerText +=
+          "User granted the permission. Sending notifications.\n";
+        let i = 0;
+        // Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.
+        const interval = setInterval(() => {
+          // Thanks to the tag, we should only see the "Message no 9 from MDN." notification
+          const n = new Notification(`Message no ${i} from MDN.`, {
+            tag: "soManyNotification",
+          });
+          if (i === 9) {
+            clearInterval(interval);
+          }
+          i++;
+        }, 200);
+      } else {
+        // Otherwise, we can fallback to a regular modal alert
+        demoLogs.innerText += `User denied the permission request.\n`;
+      }
+    });
+  } else {
+    // If the user refuses to get notified, we can fallback to a regular modal alert
+    demoLogs.innerText += `The site does not have permission to show notifications.\n`;
+  }
 });
 ```
 
diff --git a/files/en-us/web/api/pointer_events/index.md b/files/en-us/web/api/pointer_events/index.md
index b23156a02747b0e..497a7800f285c40 100644
--- a/files/en-us/web/api/pointer_events/index.md
+++ b/files/en-us/web/api/pointer_events/index.md
@@ -150,23 +150,19 @@ function rawUpdate_handler(event) {}
 function gotCapture_handler(event) {}
 function lostCapture_handler(event) {}
 
-function init() {
-  const el = document.getElementById("target");
-  // Register pointer event handlers
-  el.onpointerover = over_handler;
-  el.onpointerenter = enter_handler;
-  el.onpointerdown = down_handler;
-  el.onpointermove = move_handler;
-  el.onpointerup = up_handler;
-  el.onpointercancel = cancel_handler;
-  el.onpointerout = out_handler;
-  el.onpointerleave = leave_handler;
-  el.onpointerrawupdate = rawUpdate_handler;
-  el.ongotpointercapture = gotCapture_handler;
-  el.onlostpointercapture = lostCapture_handler;
-}
-
-document.addEventListener("DOMContentLoaded", init);
+const el = document.getElementById("target");
+// Register pointer event handlers
+el.onpointerover = over_handler;
+el.onpointerenter = enter_handler;
+el.onpointerdown = down_handler;
+el.onpointermove = move_handler;
+el.onpointerup = up_handler;
+el.onpointercancel = cancel_handler;
+el.onpointerout = out_handler;
+el.onpointerleave = leave_handler;
+el.onpointerrawupdate = rawUpdate_handler;
+el.ongotpointercapture = gotCapture_handler;
+el.onlostpointercapture = lostCapture_handler;
 ```
 
 ### Event properties
@@ -234,13 +230,9 @@ function down_handler(ev) {
   if (!ev.isPrimary) process_non_primary(ev);
 }
 
-function init() {
-  const el = document.getElementById("target");
-  // Register pointerdown handler
-  el.onpointerdown = down_handler;
-}
-
-document.addEventListener("DOMContentLoaded", init);
+const el = document.getElementById("target");
+// Register pointerdown handler
+el.onpointerdown = down_handler;
 ```
 
 ## Determining the Primary Pointer
@@ -294,12 +286,8 @@ function downHandler(ev) {
   el.setPointerCapture(ev.pointerId);
 }
 
-function init() {
-  const el = document.getElementById("target");
-  el.onpointerdown = downHandler;
-}
-
-document.addEventListener("DOMContentLoaded", init);
+const el = document.getElementById("target");
+el.onpointerdown = downHandler;
 ```
 
 The following example shows a pointer capture being released (when a {{domxref("Element/pointercancel_event", "pointercancel")}} event occurs. The browser does this automatically when a {{domxref("Element/pointerup_event", "pointerup")}} or {{domxref("Element/pointercancel_event", "pointercancel")}} event occurs.
@@ -321,14 +309,10 @@ function cancelHandler(ev) {
   el.releasePointerCapture(ev.pointerId);
 }
 
-function init() {
-  const el = document.getElementById("target");
-  // Register pointerdown and pointercancel handlers
-  el.onpointerdown = downHandler;
-  el.onpointercancel = cancelHandler;
-}
-
-document.addEventListener("DOMContentLoaded", init);
+const el = document.getElementById("target");
+// Register pointerdown and pointercancel handlers
+el.onpointerdown = downHandler;
+el.onpointercancel = cancelHandler;
 ```
 
 ## touch-action CSS property
diff --git a/files/en-us/web/api/presentation_api/index.md b/files/en-us/web/api/presentation_api/index.md
index ae74226a8579737..f1ab64fcd7b6f46 100644
--- a/files/en-us/web/api/presentation_api/index.md
+++ b/files/en-us/web/api/presentation_api/index.md
@@ -135,7 +135,7 @@ const reconnect = () => {
   }
 };
 // On navigation of the controller, reconnect automatically.
-document.addEventListener("DOMContentLoaded", reconnect);
+reconnect();
 // Or allow manual reconnection.
 reconnectBtn.onclick = reconnect;
 ```
diff --git a/files/en-us/web/api/texttrack/mode/index.md b/files/en-us/web/api/texttrack/mode/index.md
index d7727bef75ec059..a33296ee6b011ea 100644
--- a/files/en-us/web/api/texttrack/mode/index.md
+++ b/files/en-us/web/api/texttrack/mode/index.md
@@ -82,16 +82,14 @@ finished, the video automatically pauses playback. This is done by setting the
 `mode` to `showing`.
 
 ```js
-window.addEventListener("load", (event) => {
-  let trackElem = document.querySelector("track");
-  let track = trackElem.track;
+let trackElem = document.querySelector("track");
+let track = trackElem.track;
 
-  track.mode = "showing";
+track.mode = "showing";
 
-  for (const cue of track.cues) {
-    cue.pauseOnExit = true;
-  }
-});
+for (const cue of track.cues) {
+  cue.pauseOnExit = true;
+}
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/touch_events/index.md b/files/en-us/web/api/touch_events/index.md
index 6d03259a3ba6583..48b6d3b7e81c450 100644
--- a/files/en-us/web/api/touch_events/index.md
+++ b/files/en-us/web/api/touch_events/index.md
@@ -66,20 +66,14 @@ Log:
 
 ### Setting up the event handlers
 
-When the page loads, the `startup()` function shown below will be called.
-This sets up all the event listeners for our {{HTMLElement("canvas")}} element so we can handle the touch events as they occur.
+The code sets up all the event listeners for our {{HTMLElement("canvas")}} element so we can handle the touch events as they occur.
 
 ```js
-function startup() {
-  const el = document.getElementById("canvas");
-  el.addEventListener("touchstart", handleStart);
-  el.addEventListener("touchend", handleEnd);
-  el.addEventListener("touchcancel", handleCancel);
-  el.addEventListener("touchmove", handleMove);
-  log("Initialized.");
-}
-
-document.addEventListener("DOMContentLoaded", startup);
+const el = document.getElementById("canvas");
+el.addEventListener("touchstart", handleStart);
+el.addEventListener("touchend", handleEnd);
+el.addEventListener("touchcancel", handleCancel);
+el.addEventListener("touchmove", handleMove);
 ```
 
 #### Tracking new touches
diff --git a/files/en-us/web/api/web_workers_api/using_web_workers/index.md b/files/en-us/web/api/web_workers_api/using_web_workers/index.md
index 1b27bd1bb0dfdf7..3a20dad754f74ad 100644
--- a/files/en-us/web/api/web_workers_api/using_web_workers/index.md
+++ b/files/en-us/web/api/web_workers_api/using_web_workers/index.md
@@ -622,21 +622,20 @@ There is not an "official" way to embed the code of a worker within a web page,
         { type: "text/javascript" },
       );
 
-      // Creating a new document.worker property containing all our "text/js-worker" scripts.
-      document.worker = new Worker(window.URL.createObjectURL(blob));
+      // Creating a new global "worker" variable from all our "text/js-worker" scripts.
+      const worker = new Worker(window.URL.createObjectURL(blob));
 
-      document.worker.onmessage = (event) => {
+      worker.onmessage = (event) => {
         pageLog(`Received: ${event.data}`);
       };
-
-      // Start the worker.
-      window.onload = () => {
-        document.worker.postMessage("");
-      };
     </script>
   </head>
   <body>
     <div id="logDisplay"></div>
+    <script>
+      // Start the worker.
+      worker.postMessage("");
+    </script>
   </body>
 </html>
 ```
diff --git a/files/en-us/web/api/webgl_api/basic_2d_animation_example/index.md b/files/en-us/web/api/webgl_api/basic_2d_animation_example/index.md
index 29818d7c3f2c034..1e842ded65ba549 100644
--- a/files/en-us/web/api/webgl_api/basic_2d_animation_example/index.md
+++ b/files/en-us/web/api/webgl_api/basic_2d_animation_example/index.md
@@ -79,80 +79,49 @@ The HTML consists solely of the {{HTMLElement("canvas")}} that we'll obtain a We
 First, the global variables. We won't discuss these here; instead, we'll talk about them as they're used in the code to come.
 
 ```js
-let gl = null;
-let glCanvas = null;
-
-// Aspect ratio and coordinate system
-// details
-
-let aspectRatio;
-let currentRotation = [0, 1];
-let currentScale = [1.0, 1.0];
+const glCanvas = document.getElementById("gl-canvas");
+const gl = glCanvas.getContext("webgl");
+
+const shaderSet = [
+  {
+    type: gl.VERTEX_SHADER,
+    id: "vertex-shader",
+  },
+  {
+    type: gl.FRAGMENT_SHADER,
+    id: "fragment-shader",
+  },
+];
+
+const shaderProgram = buildShaderProgram(shaderSet);
+
+// Aspect ratio and coordinate system details
+const aspectRatio = glCanvas.width / glCanvas.height;
+const currentRotation = [0, 1];
+const currentScale = [1.0, aspectRatio];
 
 // Vertex information
-
-let vertexArray;
-let vertexBuffer;
-let vertexNumComponents;
-let vertexCount;
-
-// Rendering data shared with the
-// scalers.
-
+const vertexArray = new Float32Array([
+  -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5,
+]);
+const vertexBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, vertexArray, gl.STATIC_DRAW);
+const vertexNumComponents = 2;
+const vertexCount = vertexArray.length / vertexNumComponents;
+
+// Rendering data shared with the scalers.
 let uScalingFactor;
 let uGlobalColor;
 let uRotationVector;
 let aVertexPosition;
 
 // Animation timing
-
-let shaderProgram;
-let currentAngle;
 let previousTime = 0.0;
-let degreesPerSecond = 90.0;
-```
+const degreesPerSecond = 90.0;
+let currentAngle = 0.0;
 
-Initializing the program is handled through a {{domxref("Window/load_event", "load")}} event handler called `startup()`:
-
-```js
-window.addEventListener("load", startup, false);
-
-function startup() {
-  glCanvas = document.getElementById("gl-canvas");
-  gl = glCanvas.getContext("webgl");
-
-  const shaderSet = [
-    {
-      type: gl.VERTEX_SHADER,
-      id: "vertex-shader",
-    },
-    {
-      type: gl.FRAGMENT_SHADER,
-      id: "fragment-shader",
-    },
-  ];
-
-  shaderProgram = buildShaderProgram(shaderSet);
-
-  aspectRatio = glCanvas.width / glCanvas.height;
-  currentRotation = [0, 1];
-  currentScale = [1.0, aspectRatio];
-
-  vertexArray = new Float32Array([
-    -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5,
-  ]);
-
-  vertexBuffer = gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
-  gl.bufferData(gl.ARRAY_BUFFER, vertexArray, gl.STATIC_DRAW);
-
-  vertexNumComponents = 2;
-  vertexCount = vertexArray.length / vertexNumComponents;
-
-  currentAngle = 0.0;
-
-  animateScene();
-}
+animateScene();
 ```
 
 After getting the WebGL context, `gl`, we need to begin by building the shader program. Here, we're using code designed to let us add multiple shaders to our program quite easily. The array `shaderSet` contains a list of objects, each describing one shader function to be compiled into the program. Each function has a type (one of `gl.VERTEX_SHADER` or `gl.FRAGMENT_SHADER`) and an ID (the ID of the {{HTMLElement("script")}} element containing the shader's code).
diff --git a/files/en-us/web/api/webgl_api/by_example/hello_glsl/index.md b/files/en-us/web/api/webgl_api/by_example/hello_glsl/index.md
index 6039d770f45b04f..17f589d40fc2759 100644
--- a/files/en-us/web/api/webgl_api/by_example/hello_glsl/index.md
+++ b/files/en-us/web/api/webgl_api/by_example/hello_glsl/index.md
@@ -65,48 +65,52 @@ button {
 ```
 
 ```js
-window.addEventListener("load", setupWebGL, false);
-let gl;
-let program;
-
-function setupWebGL(evt) {
-  window.removeEventListener(evt.type, setupWebGL, false);
-  if (!(gl = getRenderingContext())) return;
-
-  let source = document.querySelector("#vertex-shader").innerHTML;
-  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
-  gl.shaderSource(vertexShader, source);
-  gl.compileShader(vertexShader);
-
-  source = document.querySelector("#fragment-shader").innerHTML;
-  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-  gl.shaderSource(fragmentShader, source);
-  gl.compileShader(fragmentShader);
-  program = gl.createProgram();
-  gl.attachShader(program, vertexShader);
-  gl.attachShader(program, fragmentShader);
-  gl.linkProgram(program);
-  gl.detachShader(program, vertexShader);
-  gl.detachShader(program, fragmentShader);
-  gl.deleteShader(vertexShader);
-  gl.deleteShader(fragmentShader);
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    const linkErrLog = gl.getProgramInfoLog(program);
-    cleanup();
-    document.querySelector("p").textContent =
-      `Shader program did not link successfully. Error log: ${linkErrLog}`;
-    return;
-  }
+const canvas = document.querySelector("canvas");
+
+const gl = getRenderingContext();
+let source = document.querySelector("#vertex-shader").innerHTML;
+const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(vertexShader, source);
+gl.compileShader(vertexShader);
+
+source = document.querySelector("#fragment-shader").innerHTML;
+const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+gl.shaderSource(fragmentShader, source);
+gl.compileShader(fragmentShader);
+const program = gl.createProgram();
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+gl.linkProgram(program);
+gl.detachShader(program, vertexShader);
+gl.detachShader(program, fragmentShader);
+gl.deleteShader(vertexShader);
+gl.deleteShader(fragmentShader);
+if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+  const linkErrLog = gl.getProgramInfoLog(program);
+  cleanup();
+  document.querySelector("p").textContent =
+    `Shader program did not link successfully. Error log: ${linkErrLog}`;
+  throw new Error("Program failed to link");
+}
 
-  initializeAttributes();
+let buffer;
+initializeAttributes();
 
-  gl.useProgram(program);
-  gl.drawArrays(gl.POINTS, 0, 1);
+gl.useProgram(program);
+gl.drawArrays(gl.POINTS, 0, 1);
 
-  cleanup();
+cleanup();
+
+function getRenderingContext() {
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  const gl = canvas.getContext("webgl");
+  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
 }
 
-let buffer;
 function initializeAttributes() {
   gl.enableVertexAttribArray(0);
   buffer = gl.createBuffer();
@@ -125,26 +129,6 @@ function cleanup() {
 }
 ```
 
-```js hidden
-function getRenderingContext() {
-  const canvas = document.querySelector("canvas");
-  canvas.width = canvas.clientWidth;
-  canvas.height = canvas.clientHeight;
-  const gl =
-    canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
-  if (!gl) {
-    const paragraph = document.querySelector("p");
-    paragraph.textContent =
-      "Failed. Your browser or device may not support WebGL.";
-    return null;
-  }
-  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
-  gl.clearColor(0.0, 0.0, 0.0, 1.0);
-  gl.clear(gl.COLOR_BUFFER_BIT);
-  return gl;
-}
-```
-
 The source code of this example is also available on [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/hello-glsl).
 
 {{PreviousNext("Web/API/WebGL_API/By_example/Raining_rectangles","Web/API/WebGL_API/By_example/Hello_vertex_attributes")}}
diff --git a/files/en-us/web/api/webgl_api/by_example/hello_vertex_attributes/index.md b/files/en-us/web/api/webgl_api/by_example/hello_vertex_attributes/index.md
index d8d2e4372d04e25..20addd818d5f0aa 100644
--- a/files/en-us/web/api/webgl_api/by_example/hello_vertex_attributes/index.md
+++ b/files/en-us/web/api/webgl_api/by_example/hello_vertex_attributes/index.md
@@ -70,61 +70,62 @@ button {
 ```
 
 ```js
-window.addEventListener("load", setupWebGL, false);
-let gl;
-let program;
-
-function setupWebGL(evt) {
-  window.removeEventListener(evt.type, setupWebGL, false);
-  if (!(gl = getRenderingContext())) return;
-
-  let source = document.querySelector("#vertex-shader").innerHTML;
-  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
-  gl.shaderSource(vertexShader, source);
-  gl.compileShader(vertexShader);
-  source = document.querySelector("#fragment-shader").innerHTML;
-  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-  gl.shaderSource(fragmentShader, source);
-  gl.compileShader(fragmentShader);
-  program = gl.createProgram();
-  gl.attachShader(program, vertexShader);
-  gl.attachShader(program, fragmentShader);
-  gl.linkProgram(program);
-  gl.detachShader(program, vertexShader);
-  gl.detachShader(program, fragmentShader);
-  gl.deleteShader(vertexShader);
-  gl.deleteShader(fragmentShader);
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    const linkErrLog = gl.getProgramInfoLog(program);
-    cleanup();
-    document.querySelector("p").textContent =
-      `Shader program did not link successfully. Error log: ${linkErrLog}`;
-    return;
-  }
+const canvas = document.querySelector("canvas");
+
+const gl = getRenderingContext();
+let source = document.querySelector("#vertex-shader").innerHTML;
+const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(vertexShader, source);
+gl.compileShader(vertexShader);
+
+source = document.querySelector("#fragment-shader").innerHTML;
+const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+gl.shaderSource(fragmentShader, source);
+gl.compileShader(fragmentShader);
+const program = gl.createProgram();
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+gl.linkProgram(program);
+gl.detachShader(program, vertexShader);
+gl.detachShader(program, fragmentShader);
+gl.deleteShader(vertexShader);
+gl.deleteShader(fragmentShader);
+if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+  const linkErrLog = gl.getProgramInfoLog(program);
+  cleanup();
+  document.querySelector("p").textContent =
+    `Shader program did not link successfully. Error log: ${linkErrLog}`;
+  throw new Error("Program failed to link");
+}
 
-  initializeAttributes();
-  gl.useProgram(program);
+let buffer;
+initializeAttributes();
+gl.useProgram(program);
+gl.drawArrays(gl.POINTS, 0, 1);
+
+canvas.addEventListener("click", (evt) => {
+  const clickXRelativeToCanvas = evt.pageX - evt.target.offsetLeft;
+  const clickXinWebGLCoords =
+    (2.0 * (clickXRelativeToCanvas - gl.drawingBufferWidth / 2)) /
+    gl.drawingBufferWidth;
+  gl.bufferData(
+    gl.ARRAY_BUFFER,
+    new Float32Array([clickXinWebGLCoords]),
+    gl.STATIC_DRAW,
+  );
   gl.drawArrays(gl.POINTS, 0, 1);
+});
 
-  document.querySelector("canvas").addEventListener(
-    "click",
-    (evt) => {
-      const clickXRelativeToCanvas = evt.pageX - evt.target.offsetLeft;
-      const clickXinWebGLCoords =
-        (2.0 * (clickXRelativeToCanvas - gl.drawingBufferWidth / 2)) /
-        gl.drawingBufferWidth;
-      gl.bufferData(
-        gl.ARRAY_BUFFER,
-        new Float32Array([clickXinWebGLCoords]),
-        gl.STATIC_DRAW,
-      );
-      gl.drawArrays(gl.POINTS, 0, 1);
-    },
-    false,
-  );
+function getRenderingContext() {
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  const gl = canvas.getContext("webgl");
+  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
 }
 
-let buffer;
 function initializeAttributes() {
   gl.enableVertexAttribArray(0);
   buffer = gl.createBuffer();
@@ -145,26 +146,6 @@ function cleanup() {
 }
 ```
 
-```js hidden
-function getRenderingContext() {
-  const canvas = document.querySelector("canvas");
-  canvas.width = canvas.clientWidth;
-  canvas.height = canvas.clientHeight;
-  const gl =
-    canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
-  if (!gl) {
-    const paragraph = document.querySelector("p");
-    paragraph.textContent =
-      "Failed. Your browser or device may not support WebGL.";
-    return null;
-  }
-  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
-  gl.clearColor(0.0, 0.0, 0.0, 1.0);
-  gl.clear(gl.COLOR_BUFFER_BIT);
-  return gl;
-}
-```
-
 The source code of this example is also available on [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/hello-vertex-attributes).
 
 {{PreviousNext("Web/API/WebGL_API/By_example/Hello_GLSL","Web/API/WebGL_API/By_example/Textures_from_code")}}
diff --git a/files/en-us/web/api/webgl_api/by_example/raining_rectangles/index.md b/files/en-us/web/api/webgl_api/by_example/raining_rectangles/index.md
index 5f1fa9e9043a522..210ad81311cca84 100644
--- a/files/en-us/web/api/webgl_api/by_example/raining_rectangles/index.md
+++ b/files/en-us/web/api/webgl_api/by_example/raining_rectangles/index.md
@@ -48,23 +48,24 @@ button {
 ```
 
 ```js
-window.addEventListener("load", setupAnimation, false);
-let gl;
-let timer;
-let rainingRect;
-let scoreDisplay;
-let missesDisplay;
-function setupAnimation(evt) {
-  window.removeEventListener(evt.type, setupAnimation, false);
-  if (!(gl = getRenderingContext())) return;
-  gl.enable(gl.SCISSOR_TEST);
-
-  rainingRect = new Rectangle();
-  timer = setTimeout(drawAnimation, 17);
-  document
-    .querySelector("canvas")
-    .addEventListener("click", playerClick, false);
-  [scoreDisplay, missesDisplay] = document.querySelectorAll("strong");
+const canvas = document.querySelector("canvas");
+
+const gl = getRenderingContext();
+gl.enable(gl.SCISSOR_TEST);
+let rainingRect = new Rectangle();
+
+let timer = setTimeout(drawAnimation, 17);
+canvas.addEventListener("click", playerClick);
+const [scoreDisplay, missesDisplay] = document.querySelectorAll("strong");
+
+function getRenderingContext() {
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  const gl = canvas.getContext("webgl");
+  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
 }
 
 let score = 0;
@@ -141,26 +142,6 @@ function getRandomVector() {
 }
 ```
 
-```js hidden
-function getRenderingContext() {
-  const canvas = document.querySelector("canvas");
-  canvas.width = canvas.clientWidth;
-  canvas.height = canvas.clientHeight;
-  const gl =
-    canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
-  if (!gl) {
-    const paragraph = document.querySelector("p");
-    paragraph.textContent =
-      "Failed. Your browser or device may not support WebGL.";
-    return null;
-  }
-  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
-  gl.clearColor(0.0, 0.0, 0.0, 1.0);
-  gl.clear(gl.COLOR_BUFFER_BIT);
-  return gl;
-}
-```
-
 The source code of this example is also available on [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/raining-rectangles).
 
 {{PreviousNext("Web/API/WebGL_API/By_example/Scissor_animation","Web/API/WebGL_API/By_example/Hello_GLSL")}}
diff --git a/files/en-us/web/api/webgl_api/by_example/scissor_animation/index.md b/files/en-us/web/api/webgl_api/by_example/scissor_animation/index.md
index 7b072a28bfed7fc..c0e122d11887f39 100644
--- a/files/en-us/web/api/webgl_api/by_example/scissor_animation/index.md
+++ b/files/en-us/web/api/webgl_api/by_example/scissor_animation/index.md
@@ -52,46 +52,51 @@ button {
 ```
 
 ```js
-window.addEventListener("load", setupAnimation, false);
+const canvas = document.querySelector("canvas");
+
 // Variables to hold the WebGL context, and the color and
 // position of animated squares.
-let gl;
+const gl = getRenderingContext();
 let color = getRandomColor();
-let position;
-
-function setupAnimation(evt) {
-  window.removeEventListener(evt.type, setupAnimation, false);
-  if (!(gl = getRenderingContext())) return;
-
-  gl.enable(gl.SCISSOR_TEST);
-  gl.clearColor(color[0], color[1], color[2], 1.0);
-  // Unlike the browser window, vertical position in WebGL is
-  // measured from bottom to top. In here we set the initial
-  // position of the square to be at the top left corner of the
-  // drawing buffer.
-  position = [0, gl.drawingBufferHeight];
-
-  const button = document.querySelector("button");
-  let timer;
-
-  function startAnimation(evt) {
-    button.removeEventListener(evt.type, startAnimation, false);
-    button.addEventListener("click", stopAnimation, false);
-    document.querySelector("strong").textContent = "stop";
-    timer = setInterval(drawAnimation, 17);
-    drawAnimation();
-  }
+// Unlike the browser window, vertical position in WebGL is
+// measured from bottom to top. In here we set the initial
+// position of the square to be at the top left corner of the
+// drawing buffer.
+let position = [0, gl.drawingBufferHeight];
 
-  function stopAnimation(evt) {
-    button.removeEventListener(evt.type, stopAnimation, false);
-    button.addEventListener("click", startAnimation, false);
-    document.querySelector("strong").textContent = "start";
-    clearInterval(timer);
-  }
+gl.enable(gl.SCISSOR_TEST);
+gl.clearColor(color[0], color[1], color[2], 1.0);
+
+const button = document.querySelector("button");
+let timer;
+
+function getRenderingContext() {
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  const gl = canvas.getContext("webgl");
+  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
 
-  stopAnimation({ type: "click" });
+function startAnimation(evt) {
+  button.removeEventListener(evt.type, startAnimation, false);
+  button.addEventListener("click", stopAnimation, false);
+  document.querySelector("strong").textContent = "stop";
+  timer = setInterval(drawAnimation, 17);
+  drawAnimation();
 }
 
+function stopAnimation(evt) {
+  button.removeEventListener(evt.type, stopAnimation, false);
+  button.addEventListener("click", startAnimation, false);
+  document.querySelector("strong").textContent = "start";
+  clearInterval(timer);
+}
+
+stopAnimation({ type: "click" });
+
 // Variables to hold the size and velocity of the square.
 const size = [60, 60];
 let velocity = 3.0;
@@ -123,26 +128,6 @@ function getRandomColor() {
 }
 ```
 
-```js hidden
-function getRenderingContext() {
-  const canvas = document.querySelector("canvas");
-  canvas.width = canvas.clientWidth;
-  canvas.height = canvas.clientHeight;
-  const gl =
-    canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
-  if (!gl) {
-    const paragraph = document.querySelector("p");
-    paragraph.textContent =
-      "Failed. Your browser or device may not support WebGL.";
-    return null;
-  }
-  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
-  gl.clearColor(0.0, 0.0, 0.0, 1.0);
-  gl.clear(gl.COLOR_BUFFER_BIT);
-  return gl;
-}
-```
-
 The source code of this example is also available on [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/scissor-animation).
 
 {{PreviousNext("Web/API/WebGL_API/By_example/Boilerplate_1","Web/API/WebGL_API/By_example/Raining_rectangles")}}
diff --git a/files/en-us/web/api/webgl_api/by_example/textures_from_code/index.md b/files/en-us/web/api/webgl_api/by_example/textures_from_code/index.md
index 69189a9a2b23b16..b5655d42c9241ae 100644
--- a/files/en-us/web/api/webgl_api/by_example/textures_from_code/index.md
+++ b/files/en-us/web/api/webgl_api/by_example/textures_from_code/index.md
@@ -73,47 +73,50 @@ button {
 ```
 
 ```js
-window.addEventListener("load", setupWebGL, false);
-
-let gl;
-let program;
-
-function setupWebGL(evt) {
-  window.removeEventListener(evt.type, setupWebGL, false);
-  if (!(gl = getRenderingContext())) return;
-
-  let source = document.querySelector("#vertex-shader").innerHTML;
-  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
-  gl.shaderSource(vertexShader, source);
-  gl.compileShader(vertexShader);
-
-  source = document.querySelector("#fragment-shader").innerHTML;
-  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-  gl.shaderSource(fragmentShader, source);
-  gl.compileShader(fragmentShader);
-
-  program = gl.createProgram();
-  gl.attachShader(program, vertexShader);
-  gl.attachShader(program, fragmentShader);
-  gl.linkProgram(program);
-  gl.detachShader(program, vertexShader);
-  gl.detachShader(program, fragmentShader);
-  gl.deleteShader(vertexShader);
-  gl.deleteShader(fragmentShader);
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    const linkErrLog = gl.getProgramInfoLog(program);
-    cleanup();
-    document.querySelector("p").textContent =
-      `Shader program did not link successfully. Error log: ${linkErrLog}`;
-    return;
-  }
-  initializeAttributes();
-  gl.useProgram(program);
-  gl.drawArrays(gl.POINTS, 0, 1);
+const canvas = document.querySelector("canvas");
+
+const gl = getRenderingContext();
+let source = document.querySelector("#vertex-shader").innerHTML;
+const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(vertexShader, source);
+gl.compileShader(vertexShader);
+
+source = document.querySelector("#fragment-shader").innerHTML;
+const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+gl.shaderSource(fragmentShader, source);
+gl.compileShader(fragmentShader);
+
+const program = gl.createProgram();
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+gl.linkProgram(program);
+gl.detachShader(program, vertexShader);
+gl.detachShader(program, fragmentShader);
+gl.deleteShader(vertexShader);
+gl.deleteShader(fragmentShader);
+if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+  const linkErrLog = gl.getProgramInfoLog(program);
   cleanup();
+  document.querySelector("p").textContent =
+    `Shader program did not link successfully. Error log: ${linkErrLog}`;
+  throw new Error("Program failed to link");
 }
-
 let buffer;
+initializeAttributes();
+gl.useProgram(program);
+gl.drawArrays(gl.POINTS, 0, 1);
+cleanup();
+
+function getRenderingContext() {
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  const gl = canvas.getContext("webgl");
+  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+
 function initializeAttributes() {
   gl.enableVertexAttribArray(0);
   buffer = gl.createBuffer();
@@ -133,26 +136,6 @@ function cleanup() {
 }
 ```
 
-```js hidden
-function getRenderingContext() {
-  const canvas = document.querySelector("canvas");
-  canvas.width = canvas.clientWidth;
-  canvas.height = canvas.clientHeight;
-  const gl =
-    canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
-  if (!gl) {
-    const paragraph = document.querySelector("p");
-    paragraph.textContent =
-      "Failed. Your browser or device may not support WebGL.";
-    return null;
-  }
-  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
-  gl.clearColor(0.0, 0.0, 0.0, 1.0);
-  gl.clear(gl.COLOR_BUFFER_BIT);
-  return gl;
-}
-```
-
 The source code of this example is also available on [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/textures-from-code).
 
 {{PreviousNext("Web/API/WebGL_API/By_example/Hello_vertex_attributes","Web/API/WebGL_API/By_example/Video_textures")}}
diff --git a/files/en-us/web/api/webglrenderingcontext/makexrcompatible/index.md b/files/en-us/web/api/webglrenderingcontext/makexrcompatible/index.md
index 01358dd71c3cf19..405f45270ed873a 100644
--- a/files/en-us/web/api/webglrenderingcontext/makexrcompatible/index.md
+++ b/files/en-us/web/api/webglrenderingcontext/makexrcompatible/index.md
@@ -96,12 +96,10 @@ let currentScene = "scene1";
 let glStartButton;
 let xrStartButton;
 
-window.addEventListener("load", (event) => {
-  loadSceneResources(currentScene);
+loadSceneResources(currentScene);
 
-  glStartButton.addEventListener("click", handleStartButtonClick);
-  xrStartButton.addEventListener("click", handleStartButtonClick);
-});
+glStartButton.addEventListener("click", handleStartButtonClick);
+xrStartButton.addEventListener("click", handleStartButtonClick);
 
 outputCanvas.addEventListener("webglcontextlost", (event) => {
   /* The context has been lost but can be restored */
diff --git a/files/en-us/web/api/webotp_api/index.md b/files/en-us/web/api/webotp_api/index.md
index 8f06c95489639a1..6f5c64d3e69af5b 100644
--- a/files/en-us/web/api/webotp_api/index.md
+++ b/files/en-us/web/api/webotp_api/index.md
@@ -130,34 +130,32 @@ The JavaScript is as follows:
 ```js
 // Detect feature support via OTPCredential availability
 if ("OTPCredential" in window) {
-  window.addEventListener("DOMContentLoaded", (e) => {
-    const input = document.querySelector('input[autocomplete="one-time-code"]');
-    if (!input) return;
-    // Set up an AbortController to use with the OTP request
-    const ac = new AbortController();
-    const form = input.closest("form");
-    if (form) {
-      // Abort the OTP request if the user attempts to submit the form manually
-      form.addEventListener("submit", (e) => {
-        ac.abort();
-      });
-    }
-    // Request the OTP via get()
-    navigator.credentials
-      .get({
-        otp: { transport: ["sms"] },
-        signal: ac.signal,
-      })
-      .then((otp) => {
-        // When the OTP is received by the app client, enter it into the form
-        // input and submit the form automatically
-        input.value = otp.code;
-        if (form) form.submit();
-      })
-      .catch((err) => {
-        console.error(err);
-      });
-  });
+  const input = document.querySelector('input[autocomplete="one-time-code"]');
+  if (!input) return;
+  // Set up an AbortController to use with the OTP request
+  const ac = new AbortController();
+  const form = input.closest("form");
+  if (form) {
+    // Abort the OTP request if the user attempts to submit the form manually
+    form.addEventListener("submit", (e) => {
+      ac.abort();
+    });
+  }
+  // Request the OTP via get()
+  navigator.credentials
+    .get({
+      otp: { transport: ["sms"] },
+      signal: ac.signal,
+    })
+    .then((otp) => {
+      // When the OTP is received by the app client, enter it into the form
+      // input and submit the form automatically
+      input.value = otp.code;
+      if (form) form.submit();
+    })
+    .catch((err) => {
+      console.error(err);
+    });
 }
 ```
 
diff --git a/files/en-us/web/api/webxr_device_api/movement_and_motion/index.md b/files/en-us/web/api/webxr_device_api/movement_and_motion/index.md
index bfa233504be0fdf..af4d620c892953d 100644
--- a/files/en-us/web/api/webxr_device_api/movement_and_motion/index.md
+++ b/files/en-us/web/api/webxr_device_api/movement_and_motion/index.md
@@ -72,7 +72,12 @@ let polyfill = null;
 let xrSession = null;
 let xrInputSources = null;
 let xrReferenceSpace = null;
-let xrButton = null;
+const xrButton = document.querySelector("#enter-xr");
+const projectionMatrixOut = document.querySelector("#projection-matrix div");
+const modelMatrixOut = document.querySelector("#model-view-matrix div");
+const cameraMatrixOut = document.querySelector("#camera-matrix div");
+const mouseMatrixOut = document.querySelector("#mouse-matrix div");
+
 let gl = null;
 let animationFrameRequestID = 0;
 let shaderProgram = null;
@@ -125,31 +130,17 @@ Suffice it to say that the vertex shader computes the position of each vertex gi
 
 ## Starting up and shutting down WebXR
 
-Upon initially loading the script, we install a handler for the {{domxref("Window.load_event", "load")}} event, so that we can perform initialization.
-
 ```js
-window.addEventListener("load", onLoad);
-
-function onLoad() {
-  xrButton = document.querySelector("#enter-xr");
-  xrButton.addEventListener("click", onXRButtonClick);
+xrButton.addEventListener("click", onXRButtonClick);
 
-  projectionMatrixOut = document.querySelector("#projection-matrix div");
-  modelMatrixOut = document.querySelector("#model-view-matrix div");
-  cameraMatrixOut = document.querySelector("#camera-matrix div");
-  mouseMatrixOut = document.querySelector("#mouse-matrix div");
-
-  if (!navigator.xr || enableForcePolyfill) {
-    console.log("Using the polyfill");
-    polyfill = new WebXRPolyfill();
-  }
-  setupXRButton();
+if (!navigator.xr || enableForcePolyfill) {
+  console.log("Using the polyfill");
+  polyfill = new WebXRPolyfill();
 }
+setupXRButton();
 ```
 
-The `load` event handler gets a reference to the button that toggles WebXR on and off into `xrButton`, then adds a handler for {{domxref("Element.click_event", "click")}} events. Then references are obtained to the four {{HTMLElement("div")}} blocks into which we'll output the current contents of each of the key matrices for informational purposes while our scene is running.
-
-Then we look to see if {{domxref("navigator.xr")}} is defined. If it isn't—and/or the `enableForcePolyfill` configuration constant is set to `true`—we install the WebXR polyfill by instantiating the `WebXRPolyfill` class.
+We add a handler for {{domxref("Element.click_event", "click")}} events. Then we look to see if {{domxref("navigator.xr")}} is defined. If it isn't—and/or the `enableForcePolyfill` configuration constant is set to `true`—we install the WebXR polyfill by instantiating the `WebXRPolyfill` class.
 
 ### Handling the startup and shutdown UI
 
diff --git a/files/en-us/web/api/window/load_event/index.md b/files/en-us/web/api/window/load_event/index.md
index 8d9720af54568f9..585bb7e5a3d1fb1 100644
--- a/files/en-us/web/api/window/load_event/index.md
+++ b/files/en-us/web/api/window/load_event/index.md
@@ -19,6 +19,8 @@ This event is not cancelable and does not bubble.
 > [!NOTE]
 > The `load` event that is dispatched when the main document has loaded _is_ dispatched on the `window`, but has two mutated properties: `target` is `document`, and `path` is `undefined`. These two properties are mutated due to legacy conformance.
 
+To avoid running a script before the DOM it manipulates has been fully constructed, you can place the script at the end of the document body, immediately before the closing `</body>` tag, without wrapping it in an event listener. You should usually only use the `load` event to wait for external resources, such as images or deferred scripts, to load.
+
 ## Syntax
 
 Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
diff --git a/files/en-us/web/api/xmlhttprequestupload/index.md b/files/en-us/web/api/xmlhttprequestupload/index.md
index e6206ebc97ddd7e..7e0202662030baf 100644
--- a/files/en-us/web/api/xmlhttprequestupload/index.md
+++ b/files/en-us/web/api/xmlhttprequestupload/index.md
@@ -94,73 +94,71 @@ progress.visible {
 #### JavaScript
 
 ```js
-addEventListener("DOMContentLoaded", () => {
-  const fileInput = document.getElementById("file");
-  const progressBar = document.querySelector("progress");
-  const log = document.querySelector("output");
-  const abortButton = document.getElementById("abort");
-
-  fileInput.addEventListener("change", () => {
-    const xhr = new XMLHttpRequest();
-    xhr.timeout = 2000; // 2 seconds
-
-    // Link abort button
-    abortButton.addEventListener(
-      "click",
-      () => {
-        xhr.abort();
-      },
-      { once: true },
-    );
-
-    // When the upload starts, we display the progress bar
-    xhr.upload.addEventListener("loadstart", (event) => {
-      progressBar.classList.add("visible");
-      progressBar.value = 0;
-      progressBar.max = event.total;
-      log.textContent = "Uploading (0%)…";
-      abortButton.disabled = false;
-    });
-
-    // Each time a progress event is received, we update the bar
-    xhr.upload.addEventListener("progress", (event) => {
-      progressBar.value = event.loaded;
-      log.textContent = `Uploading (${(
-        (event.loaded / event.total) *
-        100
-      ).toFixed(2)}%)…`;
-    });
-
-    // When the upload is finished, we hide the progress bar.
-    xhr.upload.addEventListener("loadend", (event) => {
-      progressBar.classList.remove("visible");
-      if (event.loaded !== 0) {
-        log.textContent = "Upload finished.";
-      }
-      abortButton.disabled = true;
-    });
-
-    // In case of an error, an abort, or a timeout, we hide the progress bar
-    // Note that these events can be listened to on the xhr object too
-    function errorAction(event) {
-      progressBar.classList.remove("visible");
-      log.textContent = `Upload failed: ${event.type}`;
-    }
-    xhr.upload.addEventListener("error", errorAction);
-    xhr.upload.addEventListener("abort", errorAction);
-    xhr.upload.addEventListener("timeout", errorAction);
-
-    // Build the payload
-    const fileData = new FormData();
-    fileData.append("file", fileInput.files[0]);
+const fileInput = document.getElementById("file");
+const progressBar = document.querySelector("progress");
+const log = document.querySelector("output");
+const abortButton = document.getElementById("abort");
+
+fileInput.addEventListener("change", () => {
+  const xhr = new XMLHttpRequest();
+  xhr.timeout = 2000; // 2 seconds
+
+  // Link abort button
+  abortButton.addEventListener(
+    "click",
+    () => {
+      xhr.abort();
+    },
+    { once: true },
+  );
+
+  // When the upload starts, we display the progress bar
+  xhr.upload.addEventListener("loadstart", (event) => {
+    progressBar.classList.add("visible");
+    progressBar.value = 0;
+    progressBar.max = event.total;
+    log.textContent = "Uploading (0%)…";
+    abortButton.disabled = false;
+  });
 
-    // Theoretically, event listeners could be set after the open() call
-    // but browsers are buggy here
-    xhr.open("POST", "upload_test.php", true);
+  // Each time a progress event is received, we update the bar
+  xhr.upload.addEventListener("progress", (event) => {
+    progressBar.value = event.loaded;
+    log.textContent = `Uploading (${(
+      (event.loaded / event.total) *
+      100
+    ).toFixed(2)}%)…`;
+  });
 
-    // Note that the event listener must be set before sending (as it is a preflighted request)
-    xhr.send(fileData);
+  // When the upload is finished, we hide the progress bar.
+  xhr.upload.addEventListener("loadend", (event) => {
+    progressBar.classList.remove("visible");
+    if (event.loaded !== 0) {
+      log.textContent = "Upload finished.";
+    }
+    abortButton.disabled = true;
   });
+
+  // In case of an error, an abort, or a timeout, we hide the progress bar
+  // Note that these events can be listened to on the xhr object too
+  function errorAction(event) {
+    progressBar.classList.remove("visible");
+    log.textContent = `Upload failed: ${event.type}`;
+  }
+  xhr.upload.addEventListener("error", errorAction);
+  xhr.upload.addEventListener("abort", errorAction);
+  xhr.upload.addEventListener("timeout", errorAction);
+
+  // Build the payload
+  const fileData = new FormData();
+  fileData.append("file", fileInput.files[0]);
+
+  // Theoretically, event listeners could be set after the open() call
+  // but browsers are buggy here
+  xhr.open("POST", "upload_test.php", true);
+
+  // Note that the event listener must be set before sending (as it is a preflighted request)
+  xhr.send(fileData);
 });
 ```
 
diff --git a/files/en-us/web/css/animation-delay/index.md b/files/en-us/web/css/animation-delay/index.md
index a07a7037b30fcdd..bdacebc716d68fd 100644
--- a/files/en-us/web/css/animation-delay/index.md
+++ b/files/en-us/web/css/animation-delay/index.md
@@ -72,41 +72,37 @@ animation-delay: -2s;
 ```
 
 ```js interactive-example
-"use strict";
+const el = document.getElementById("example-element");
+const status = document.getElementById("play-status");
 
-window.addEventListener("load", () => {
-  const el = document.getElementById("example-element");
-  const status = document.getElementById("play-status");
-
-  function update() {
-    status.textContent = "delaying";
-    el.className = "";
+function update() {
+  status.textContent = "delaying";
+  el.className = "";
+  window.requestAnimationFrame(() => {
     window.requestAnimationFrame(() => {
-      window.requestAnimationFrame(() => {
-        el.className = "animating";
-      });
+      el.className = "animating";
     });
-  }
-
-  el.addEventListener("animationstart", () => {
-    status.textContent = "playing";
-  });
-
-  el.addEventListener("animationend", () => {
-    status.textContent = "finished";
   });
+}
 
-  const observer = new MutationObserver(() => {
-    update();
-  });
+el.addEventListener("animationstart", () => {
+  status.textContent = "playing";
+});
 
-  observer.observe(el, {
-    attributes: true,
-    attributeFilter: ["style"],
-  });
+el.addEventListener("animationend", () => {
+  status.textContent = "finished";
+});
 
+const observer = new MutationObserver(() => {
   update();
 });
+
+observer.observe(el, {
+  attributes: true,
+  attributeFilter: ["style"],
+});
+
+update();
 ```
 
 It is often convenient to use the shorthand property {{cssxref("animation")}} to set all animation properties at once.
diff --git a/files/en-us/web/css/animation-direction/index.md b/files/en-us/web/css/animation-direction/index.md
index d230b626be0f749..aefc14362fd232d 100644
--- a/files/en-us/web/css/animation-direction/index.md
+++ b/files/en-us/web/css/animation-direction/index.md
@@ -73,21 +73,17 @@ animation-direction: alternate-reverse;
 ```
 
 ```js interactive-example
-"use strict";
-
-window.addEventListener("load", () => {
-  const el = document.getElementById("example-element");
-  const button = document.getElementById("play-pause");
-
-  button.addEventListener("click", () => {
-    if (el.classList.contains("running")) {
-      el.classList.remove("running");
-      button.textContent = "Play";
-    } else {
-      el.classList.add("running");
-      button.textContent = "Pause";
-    }
-  });
+const el = document.getElementById("example-element");
+const button = document.getElementById("play-pause");
+
+button.addEventListener("click", () => {
+  if (el.classList.contains("running")) {
+    el.classList.remove("running");
+    button.textContent = "Play";
+  } else {
+    el.classList.add("running");
+    button.textContent = "Pause";
+  }
 });
 ```
 
diff --git a/files/en-us/web/css/animation-duration/index.md b/files/en-us/web/css/animation-duration/index.md
index 0c1f4385addf1ac..f25d1794a673bca 100644
--- a/files/en-us/web/css/animation-duration/index.md
+++ b/files/en-us/web/css/animation-duration/index.md
@@ -69,21 +69,17 @@ animation-duration: 0s;
 ```
 
 ```js interactive-example
-"use strict";
-
-window.addEventListener("load", () => {
-  const el = document.getElementById("example-element");
-  const button = document.getElementById("play-pause");
-
-  button.addEventListener("click", () => {
-    if (el.classList.contains("running")) {
-      el.classList.remove("running");
-      button.textContent = "Play";
-    } else {
-      el.classList.add("running");
-      button.textContent = "Pause";
-    }
-  });
+const el = document.getElementById("example-element");
+const button = document.getElementById("play-pause");
+
+button.addEventListener("click", () => {
+  if (el.classList.contains("running")) {
+    el.classList.remove("running");
+    button.textContent = "Play";
+  } else {
+    el.classList.add("running");
+    button.textContent = "Pause";
+  }
 });
 ```
 
diff --git a/files/en-us/web/css/animation-fill-mode/index.md b/files/en-us/web/css/animation-fill-mode/index.md
index 2c067be93563f23..eec2eb1d1167168 100644
--- a/files/en-us/web/css/animation-fill-mode/index.md
+++ b/files/en-us/web/css/animation-fill-mode/index.md
@@ -77,41 +77,37 @@ animation-delay: 1s;
 ```
 
 ```js interactive-example
-"use strict";
+const el = document.getElementById("example-element");
+const status = document.getElementById("play-status");
 
-window.addEventListener("load", () => {
-  const el = document.getElementById("example-element");
-  const status = document.getElementById("play-status");
-
-  function update() {
-    status.textContent = "delaying";
-    el.className = "";
+function update() {
+  status.textContent = "delaying";
+  el.className = "";
+  window.requestAnimationFrame(() => {
     window.requestAnimationFrame(() => {
-      window.requestAnimationFrame(() => {
-        el.className = "animating";
-      });
+      el.className = "animating";
     });
-  }
-
-  el.addEventListener("animationstart", () => {
-    status.textContent = "playing";
-  });
-
-  el.addEventListener("animationend", () => {
-    status.textContent = "finished";
   });
+}
 
-  const observer = new MutationObserver(() => {
-    update();
-  });
+el.addEventListener("animationstart", () => {
+  status.textContent = "playing";
+});
 
-  observer.observe(el, {
-    attributes: true,
-    attributeFilter: ["style"],
-  });
+el.addEventListener("animationend", () => {
+  status.textContent = "finished";
+});
 
+const observer = new MutationObserver(() => {
   update();
 });
+
+observer.observe(el, {
+  attributes: true,
+  attributeFilter: ["style"],
+});
+
+update();
 ```
 
 It is often convenient to use the shorthand property {{cssxref("animation")}} to set all animation properties at once.
diff --git a/files/en-us/web/css/animation-iteration-count/index.md b/files/en-us/web/css/animation-iteration-count/index.md
index faf66895b469590..7436eb7d07e5af9 100644
--- a/files/en-us/web/css/animation-iteration-count/index.md
+++ b/files/en-us/web/css/animation-iteration-count/index.md
@@ -70,41 +70,37 @@ animation-iteration-count: 1.5;
 ```
 
 ```js interactive-example
-"use strict";
+const el = document.getElementById("example-element");
+const status = document.getElementById("play-status");
 
-window.addEventListener("load", () => {
-  const el = document.getElementById("example-element");
-  const status = document.getElementById("play-status");
-
-  function update() {
-    status.textContent = "delaying";
-    el.className = "";
+function update() {
+  status.textContent = "delaying";
+  el.className = "";
+  window.requestAnimationFrame(() => {
     window.requestAnimationFrame(() => {
-      window.requestAnimationFrame(() => {
-        el.className = "animating";
-      });
+      el.className = "animating";
     });
-  }
-
-  el.addEventListener("animationstart", () => {
-    status.textContent = "playing";
-  });
-
-  el.addEventListener("animationend", () => {
-    status.textContent = "finished";
   });
+}
 
-  const observer = new MutationObserver(() => {
-    update();
-  });
+el.addEventListener("animationstart", () => {
+  status.textContent = "playing";
+});
 
-  observer.observe(el, {
-    attributes: true,
-    attributeFilter: ["style"],
-  });
+el.addEventListener("animationend", () => {
+  status.textContent = "finished";
+});
 
+const observer = new MutationObserver(() => {
   update();
 });
+
+observer.observe(el, {
+  attributes: true,
+  attributeFilter: ["style"],
+});
+
+update();
 ```
 
 It is often convenient to use the shorthand property {{cssxref("animation")}} to set all animation properties at once.
diff --git a/files/en-us/web/css/animation-timing-function/index.md b/files/en-us/web/css/animation-timing-function/index.md
index d6a549334e2c465..c15bb48823c39f8 100644
--- a/files/en-us/web/css/animation-timing-function/index.md
+++ b/files/en-us/web/css/animation-timing-function/index.md
@@ -72,21 +72,17 @@ animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);
 ```
 
 ```js interactive-example
-"use strict";
-
-window.addEventListener("load", () => {
-  const el = document.getElementById("example-element");
-  const button = document.getElementById("play-pause");
-
-  button.addEventListener("click", () => {
-    if (el.classList.contains("running")) {
-      el.classList.remove("running");
-      button.textContent = "Play";
-    } else {
-      el.classList.add("running");
-      button.textContent = "Pause";
-    }
-  });
+const el = document.getElementById("example-element");
+const button = document.getElementById("play-pause");
+
+button.addEventListener("click", () => {
+  if (el.classList.contains("running")) {
+    el.classList.remove("running");
+    button.textContent = "Play";
+  } else {
+    el.classList.add("running");
+    button.textContent = "Pause";
+  }
 });
 ```
 
diff --git a/files/en-us/web/css/css_scroll_snap/index.md b/files/en-us/web/css/css_scroll_snap/index.md
index 42dee0eccc95fe6..0c601e29669ce51 100644
--- a/files/en-us/web/css/css_scroll_snap/index.md
+++ b/files/en-us/web/css/css_scroll_snap/index.md
@@ -26,6 +26,9 @@ const snap = document.getElementById("snap");
 const all = document.querySelector("article");
 const rules = document.styleSheets[0].cssRules;
 
+setSST();
+setSSA();
+
 inlineDirection.addEventListener("change", () => {
   setSSA();
 });
@@ -35,10 +38,6 @@ blockDirection.addEventListener("change", () => {
 stop.addEventListener("change", () => {
   setSST();
 });
-window.addEventListener("load", () => {
-  setSST();
-  setSSA();
-});
 snap.addEventListener("change", () => {
   all.classList.toggle("snapDisabled");
 });
diff --git a/files/en-us/web/css/offset-anchor/index.md b/files/en-us/web/css/offset-anchor/index.md
index 6d96f9751154ff2..95231ba8f495474 100644
--- a/files/en-us/web/css/offset-anchor/index.md
+++ b/files/en-us/web/css/offset-anchor/index.md
@@ -80,19 +80,17 @@ offset-anchor: 20% 80%;
 ```
 
 ```js interactive-example
-window.addEventListener("load", () => {
-  const example = document.getElementById("example-element");
-  const button = document.getElementById("playback");
-
-  button.addEventListener("click", () => {
-    if (example.classList.contains("running")) {
-      example.classList.remove("running");
-      button.textContent = "Play";
-    } else {
-      example.classList.add("running");
-      button.textContent = "Pause";
-    }
-  });
+const example = document.getElementById("example-element");
+const button = document.getElementById("playback");
+
+button.addEventListener("click", () => {
+  if (example.classList.contains("running")) {
+    example.classList.remove("running");
+    button.textContent = "Play";
+  } else {
+    example.classList.add("running");
+    button.textContent = "Pause";
+  }
 });
 ```
 
diff --git a/files/en-us/web/css/offset-path/index.md b/files/en-us/web/css/offset-path/index.md
index c60ecf9a184597d..ca89994c678b8f9 100644
--- a/files/en-us/web/css/offset-path/index.md
+++ b/files/en-us/web/css/offset-path/index.md
@@ -63,19 +63,17 @@ offset-path: path("M0,0 L60,70 L-60,30z");
 ```
 
 ```js interactive-example
-window.addEventListener("load", () => {
-  const example = document.getElementById("example-element");
-  const button = document.getElementById("playback");
-
-  button.addEventListener("click", () => {
-    if (example.classList.contains("running")) {
-      example.classList.remove("running");
-      button.textContent = "Play";
-    } else {
-      example.classList.add("running");
-      button.textContent = "Pause";
-    }
-  });
+const example = document.getElementById("example-element");
+const button = document.getElementById("playback");
+
+button.addEventListener("click", () => {
+  if (example.classList.contains("running")) {
+    example.classList.remove("running");
+    button.textContent = "Play";
+  } else {
+    example.classList.add("running");
+    button.textContent = "Pause";
+  }
 });
 ```
 
diff --git a/files/en-us/web/css/offset-rotate/index.md b/files/en-us/web/css/offset-rotate/index.md
index 11449856e57c43e..e1878fe5362edd0 100644
--- a/files/en-us/web/css/offset-rotate/index.md
+++ b/files/en-us/web/css/offset-rotate/index.md
@@ -74,19 +74,17 @@ offset-rotate: reverse;
 ```
 
 ```js interactive-example
-window.addEventListener("load", () => {
-  const example = document.getElementById("example-element");
-  const button = document.getElementById("playback");
-
-  button.addEventListener("click", () => {
-    if (example.classList.contains("running")) {
-      example.classList.remove("running");
-      button.textContent = "Play";
-    } else {
-      example.classList.add("running");
-      button.textContent = "Pause";
-    }
-  });
+const example = document.getElementById("example-element");
+const button = document.getElementById("playback");
+
+button.addEventListener("click", () => {
+  if (example.classList.contains("running")) {
+    example.classList.remove("running");
+    button.textContent = "Play";
+  } else {
+    example.classList.add("running");
+    button.textContent = "Pause";
+  }
 });
 ```
 
diff --git a/files/en-us/web/css/offset/index.md b/files/en-us/web/css/offset/index.md
index ce403ae15c70adc..ea5a2ff5e8c8a83 100644
--- a/files/en-us/web/css/offset/index.md
+++ b/files/en-us/web/css/offset/index.md
@@ -72,19 +72,17 @@ offset: path(
 ```
 
 ```js interactive-example
-window.addEventListener("load", () => {
-  const example = document.getElementById("example-element");
-  const button = document.getElementById("playback");
-
-  button.addEventListener("click", () => {
-    if (example.classList.contains("running")) {
-      example.classList.remove("running");
-      button.textContent = "Play";
-    } else {
-      example.classList.add("running");
-      button.textContent = "Pause";
-    }
-  });
+const example = document.getElementById("example-element");
+const button = document.getElementById("playback");
+
+button.addEventListener("click", () => {
+  if (example.classList.contains("running")) {
+    example.classList.remove("running");
+    button.textContent = "Play";
+  } else {
+    example.classList.add("running");
+    button.textContent = "Pause";
+  }
 });
 ```
 
diff --git a/files/en-us/web/css/overflow-anchor/index.md b/files/en-us/web/css/overflow-anchor/index.md
index a7745c68bdffa90..e62615ebbd6ea1a 100644
--- a/files/en-us/web/css/overflow-anchor/index.md
+++ b/files/en-us/web/css/overflow-anchor/index.md
@@ -67,38 +67,36 @@ overflow-anchor: none;
 ```
 
 ```js interactive-example
-window.addEventListener("load", () => {
-  const example = document.getElementById("example-element");
-  const button = document.getElementById("playback");
-  let intervalId;
-
-  function setInitialState() {
-    example.innerHTML = "";
-    Array.from({ length: 10 }, (_, i) => i).forEach(addContent);
-    example.scrollTop = example.scrollHeight;
-  }
+const example = document.getElementById("example-element");
+const button = document.getElementById("playback");
+let intervalId;
+
+function setInitialState() {
+  example.innerHTML = "";
+  Array.from({ length: 10 }, (_, i) => i).forEach(addContent);
+  example.scrollTop = example.scrollHeight;
+}
 
-  function addContent() {
-    console.log("adding content");
-    const magicNumber = Math.floor(Math.random() * 10000);
-    example.insertAdjacentHTML(
-      "afterbegin",
-      `<div class="new-content-container">New Magic Number: ${magicNumber}</div>`,
-    );
-  }
+function addContent() {
+  console.log("adding content");
+  const magicNumber = Math.floor(Math.random() * 10000);
+  example.insertAdjacentHTML(
+    "afterbegin",
+    `<div class="new-content-container">New Magic Number: ${magicNumber}</div>`,
+  );
+}
 
-  button.addEventListener("click", () => {
-    if (example.classList.contains("running")) {
-      example.classList.remove("running");
-      button.textContent = "Start lottery";
-      clearInterval(intervalId);
-    } else {
-      example.classList.add("running");
-      button.textContent = "Stop lottery";
-      setInitialState();
-      intervalId = setInterval(addContent, 1000);
-    }
-  });
+button.addEventListener("click", () => {
+  if (example.classList.contains("running")) {
+    example.classList.remove("running");
+    button.textContent = "Start lottery";
+    clearInterval(intervalId);
+  } else {
+    example.classList.add("running");
+    button.textContent = "Stop lottery";
+    setInitialState();
+    intervalId = setInterval(addContent, 1000);
+  }
 });
 ```
 
diff --git a/files/en-us/web/css/transform-origin/index.md b/files/en-us/web/css/transform-origin/index.md
index 0185ec3e1ed9334..0e9827b36ef5b98 100644
--- a/files/en-us/web/css/transform-origin/index.md
+++ b/files/en-us/web/css/transform-origin/index.md
@@ -105,45 +105,41 @@ transform-origin: bottom right 60px;
 ```
 
 ```js interactive-example
-"use strict";
+function update() {
+  const selected = document.querySelector(".selected");
 
-window.addEventListener("load", () => {
-  function update() {
-    const selected = document.querySelector(".selected");
-
-    /* Restart the animation
+  /* Restart the animation
            https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Tips */
-    el.className = "";
+  el.className = "";
+  window.requestAnimationFrame(() => {
     window.requestAnimationFrame(() => {
-      window.requestAnimationFrame(() => {
-        el.className =
-          el.style.transformOrigin.split(" ")[2] === "60px"
-            ? "rotate3d"
-            : "rotate";
-      });
+      el.className =
+        el.style.transformOrigin.split(" ")[2] === "60px"
+          ? "rotate3d"
+          : "rotate";
     });
-
-    const transformOrigin = getComputedStyle(el).transformOrigin;
-    const pos = transformOrigin.split(/\s+/);
-    crosshair.style.left = `calc(${pos[0]} - 12px)`;
-    crosshair.style.top = `calc(${pos[1]} - 12px)`;
-  }
-
-  const crosshair = document.getElementById("crosshair");
-  const el = document.getElementById("example-element");
-
-  const observer = new MutationObserver(() => {
-    update();
   });
 
-  observer.observe(el, {
-    attributes: true,
-    attributeFilter: ["style"],
-  });
+  const transformOrigin = getComputedStyle(el).transformOrigin;
+  const pos = transformOrigin.split(/\s+/);
+  crosshair.style.left = `calc(${pos[0]} - 12px)`;
+  crosshair.style.top = `calc(${pos[1]} - 12px)`;
+}
+
+const crosshair = document.getElementById("crosshair");
+const el = document.getElementById("example-element");
 
+const observer = new MutationObserver(() => {
   update();
-  crosshair.style.opacity = "1";
 });
+
+observer.observe(el, {
+  attributes: true,
+  attributeFilter: ["style"],
+});
+
+update();
+crosshair.style.opacity = "1";
 ```
 
 The transform origin is the point around which a transformation is applied. For example, the transform origin of the [`rotate()`](/en-US/docs/Web/CSS/transform-function/rotate) function is the center of rotation.
diff --git a/files/en-us/web/html/guides/constraint_validation/index.md b/files/en-us/web/html/guides/constraint_validation/index.md
index d251ba8870ded10..a31d036cb53aef1 100644
--- a/files/en-us/web/html/guides/constraint_validation/index.md
+++ b/files/en-us/web/html/guides/constraint_validation/index.md
@@ -322,6 +322,9 @@ This displays the following form:
 First, we write a function checking the constraint itself:
 
 ```js
+const countrySelect = document.getElementById("country");
+const postalCodeField = document.getElementById("postal-code");
+
 function checkPostalCode() {
   // For each country, defines the pattern that the postal code has to follow
   const constraints = {
@@ -344,10 +347,7 @@ function checkPostalCode() {
   };
 
   // Read the country id
-  const country = document.getElementById("country").value;
-
-  // Get the NPA field
-  const postalCodeField = document.getElementById("postal-code");
+  const country = countrySelect.value;
 
   // Build the constraint checker
   const constraint = new RegExp(constraints[country][0], "");
@@ -365,13 +365,11 @@ function checkPostalCode() {
 }
 ```
 
-Then we link it to the **onchange** event for the {{ HTMLElement("select") }} and the **oninput** event for the {{ HTMLElement("input") }}:
+Then we link it to the `change` event for the {{ HTMLElement("select") }} and the `input` event for the {{ HTMLElement("input") }}:
 
 ```js
-window.onload = () => {
-  document.getElementById("country").onchange = checkPostalCode;
-  document.getElementById("postal-code").oninput = checkPostalCode;
-};
+countrySelect.addEventListener("change", checkPostalCode);
+postalCodeField.addEventListener("input", checkPostalCode);
 ```
 
 ### Limiting the size of a file before its upload
@@ -392,8 +390,9 @@ This displays:
 The JavaScript reads the file selected, uses the `File.size()` method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:
 
 ```js
+const fs = document.getElementById("fs");
+
 function checkFileSize() {
-  const fs = document.getElementById("fs");
   const files = fs.files;
 
   // If there is (at least) one file selected
@@ -413,9 +412,7 @@ function checkFileSize() {
 Finally, we hook the method with the correct event:
 
 ```js
-window.onload = () => {
-  document.getElementById("fs").onchange = checkFileSize;
-};
+fs.addEventListener("change", checkFileSize);
 ```
 
 ## Visual styling of constraint validation
diff --git a/files/en-us/web/html/how_to/add_javascript_to_your_web_page/index.md b/files/en-us/web/html/how_to/add_javascript_to_your_web_page/index.md
index 5e8ba1936a3a414..27170e5d4a75d4b 100644
--- a/files/en-us/web/html/how_to/add_javascript_to_your_web_page/index.md
+++ b/files/en-us/web/html/how_to/add_javascript_to_your_web_page/index.md
@@ -54,9 +54,7 @@ You may also add JavaScript code between `<script>` tags rather than providing a
 
 ```html
 <script>
-  window.addEventListener("load", () => {
-    console.log("This function is executed once the page is fully loaded");
-  });
+  console.log("Some code");
 </script>
 ```
 
@@ -66,6 +64,9 @@ That's convenient when you just need a small bit of JavaScript, but if you keep
 - write self-sufficient HTML
 - write structured JavaScript applications
 
+> [!NOTE]
+> For both inline scripts and external scripts without the [`defer`](/en-US/docs/Web/HTML/Reference/Elements/script#defer) or [`async`](/en-US/docs/Web/HTML/Reference/Elements/script#async) attributes, the script is executed immediately when the browser encounters the `<script>` element while parsing the HTML. This means that the script cannot access any HTML elements that appear later in the document. To access such elements, consider moving the script to the end of the document body (just before the closing `</body>` tag), or use the `defer` attribute on external scripts.
+
 ## Use scripting accessibly
 
 Accessibility is a major issue in any software development. JavaScript can make your website more accessible if you use it wisely, or it can become a disaster if you use scripting without care. To make JavaScript work in your favor, it's worth knowing about certain best practices for adding JavaScript:
diff --git a/files/en-us/web/html/reference/elements/input/color/index.md b/files/en-us/web/html/reference/elements/input/color/index.md
index 1c13d3047a3c06f..c44be048fb3e02a 100644
--- a/files/en-us/web/html/reference/elements/input/color/index.md
+++ b/files/en-us/web/html/reference/elements/input/color/index.md
@@ -146,27 +146,17 @@ The HTML is fairly straightforward — a couple of paragraphs of descriptive mat
 
 ### JavaScript
 
-First, there's some setup. Here we establish some variables, setting up a variable that contains the color we'll set the color picker to when we first load up, and then setting up a {{domxref("Window/load_event", "load")}} handler to do the main startup work once the page is fully loaded.
-
-```js
-let colorPicker;
-const defaultColor = "#0000ff";
-
-window.addEventListener("load", startup, false);
-```
-
 #### Initialization
 
-Once the page is loaded, our `load` event handler, `startup()`, is called:
+The following code initializes the color input:
 
 ```js
-function startup() {
-  colorPicker = document.querySelector("#color-picker");
-  colorPicker.value = defaultColor;
-  colorPicker.addEventListener("input", updateFirst, false);
-  colorPicker.addEventListener("change", updateAll, false);
-  colorPicker.select();
-}
+const defaultColor = "#0000ff";
+const colorPicker = document.querySelector("#color-picker");
+colorPicker.value = defaultColor;
+colorPicker.addEventListener("input", updateFirst, false);
+colorPicker.addEventListener("change", updateAll, false);
+colorPicker.select();
 ```
 
 This gets a reference to the color `<input>` element in a variable called `colorPicker`, then sets the color input's value to the value in `defaultColor`. Then the color input's {{domxref("Element/input_event", "input")}} event is set up to call our `updateFirst()` function, and the {{domxref("HTMLElement/change_event", "change")}} event is set to call `updateAll()`. These are both seen below.
diff --git a/files/en-us/web/javascript/reference/errors/property_access_denied/index.md b/files/en-us/web/javascript/reference/errors/property_access_denied/index.md
index 758ef2863b9b377..532d19f052f7a31 100644
--- a/files/en-us/web/javascript/reference/errors/property_access_denied/index.md
+++ b/files/en-us/web/javascript/reference/errors/property_access_denied/index.md
@@ -31,21 +31,12 @@ violated the [same-origin policy](/en-US/docs/Web/Security/Same-origin_policy).
 ### No permission to access document
 
 ```html
-<!doctype html>
-<html lang="en-US">
-  <head>
-    <iframe
-      id="myframe"
-      src="http://www1.w3c-test.org/common/blank.html"></iframe>
-    <script>
-      onload = function () {
-        console.log(frames[0].document);
-        // Error: Permission denied to access property "document"
-      };
-    </script>
-  </head>
-  <body></body>
-</html>
+<iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe>
+```
+
+```js
+console.log(frames[0].document);
+// Error: Permission denied to access property "document"
 ```
 
 ## See also
diff --git a/files/en-us/web/media/guides/audio_and_video_delivery/cross-browser_audio_basics/index.md b/files/en-us/web/media/guides/audio_and_video_delivery/cross-browser_audio_basics/index.md
index 62b5044a9e187f4..91e14d3616ad203 100644
--- a/files/en-us/web/media/guides/audio_and_video_delivery/cross-browser_audio_basics/index.md
+++ b/files/en-us/web/media/guides/audio_and_video_delivery/cross-browser_audio_basics/index.md
@@ -243,23 +243,21 @@ The JavaScript media API allows you to create your own custom player. Let's take
 Next, we attach some functionality to the player using JavaScript:
 
 ```js
-window.onload = () => {
-  const audio = document.getElementById("my-audio");
-  const play = document.getElementById("play");
-  const pause = document.getElementById("pause");
-
-  // associate functions with the 'onclick' events
-  play.onclick = playAudio;
-  pause.onclick = pauseAudio;
-
-  function playAudio() {
-    audio.play();
-  }
-
-  function pauseAudio() {
-    audio.pause();
-  }
-};
+const audio = document.getElementById("my-audio");
+const play = document.getElementById("play");
+const pause = document.getElementById("pause");
+
+// associate functions with the 'onclick' events
+play.onclick = playAudio;
+pause.onclick = pauseAudio;
+
+function playAudio() {
+  audio.play();
+}
+
+function pauseAudio() {
+  audio.pause();
+}
 ```
 
 ## Media loading events