From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/api/windoweventhandlers/index.html | 101 +++++++++++++ .../windoweventhandlers/onhashchange/index.html | 159 +++++++++++++++++++++ .../api/windoweventhandlers/onpopstate/index.html | 57 ++++++++ .../api/windoweventhandlers/onstorage/index.html | 64 +++++++++ 4 files changed, 381 insertions(+) create mode 100644 files/ko/web/api/windoweventhandlers/index.html create mode 100644 files/ko/web/api/windoweventhandlers/onhashchange/index.html create mode 100644 files/ko/web/api/windoweventhandlers/onpopstate/index.html create mode 100644 files/ko/web/api/windoweventhandlers/onstorage/index.html (limited to 'files/ko/web/api/windoweventhandlers') diff --git a/files/ko/web/api/windoweventhandlers/index.html b/files/ko/web/api/windoweventhandlers/index.html new file mode 100644 index 0000000000..751168141a --- /dev/null +++ b/files/ko/web/api/windoweventhandlers/index.html @@ -0,0 +1,101 @@ +--- +title: WindowEventHandlers +slug: Web/API/WindowEventHandlers +tags: + - API + - HTML-DOM + - Interface + - Mixin + - Reference + - WindowEventHandlers +translation_of: Web/API/WindowEventHandlers +--- +
{{APIRef("HTML DOM")}}
+ +

The WindowEventHandlers mixin describes the event handlers common to several interfaces like {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} and {{domxref("HTMLFrameSetElement")}}. Each of these interfaces can implement additional specific event handlers.

+ +
+

Note: WindowEventHandlers is a mixin and not an interface; you can't actually create an object of type WindowEventHandlers.

+
+ +

Properties

+ +

The events properties, of the form onXYZ, are defined on the {{domxref("WindowEventHandlers")}}, and implemented by {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.

+ +
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("afterprint")}} event is raised.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeprint")}} event is raised.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeunload")}} event is raised.
+
{{domxref("WindowEventHandlers.onhashchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("hashchange")}} event is raised.
+
{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("languagechange")}} event is raised.
+
{{domxref("WindowEventHandlers.onmessage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.
+
{{domxref("WindowEventHandlers.onmessageerror")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("MessageError")}} event is raised.
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("offline")}} event is raised.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("online")}} event is raised.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pagehide")}} event is raised.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pageshow")}} event is raised.
+
{{domxref("WindowEventHandlers.onpopstate")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("popstate")}} event is raised.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("storage")}} event is raised.
+
{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}
+
An event handler for unhandled {{jsxref("Promise")}} rejection events.
+
{{domxref("WindowEventHandlers.onunload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unload")}} event is raised.
+
+ +

Methods

+ +

This interface defines no method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'WindowEventHandlers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windoweventhandlers', 'WindowEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. Added onlanguage since the {{SpecName("HTML5 W3C")}} snapshot.
{{SpecName("HTML5 W3C", "#windoweventhandlers", "WindowEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowEventHandlers (properties where on the target before it).
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + 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

+ + diff --git a/files/ko/web/api/windoweventhandlers/onpopstate/index.html b/files/ko/web/api/windoweventhandlers/onpopstate/index.html new file mode 100644 index 0000000000..4da830dbe2 --- /dev/null +++ b/files/ko/web/api/windoweventhandlers/onpopstate/index.html @@ -0,0 +1,57 @@ +--- +title: WindowEventHandlers.onpopstate +slug: Web/API/WindowEventHandlers/onpopstate +translation_of: Web/API/WindowEventHandlers/onpopstate +--- +
{{APIRef}} {{gecko_minversion_header("2")}}
+ +

요약

+ +

window의 popstate 이벤트 핸들러

+ +

같은 document에 관한 두개의 히스토리 엔트리에 변화가 일어날 때마다, popstate event가 window 객체에 붙게 된다. 만약 활성화된 엔트리가 history.pushState() 메서드나 history.replaceState() 메서드에 의해 생성되면, popstate 이벤트의 state 속성은 히스토리 엔트리 state 객체의 복사본을 갖게 된다.

+ +

history.pushState() 또는 history.replaceState()는 popstate 이벤트를 발생시키지 않는 것에 유의한다.popstate 이벤트는 브라우저의 백 버튼이나 (history.back() 호출) 등을 통해서만 발생된다. 그리고 그 이벤트는 같은 document에서 두 히스토리 엔트리 간의 이동이 있을 때만 발생이 된다.

+ +

브라우저는 popstate 이벤트를 페이지 로딩시에 다르게 처리한다. Chrome(v34 이전버전) 와 Safari는 popstate 이벤트를 페이지 로딩시에 발생시킨다. 하지만 Firefox 는 그렇지 않다.

+ +

문법

+ +
window.onpopstate = funcRef;
+
+ + + +

popstate 이벤트

+ +

예시를 보자, 다음의 코드를 실행하는 http://example.com/example.html의 한 페이지는 주석에 쓰여있는 경고들을 발생시킨다.

+ +
window.onpopstate = function(event) {
+  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // alerts "location: http://example.com/example.html, state: null
+history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}
+
+ +

원래의 히스토리 엔트리인 (http://example.com/example.html) 에 이와 연관된 state 객체가 없더라도, 두번째 history.back() API 호출 후 엔트리를 활성화 시키면 popstate 이벤트는 여전히 발생된다.

+ +

Specification

+ + + +

See also

+ + diff --git a/files/ko/web/api/windoweventhandlers/onstorage/index.html b/files/ko/web/api/windoweventhandlers/onstorage/index.html new file mode 100644 index 0000000000..8490ff6119 --- /dev/null +++ b/files/ko/web/api/windoweventhandlers/onstorage/index.html @@ -0,0 +1,64 @@ +--- +title: WindowEventHandlers.onstorage +slug: Web/API/WindowEventHandlers/onstorage +tags: + - API + - Event Handler + - Property + - Reference + - Web Storage + - WindowEventHandlers +translation_of: Web/API/WindowEventHandlers/onstorage +--- +
{{APIRef}}
+ +

{{domxref("WindowEventHandlers")}} 믹스인의 onstorage 속성은 storage 이벤트를 처리하는 {{domxref("EventHandler")}}입니다.

+ +

storage 이벤트는 다른 문서에서 저장소를 변경했을 때 발생합니다.

+ +

구문

+ +
 window.onstorage = functionRef;
+ +

값

+ +

functionRef는 함수 이름 혹은 함수 표현식으로, 단일 매개변수로써 {{domxref("StorageEvent")}}를 받습니다.

+ +

예제

+ +

다음 예제는 다른 문서에서 저장소 키를 바꿀 때마다 메시지를 기록합니다.

+ +
window.onstorage = function(e) {
+  console.log('The ' + e.key +
+    ' key has been changed from ' + e.oldValue +
+    ' to ' + e.newValue + '.');
+};
+ +

명세

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-window-onstorage','onstorage')}}{{Spec2('HTML WHATWG')}}
+ +

브라우저 호환성

+ + + +

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

+ +

같이 보기

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