-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
148 lines (108 loc) · 3.25 KB
/
index.md
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
---
title: "Window: load event"
short-title: load
slug: Web/API/Window/load_event
page-type: web-api-event
browser-compat: api.Window.load_event
---
{{APIRef}}
The **`load`** event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images.
This is in contrast to {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.
This event is not cancelable and does not bubble.
> **Note:** _All events named `load` will not propagate to `Window`_, even with `bubbles` initialized to `true`. To catch `load` events on the `window`, that `load` event must be dispatched directly to the `window`.
> **Note:** The `load` event that is dispatched when the main document has loaded _is_ dispatched on the `window`, but has two mutated properties: `target` is `document`, and `path` is `undefined`. These two properties are mutated due to legacy conformance.
## Syntax
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
```js
addEventListener("load", (event) => {});
onload = (event) => {};
```
## Event type
A generic {{domxref("Event")}}.
## Examples
Log a message when the page is fully loaded:
```js
window.addEventListener("load", (event) => {
console.log("page is fully loaded");
});
```
The same, but using the `onload` event handler property:
```js
window.onload = (event) => {
console.log("page is fully loaded");
};
```
### Live example
#### HTML
```html
<div class="controls">
<button id="reload" type="button">Reload</button>
</div>
<div class="event-log">
<label for="eventLog">Event log:</label>
<textarea
readonly
class="event-log-contents"
rows="8"
cols="30"
id="eventLog"></textarea>
</div>
```
```css hidden
body {
display: grid;
grid-template-areas: "control log";
}
.controls {
grid-area: control;
display: flex;
align-items: center;
justify-content: center;
}
.event-log {
grid-area: log;
}
.event-log-contents {
resize: none;
}
label,
button {
display: block;
}
#reload {
height: 2rem;
}
```
#### JavaScript
```js
const log = document.querySelector(".event-log-contents");
const reload = document.querySelector("#reload");
reload.addEventListener("click", () => {
log.textContent = "";
setTimeout(() => {
window.location.reload(true);
}, 200);
});
window.addEventListener("load", (event) => {
log.textContent += "load\n";
});
document.addEventListener("readystatechange", (event) => {
log.textContent += `readystate: ${document.readyState}\n`;
});
document.addEventListener("DOMContentLoaded", (event) => {
log.textContent += `DOMContentLoaded\n`;
});
```
#### Result
{{ EmbedLiveSample('Live_example', '100%', '160px') }}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- Document [readyState](/en-US/docs/Web/API/Document/readyState) API
- Related events:
- {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}
- {{domxref("Document/readystatechange_event", "readystatechange")}}
- {{domxref("Window/beforeunload_event", "beforeunload")}}
- {{domxref("Window/unload_event", "unload")}}