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
|
---
title: 'Window: unload 이벤트'
slug: Web/API/Window/unload_event
tags:
- Event
- Reference
- Window
- 이벤트
translation_of: Web/API/Window/unload_event
---
<div>{{APIRef}}</div>
<p><span class="seoSummary"><strong><code>unload</code></strong> 이벤트는 문서나 하위 리소스가 언로딩 중일 때 발생합니다.</span></p>
<table class="properties">
<tbody>
<tr>
<th scope="row">확산</th>
<td>아니오</td>
</tr>
<tr>
<th scope="row">취소 가능</th>
<td>아니오</td>
</tr>
<tr>
<th scope="row">인터페이스</th>
<td>{{domxref("Event")}}</td>
</tr>
<tr>
<th scope="row">이벤트 처리기 속성</th>
<td>{{domxref("WindowEventHandlers/onunload", "onunload")}}</td>
</tr>
</tbody>
</table>
<p><code>unload</code>는 다음 이벤트 이후 발생합니다.</p>
<ul>
<li>{{domxref("Window/beforeunload_event", "beforeunload")}} (취소 가능한 이벤트)</li>
<li>{{domxref("Window/pagehide_event", "pagehide")}}</li>
</ul>
<p><code>unload</code> 시점의 문서는 다음과 같은 상태입니다.</p>
<ul>
<li>이미지, IFrame 등 모든 리소스는 여전히 존재합니다.</li>
<li>최종 사용자는 아무것도 볼 수 없습니다.</li>
<li>UI 상호작용은 아무 효과도 없습니다. ({{domxref("window.open()")}}, {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, 등등)</li>
<li>오류가 발생해도 언로딩 절차는 중단되지 않습니다.</li>
</ul>
<p>참고로 <code>unload</code> 이벤트 역시 문서 트리의 순서를 따라갑니다. 즉 부모 프레임의 <code>unload</code>가 자식 프레임의 <code>unload</code> <strong>이전에</strong> 발생합니다. 아래 예제를 확인하세요</p>
<h2 id="예제">예제</h2>
<pre class="brush: html notranslate"><!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></pre>
<p>아래는 <code>child-frame.html</code>의 내용입니다.</p>
<pre class="brush: html notranslate"><!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></pre>
<p>부모 프레임이 언로딩 될 때, <code>console.log()</code> 메시지를 통해 순서를 확인할 수 있습니다.</p>
<h2 id="명세">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('UI Events', '#event-type-unload', 'unload')}}</td>
<td>{{Spec2('UI Events')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("api.Window.unload_event")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>관련 이벤트: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}</li>
<li><a href="https://html.spec.whatwg.org/multipage/browsers.html#unloading-documents">Unloading Documents — unload a document</a></li>
</ul>
|
