jQuery Unload Event

What Is the unload Event?

The browser unload event fires on window when the user leaves the page. In jQuery, bind it with .on("unload") (since 1.7) and simulate it with .trigger("unload").

// Bind on window (required pattern)
$(window).on("unload", function () {
  // cleanup — keep it fast and simple
});

// Demo / tests only
$(window).trigger("unload");

// Removed shorthand (jQuery 3.0+)
// $(window).unload(fn);

How to Use the unload Event

Always bind on window, keep the handler tiny, and test real navigation separately from .trigger().

1. Select $(window) — not body or a random element.
2. Bind with .on("unload", handler).
3. Do only fast sync cleanup (flags, storage writes). Avoid UI dialogs.
4. For labs, call .trigger("unload") to run the handler without leaving.
5. For new apps, also consider pagehide as a more reliable exit signal.

Pseudocode

bind:
  $(window).on("unload", handler)

when user leaves the page (or trigger("unload") runs):
  call handler(event)
  // alert / confirm / prompt usually ignored
  // preventDefault cannot cancel navigation

cleanup tip:
  keep handler short
  write flags/storage if needed
  prefer pagehide for modern apps

Cheat Sheet

Keep these facts handy when handling page exit.

Live Preview

Bind an unload handler on window, then simulate it with .trigger("unload") — safe for demos without leaving the page.

Ready — pick an action and click Run.

jQuery Examples

Short, copy-ready snippets. Labs use .trigger("unload") so you can stay on the page.

$(window).on("unload", function () {
  $("#log").text("Handler for unload called.");
});

$("button").on("click", function () {
  $(window).trigger("unload");
});

Handler for unload called.

$(window).on("unload", function () {
  sessionStorage.setItem("leftAt", String(Date.now()));
});

$("button").on("click", function () {
  $(window).trigger("unload");
  $("#log").text("leftAt=" + sessionStorage.getItem("leftAt"));
});

leftAt=<timestamp>
(fast sync write — good unload style)

function onLeave() {
  $("#log").text("unload ran");
}

$(window).on("unload", onLeave);

$("#remove").on("click", function () {
  $(window).off("unload", onLeave);
  $("#log").text("Handler removed");
});

After remove → trigger no longer updates the log

$(window).on("unload", { reason: "demo" }, function (event) {
  $("#log").text("reason=" + event.data.reason);
});

$("button").on("click", function () {
  $(window).trigger("unload");
});

reason=demo

$(window).on("pagehide", function () {
  $("#log").text("pagehide — better for modern cleanup");
});

$("button").on("click", function () {
  $(window).trigger("pagehide");
});

pagehide — better for modern cleanup

Performance Notes

The page is disappearing — keep handlers short. Do not start Ajax or long loops; they may never finish.

Key Takeaways