Advance JavaScript (DOM, BOM, Web API) / Document Object Model

Event Handling - Page Load

✅ Page Load Events

Page load events tell JavaScript when it is safe to run code based on the loading state of the webpage.

❓ Why Page Load Events Are Important

Without load events:

  • JavaScript may execute before HTML elements exist

  • document.getElementById() may return null

  • DOM manipulation may fail

  • Layout-dependent code (images, sizes) may break

📌 Page load events help synchronize JavaScript with page loading

🔹 1. DOMContentLoaded Event (DOM Ready)

📌 When it fires

  • HTML is fully parsed

  • DOM tree is created

  • External resources like images and videos may still be loading

👉 JavaScript can safely access and modify DOM elements

✅ Syntax

document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM is ready");
});
DOM is ready

🧠 Why DOMContentLoaded is Preferred

✔ Faster than load

✔ Does not wait for images

✔ Best for DOM manipulation

✔ Improves perceived performance

🧪 Practical Example

📌 Ensures the button exists before accessing it

🔹 2. load Event (Fully Loaded Page)

📌 When it fires

  • HTML loaded

  • CSS loaded

  • Images loaded

  • Fonts loaded

  • External scripts loaded

👉 Fires after everything is completely ready

✅ Syntax

window.addEventListener("load", () => {
  console.log("Everything loaded");
});
Everything loaded

🧠 When to Use load

✔ When image dimensions matter

✔ For sliders, canvas, charts

✔ When layout depends on fonts or media

🧪 Practical Example

📌 Image size is available only after full load

⚔️ DOMContentLoaded vs load

Feature

DOMContentLoaded

load

Waits for HTML

✅ Yes

✅ Yes

Waits for images

❌ No

✅ Yes

Speed

Faster

Slower

Best use

DOM logic

Asset-dependent logic

🔹 3. beforeunload Event

📌 Purpose: Warn users before they leave the page

📌 When it fires

  • Closing tab or browser

  • Reloading page

  • Navigating to another URL

✅ Syntax

window.addEventListener("beforeunload", (event) => {
  event.preventDefault();
  event.returnValue = ""; // Triggers the dialog
});

🖨️ Result

➡️ Browser shows a confirmation dialog

🧠 Common Use Cases

✔ Unsaved form data

✔ Checkout/payment flows

✔ Long user inputs

🧪 Example: Form Protection

📌 Dialog appears only if data is unsaved

🔹 4. unload Event

📌 When it fires

  • User leaves the page

  • Page is being destroyed

  • After beforeunload

✅ Syntax

window.addEventListener("unload", () => {
  console.log("Page unloaded");
});

⚠️ Important Limitations

❌ Async code may not run

❌ Network requests may fail

❌ alert() won’t work

❌ Console logs may not appear

📌 Browser may terminate scripts immediately

🧠 Valid Use Cases

✔ Cleanup tasks

✔ Clearing timers

✔ Releasing resources

❌ Bad Use Case

window.addEventListener("unload", async () => {
  await fetch("/save-data"); // ❌ unreliable
});

🔄 beforeunload vs unload

Feature

beforeunload

unload

Fires

Before leaving page

When page unloads

Can stop leaving

✅ Yes

❌ No

Shows dialog

✅ Yes

❌ No

User still present

✅ Yes

❌ No

Main use

Warn user

Cleanup only

Async code

❌ Not reliable

❌ Not allowed

🧠 Memory Trick

  • beforeunload → “Wait, are you sure?”

  • unload → “Too late, I’m gone.”

🧠 Best Practices Summary

Scenario

Recommended Event

DOM manipulation

DOMContentLoaded

Image/layout dependent logic

load

Warn before leaving

beforeunload

Cleanup only

unload