From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- .../windoweventhandlers/onhashchange/index.html | 159 +++++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 files/ko/web/api/windoweventhandlers/onhashchange/index.html (limited to 'files/ko/web/api/windoweventhandlers/onhashchange/index.html') diff --git a/files/ko/web/api/windoweventhandlers/onhashchange/index.html b/files/ko/web/api/windoweventhandlers/onhashchange/index.html new file mode 100644 index 0000000000..1a9f932360 --- /dev/null +++ b/files/ko/web/api/windoweventhandlers/onhashchange/index.html @@ -0,0 +1,159 @@ +--- +title: WindowEventHandlers.onhashchange +slug: Web/API/WindowEventHandlers/onhashchange +tags: + - HTML-DOM + - Property + - Reference + - WindowEventHandlers +translation_of: Web/API/WindowEventHandlers/onhashchange +--- +
+
{{APIRef("HTML DOM")}}
+ +
{{domxref("WindowEventHandlers")}} 믹스인의 WindowEventHandlers.onhashchange 속성은 
+
+ +

hashchange 이벤트를 처리하기 위한 {{domxref("EventHandler")}} 입니다.

+ +

hashchange 이벤트는 윈도우의 해시가 변경되면 시작됩니다. ( {{domxref("Window.location")}} 및 {{domxref("HTMLHyperlinkElementUtils.hash")}} 참조)

+ +

문법

+ +

event handler:

+ +
window.onhashchange = funcRef;
+
+ +

HTML event handler:

+ +
<body onhashchange="funcRef();">
+
+ +

event listener:

+ +

{{domxref("EventTarget.addEventListener()", "addEventListener()")}}를 사용하여 이벤트 리스너 추가하기

+ +
window.addEventListener("hashchange", funcRef, false);
+
+ +

매개변수

+ +
+
funcRef
+
함수에 대한 참조.
+
+ +

예제

+ +

event handler 사용하기

+ +

This example uses an event handler (window.onhashchange) to check the new hash value whenever it changes. If it equals #cool-feature, the script logs a message to the console.

+ +
function locationHashChanged() {
+  if (location.hash === '#cool-feature') {
+    console.log("You're visiting a cool feature!");
+  }
+}
+
+window.onhashchange = locationHashChanged;
+
+ +

Using an event listener

+ +

이 예제는 이벤트 리스너를 사용하여 해시가 변경 될 때마다 콘솔에 알림표시합니다.

+ +
function hashHandler() {
+  console.log('The hash has changed!');
+}
+
+window.addEventListener('hashchange', hashHandler, false);
+ +

Overriding the hash

+ +

이 함수는 새로운 해시를 동적으로 설정하여 임의로 두 값 중 하나로 설정합니다.

+ +
function changeHash() {
+  location.hash = (Math.random() > 0.5) ? 'location1' : 'location2';
+}
+
+ +

hashchange 이벤트

+ +

hashchange 이벤트에는 다음과 같은 필드가 있습니다:

+ + + + + + + + + + + + + + + + + + + +
FieldTypeDescription
newURL {{gecko_minversion_inline("6.0")}}DOMString탐색할 새로운 URL입니다.
oldURL {{gecko_minversion_inline("6.0")}}DOMString탐색했던 이전의 URL입니다.
+ +

제2의 해결책을 위한 event.newURL 와 event.oldURL

+ +
//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;
+	});
+}());
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}
+ +

브라우저 호환성

+ +

{{Compat("api.WindowEventHandlers.onhashchange")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf