🕵️‍♂️ 50 Hidden Browser Events & APIs (with Code Examples)

Most developers stick to the usual suspects: click, input, keydown. But the browser hides a treasure chest of lesser-known events and APIs that give you superpowers for building advanced web apps.

In this post, I’ll show you 50 hidden gems, grouped by category, with examples and real-world use cases.

🔄 Page Lifecycle & Navigation

1. beforeunload

window.addEventListener("beforeunload", (e) => {
  e.preventDefault();
  e.returnValue = "";
  console.log("Page is closing or reloading");
});

2. pagehide

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

3. pageshow

window.addEventListener("pageshow", (e) => {
  console.log("Page shown again", e.persisted ? "From cache" : "Fresh load");
});

4. visibilitychange

document.addEventListener("visibilitychange", () => {
  console.log("Visibility:", document.visibilityState);
});

5. freeze / resume

document.addEventListener("freeze", () => console.log("Page frozen"));
document.addEventListener("resume", () => console.log("Page resumed"));

6. popstate

window.addEventListener("popstate", (e) => {
  console.log("Navigated back/forward", e.state);
});

7. hashchange

window.addEventListener("hashchange", () => {
  console.log("New hash:", location.hash);
});

8. DOMContentLoaded

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

9. load

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

10. unhandledrejection

window.addEventListener("unhandledrejection", (e) => {
  console.error("Unhandled promise:", e.reason);
});

---

🖥️ Window & Document Events

11. resize

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

12. scrollend

document.addEventListener("scrollend", () => {
  console.log("Scrolling finished");
});

13. fullscreenchange

document.addEventListener("fullscreenchange", () => {
  console.log("Fullscreen:", !!document.fullscreenElement);
});

14. deviceorientation

window.addEventListener("deviceorientation", (e) => {
  console.log("Orientation:", e.alpha, e.beta, e.gamma);
});

15. devicemotion

window.addEventListener("devicemotion", (e) => {
  console.log("Acceleration:", e.acceleration);
});

16. orientationchange

window.addEventListener("orientationchange", () => {
  console.log("Orientation changed:", screen.orientation.type);
});

17. storage

window.addEventListener("storage", (e) => {
  console.log("Storage change:", e.key, e.newValue);
});

18. beforeprint / afterprint

window.addEventListener("beforeprint", () => console.log("Before print"));
window.addEventListener("afterprint", () => console.log("After print"));

19. copy / cut / paste

document.addEventListener("copy", () => console.log("Copied!"));
document.addEventListener("paste", (e) => {
  console.log("Pasted:", e.clipboardData.getData("text"));
});

20. selectionchange

document.addEventListener("selectionchange", () => {
  console.log("Selected text:", document.getSelection().toString());
});

---

🖱️ Input/Pointer & UX

21. contextmenu

document.addEventListener("contextmenu", (e) => {
  e.preventDefault();
  console.log("Right-click blocked");
});

22. auxclick

document.addEventListener("auxclick", (e) => {
  console.log("Aux click:", e.button);
});

23. pointerlockchange

document.addEventListener("pointerlockchange", () => {
  console.log("Pointer lock:", document.pointerLockElement);
});

24. pointerrawupdate

document.addEventListener("pointerrawupdate", (e) => {
  console.log("Raw move:", e.movementX, e.movementY);
});

25. wheel

window.addEventListener("wheel", (e) => {
  console.log("Wheel delta:", e.deltaY);
});

26. dblclick

document.addEventListener("dblclick", () => {
  console.log("Double clicked!");
});

27. mouseenter / mouseleave

box.addEventListener("mouseenter", () => console.log("Mouse entered box"));
box.addEventListener("mouseleave", () => console.log("Mouse left box"));

28. focusin / focusout

document.addEventListener("focusin", () => console.log("Focus in"));
document.addEventListener("focusout", () => console.log("Focus out"));

29. dragstart / dragend / drop

box.addEventListener("dragstart", () => console.log("Dragging started"));
dropzone.addEventListener("drop", () => console.log("Dropped!"));

30. input with inputType

document.querySelector("input").addEventListener("input", (e) => {
  console.log("Input type:", e.inputType, "Value:", e.target.value);
});

---

📡 Network & Connectivity

31. online / offline

window.addEventListener("online", () => console.log("Back online"));
window.addEventListener("offline", () => console.log("Offline mode"));

32. Service Worker fetch

self.addEventListener("fetch", (e) => {
  console.log("Intercepted:", e.request.url);
});

33. Service Worker push

self.addEventListener("push", (e) => {
  console.log("Push message:", e.data.text());
});

34. beforeinstallprompt

window.addEventListener("beforeinstallprompt", (e) => {
  e.preventDefault();
  console.log("PWA install available");
});

35. appinstalled

window.addEventListener("appinstalled", () => {
  console.log("PWA installed");
});

36. connectionchange

navigator.connection.addEventListener("change", () => {
  console.log("Network:", navigator.connection.effectiveType);
});

37. WebSocket onclose

socket.onclose = () => console.log("WebSocket closed");

38. WebSocket onerror

socket.onerror = (e) => console.log("WebSocket error", e);

39. Service Worker backgroundfetchsuccess

self.addEventListener("backgroundfetchsuccess", (e) => {
  console.log("Background fetch done", e.registration.id);
});

40. navigator.sendBeacon

navigator.sendBeacon("/log", JSON.stringify({ event: "exit" }));

---

🎙️ Media & Device APIs

41. canplay

video.addEventListener("canplay", () => console.log("Media can play"));

42. canplaythrough

video.addEventListener("canplaythrough", () => console.log("Buffer enough to play through"));

43. ended

video.addEventListener("ended", () => console.log("Video ended"));

44. timeupdate

video.addEventListener("timeupdate", () => console.log("Current time:", video.currentTime));

45. waiting

video.addEventListener("waiting", () => console.log("Buffering..."));

46. speechstart / speechend

recognition.addEventListener("speechstart", () => console.log("Speech started"));
recognition.addEventListener("speechend", () => console.log("Speech ended"));

47. voiceschanged

speechSynthesis.onvoiceschanged = () => {
  console.log("Voices available:", speechSynthesis.getVoices());
};

48. gamepadconnected

window.addEventListener("gamepadconnected", (e) => {
  console.log("Gamepad:", e.gamepad.id);
});

49. gamepaddisconnected

window.addEventListener("gamepaddisconnected", (e) => {
  console.log("Gamepad removed:", e.gamepad.id);
});

50. bluetoothavailabilitychanged

navigator.bluetooth.addEventListener("availabilitychanged", (e) => {
  console.log("Bluetooth available:", e.value);
});

🎯 Wrapping Up

Most devs never use these — but mastering hidden events & APIs lets you:

Build offline-ready PWAs

Handle back/forward cache properly

Capture system/device events (gamepad, Bluetooth, sensors)

Improve UX with clipboard, printing, fullscreen, orientation

👉 Bookmark this as your cheat sheet of browser superpowers.

🎮 Try It Live!

👉 See the Pen 50 Hidden Gems JS

by Kamal Kishor (@koolkamalkishor) on CodePen.