1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
---
title: unload
slug: Web/API/Window/unload_event
tags:
- JavaScript
- events
translation_of: Web/API/Window/unload_event
original_slug: Web/Events/unload
---
L'événement `unload` est appelé lorsque le document ou une ressource enfant est en train d'être déchargé.
Il est lancé après :
1. [beforeunload](/en-US/docs/Mozilla_event_reference/beforeunload) (événement annulable)
2. [pagehide](/en-US/docs/Mozilla_event_reference/pagehide)
Le document se trouve alors dans un état particulier :
- Toutes les ressources existent encore (img, iframe etc.)
- Plus rien n'est encore visible par l'utilisateur final
- Les intéractions avec l'interface sont désactivées (`window.open`, `alert`, `confirm`, etc.)
- Aucune erreur ne viendra interrompre le flux de déchargement.
Veuiller noter que l'événement `unload` suit l'ordre du document : le cadre parent est déchargé *avant* le `unload` d'un cadre enfant (voir l'exemple ci-dessous).
<table class="properties">
<tbody>
<tr>
<td>Événement propageable</td>
<td>Non</td>
</tr>
<tr>
<td>Annulable</td>
<td>Non</td>
</tr>
<tr>
<td>Objets cibles</td>
<td>defaultView, Document, Element</td>
</tr>
<tr>
<td>Interface</td>
<td>
{{domxref("UIEvent")}} si généré depuis un élément de l'interface
utilisateur, {{domxref("Event")}}
</td>
</tr>
<tr>
<td>Action par défaut</td>
<td>Aucune</td>
</tr>
</tbody>
</table>
## Propriétés
| Propriété | Type | Description |
| ------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
| `target` {{readonlyInline}} | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | La cible de l'événement (la cible de plus haut niveau dans le DOM). |
| `type` {{readonlyInline}} | [`DOMString`](/en-US/docs/Web/API/DOMString) | Le type d'événement. |
| `bubbles` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Si l'événement remonte ou non. |
| `cancelable` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Si l'événement est annulable ou non. |
| `view` {{readonlyInline}} | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`fenêtre` du document) |
| `detail` {{readonlyInline}} | `long` (`float`) | 0. |
## Exemple
```html
<!DOCTYPE html>
<html>
<head>
<title>Cadre parent</title>
<script>
window.addEventListener('beforeunload', function(event) {
console.log('Je suis le 1er.');
});
window.addEventListener('unload', function(event) {
console.log('Je suis le 3ème.');
});
</script>
</head>
<body>
<iframe src="child-frame.html"></iframe>
</body>
</html>
```
Ci-dessous, le contenu de `child-frame.html`:
```html
<!DOCTYPE html>
<html>
<head>
<title>Cadre enfant</title>
<script>
window.addEventListener('beforeunload', function(event) {
console.log('Je suis le 2nd.');
});
window.addEventListener('unload', function(event) {
console.log('Je suis le 4ème et dernier…');
});
</script>
</head>
<body>
☻
</body>
</html>
```
Quand le cadre parent est déchargé, les événements sont lancés dans l'ordre décrit par les messages `console.log`.
## Événements liés
- {{event("DOMContentLoaded")}}
- {{event("readystatechange")}}
- {{event("load")}}
- {{event("beforeunload")}}
- {{event("unload")}}
## Spécifications
- [Unloading Documents — unload a document](https://html.spec.whatwg.org/multipage/browsers.html#unloading-documents)
- [Event Module Definition — unload](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload)
|
