The unload event is fired when the document or a child resource is being unloaded.
It is fired after:
- beforeunload (cancellable event)
- pagehide
The document is in a particular state:
- all the resources still exist (img, iframe etc.)
- nothing is visible anymore to the end user
- UI interactions are ineffective (
window.open,alert,confirmetc.) - an error won't stop the unloading workflow
Please note that the unload event also follow the document tree: parent frame unload will happen before child frame unload (see example below).
General infoEdit
- Specification
- DOM L3
- Interface
- UIEvent if generated from a user interface, Event otherwise.
- Bubbles
- No
- Cancelable
- No
- Target
- defaultView, Document, Element
- Default Action
- None.
PropertiesEdit
| Property | Type | Description |
|---|---|---|
target Read only |
EventTarget |
The event target (the topmost target in the DOM tree). |
type Read only |
DOMString |
The type of event. |
bubbles Read only |
boolean |
Does the event normally bubble? |
cancelable Read only |
boolean |
Is it possible to cancel the event? |
view Read only |
WindowProxy |
document.defaultView (the window of the document). |
detail Read only |
long (float) |
0. |
ExampleEdit
<!DOCTYPE html>
<html>
<head>
<title>Parent Frame</title>
<script>
window.addEventListener('beforeunload', function(event) {
console.log('I am the 1st one.');
});
window.addEventListener('unload', function(event) {
console.log('I am the 3rd one.');
});
</script>
</head>
<body>
<iframe src="child-frame.html"></iframe>
</body>
</html>Below, the content of child-frame.html:
<!DOCTYPE html>
<html>
<head>
<title>Child Frame</title>
<script>
window.addEventListener('beforeunload', function(event) {
console.log('I am the 2nd one.');
});
window.addEventListener('unload', function(event) {
console.log('I am the 4th and last one…');
});
</script>
</head>
<body>
☻
</body>
</html>When the parent frame is unloaded, events will be fired in the order described by console.log messages.