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
149
150
151
152
153
154
155
156
157
158
159
|
---
title: WindowEventHandlers.onhashchange
slug: Web/API/WindowEventHandlers/onhashchange
tags:
- HTML-DOM
- Property
- Reference
- WindowEventHandlers
translation_of: Web/API/WindowEventHandlers/onhashchange
---
<div>
<div>{{APIRef("HTML DOM")}}</div>
<div>{{domxref("WindowEventHandlers")}} 믹스인의 <strong>WindowEventHandlers.onhashchange</strong> 속성은 </div>
</div>
<p><strong>hashchange </strong>이벤트를 처리하기 위한 {{domxref("EventHandler")}} 입니다.</p>
<p>hashchange 이벤트는 윈도우의 해시가 변경되면 시작됩니다. ( {{domxref("Window.location")}} 및 {{domxref("HTMLHyperlinkElementUtils.hash")}} 참조)</p>
<h2 id="문법">문법</h2>
<p><strong>event handler:</strong></p>
<pre class="syntaxbox">window.onhashchange = funcRef;
</pre>
<p><strong>HTML event handler:</strong></p>
<pre class="syntaxbox"><body onhashchange="funcRef();">
</pre>
<p><strong>event listener:</strong></p>
<p>{{domxref("EventTarget.addEventListener()", "addEventListener()")}}를 사용하여 이벤트 리스너 추가하기</p>
<pre class="syntaxbox">window.addEventListener("hashchange", funcRef, false);
</pre>
<h3 id="매개변수">매개변수</h3>
<dl>
<dt><code>funcRef</code></dt>
<dd>함수에 대한 참조.</dd>
</dl>
<h2 id="예제">예제</h2>
<h3 id="event_handler_사용하기">event handler 사용하기</h3>
<p>This example uses an event handler (<code>window.onhashchange</code>) to check the new hash value whenever it changes. If it equals <code>#cool-feature</code>, the script logs a message to the console.</p>
<pre><code>function locationHashChanged() {
if (location.hash === '#cool-feature') {
console.log("You're visiting a cool feature!");
}
}
window.onhashchange = locationHashChanged;</code>
</pre>
<h3 id="Using_an_event_listener">Using an event listener</h3>
<p>이 예제는 이벤트 리스너를 사용하여 해시가 변경 될 때마다 콘솔에 알림표시합니다.</p>
<pre><code>function hashHandler() {
console.log('The hash has changed!');
}
window.addEventListener('hashchange', hashHandler, false);</code></pre>
<h3 id="Overriding_the_hash">Overriding the hash</h3>
<p>이 함수는 새로운 해시를 동적으로 설정하여 임의로 두 값 중 하나로 설정합니다.</p>
<pre><code>function changeHash() {
location.hash = (Math.random() > 0.5) ? 'location1' : 'location2';
}</code>
</pre>
<h2 id="hashchange_이벤트">hashchange 이벤트</h2>
<p><code>hashchange</code> 이벤트에는 다음과 같은 필드가 있습니다:</p>
<table class="standard-table">
<tbody>
<tr>
<td class="header">Field</td>
<td class="header">Type</td>
<td class="header">Description</td>
</tr>
<tr>
<td><code>newURL</code> {{gecko_minversion_inline("6.0")}}</td>
<td><code>DOMString</code></td>
<td>탐색할 새로운 URL입니다.</td>
</tr>
<tr>
<td><code>oldURL</code> {{gecko_minversion_inline("6.0")}}</td>
<td><code>DOMString</code></td>
<td>탐색했던 이전의 URL입니다.</td>
</tr>
</tbody>
</table>
<h3 id="제2의_해결책을_위한_event.newURL_와_event.oldURL">제2의 해결책을 위한 event.newURL 와 event.oldURL</h3>
<pre class="brush:js">//let this snippet run before your hashchange event binding code
if(!window.HashChangeEvent)(function(){
var lastURL=document.URL;
window.addEventListener("hashchange",function(event){
Object.defineProperty(event,"oldURL",{enumerable:true,configurable:true,value:lastURL});
Object.defineProperty(event,"newURL",{enumerable:true,configurable:true,value:document.URL});
lastURL=document.URL;
});
}());
</pre>
<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('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
<p>{{Compat("api.WindowEventHandlers.onhashchange")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event">hashchange</a></code> event</li>
<li><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating the browser history">Manipulating the browser history</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/DOM/window.history" title="DOM/window.history"><code>history.pushState()</code> and <code>history.replaceState()</code></a> methods</li>
<li>{{domxref("WindowEventHandlers.onpopstate")}}</li>
<li>{{domxref("HTMLHyperlinkElementUtils.hash")}}</li>
</ul>
|
