From a848d9f6ba6845e68555693dc98caa5fdb2f6a8a Mon Sep 17 00:00:00 2001 From: alattalatta Date: Mon, 13 Dec 2021 14:08:06 +0900 Subject: [ko] Rewrite CustomEvent and CustomEvent(), add CustomEvent.detail (#3298) * Rewrite CustomEvent * Add CustomEvent.detail --- .../ko/web/api/customevent/customevent/index.html | 110 --------------------- files/ko/web/api/customevent/customevent/index.md | 69 +++++++++++++ files/ko/web/api/customevent/detail/index.md | 54 ++++++++++ files/ko/web/api/customevent/index.html | 96 ------------------ files/ko/web/api/customevent/index.md | 46 +++++++++ 5 files changed, 169 insertions(+), 206 deletions(-) delete mode 100644 files/ko/web/api/customevent/customevent/index.html create mode 100644 files/ko/web/api/customevent/customevent/index.md create mode 100644 files/ko/web/api/customevent/detail/index.md delete mode 100644 files/ko/web/api/customevent/index.html create mode 100644 files/ko/web/api/customevent/index.md (limited to 'files') diff --git a/files/ko/web/api/customevent/customevent/index.html b/files/ko/web/api/customevent/customevent/index.html deleted file mode 100644 index 428ca288ac..0000000000 --- a/files/ko/web/api/customevent/customevent/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: CustomEvent() -slug: Web/API/CustomEvent/CustomEvent -tags: - - API - - CustomEvent - - 레퍼런스 - - 생성자 - - 이벤트 -translation_of: Web/API/CustomEvent/CustomEvent ---- -

{{APIRef("DOM")}}

- -

CustomEvent() 생성자는 새로운 {{domxref("CustomEvent")}} 를 생성합니다.

- -

{{AvailableInWorkers}}

- -

문법

- -
 event = new CustomEvent(typeArg, customEventInit);
- -

파라미터

- -
-
typeArg
-
{{domxref("DOMString")}} 은 이벤트의 이름을 나타냅니다.
-
customEventInit {{optional_inline}}
-
CustomEventInit 딕셔너리는 다음 필드를 갖습니다. -
    -
  • "detail": 옵션이며 기본 값은 null 입니다. 모든 타입을 사용할 수 있으며 이벤트에 관련된 이벤트-의존 값입니다.
    • -
- -
-

CustomEventInit 딕셔너리는 {{domxref("Event.Event", "EventInit")}} 으로부터의 필드도 허용합니다.

-
-
-
- -

반환 값

- -

지정한 타입의 새로운 CustomEvent 객체. CustomEventInit 이 제공되었다면 그에 따른 모든 프로퍼티가 구성됩니다.

- -

예제

- -
// 적당한 이벤트 리스터 추가
-obj.addEventListener("cat", function(e) { process(e.detail) });
-
-// 이벤트 생성 및 실행
-var event = new CustomEvent("cat", {
-  detail: {
-    hazcheeseburger: true
-  }
-});
-obj.dispatchEvent(event);
- -

더 많은 예제는 이벤트 생성 및 트리거 문서에서 확인하세요.

- -

명세

- - - - - - - - - - - - - - - - -
명세상태코멘트
{{SpecName('DOM WHATWG','#dom-customevent-customevent','CustomEvent()')}}{{Spec2('DOM WHATWG')}}초기 정의.
- -

브라우저 호환성

- - - -

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

- -

폴리필

- -

다음 코드를 사용해 CustomEvent() 생성자의 기능을 인터넷 익스플로러 9 이상에서 폴리필링할 수 있습니다.

- -
(function () {
-
-  if ( typeof window.CustomEvent === "function" ) return false;
-
-  function CustomEvent ( event, params ) {
-    params = params || { bubbles: false, cancelable: false, detail: undefined };
-    var evt = document.createEvent( 'CustomEvent' );
-    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
-    return evt;
-   }
-
-  CustomEvent.prototype = window.Event.prototype;
-
-  window.CustomEvent = CustomEvent;
-})();
- -

Internet Explorer 9 이상은 window 에 CustomEvent 를 추가하지만, 올바른 구현이 아니며, 이는 함수입니다.

- -

함께 보기

- - diff --git a/files/ko/web/api/customevent/customevent/index.md b/files/ko/web/api/customevent/customevent/index.md new file mode 100644 index 0000000000..4c81dbfb76 --- /dev/null +++ b/files/ko/web/api/customevent/customevent/index.md @@ -0,0 +1,69 @@ +--- +title: CustomEvent() +slug: Web/API/CustomEvent/CustomEvent +tags: + - Constructor + - Reference +browser-compat: api.CustomEvent.CustomEvent +translation_of: Web/API/CustomEvent/CustomEvent +--- +{{APIRef("DOM")}} + +**`CustomEvent()`** 생성자는 새로운 {{domxref("CustomEvent")}}를 생성합니다. + +{{AvailableInWorkers}} + +## 구문 + +```js +CustomEvent(typeArg); +CustomEvent(typeArg, options); +``` + +### 매개변수 + +- `typeArg` + - : 이벤트의 이름을 나타내는 문자열입니다. +- `options` {{optional_inline}} + - : 다음 속성을 포함하는 객체입니다. + - `"detail"`: 이 이벤트 내에 포함할, 이벤트의 세부 정보를 나타내는 값입니다. 기본 값은 `null`입니다. 처리기에서 {{domxref("CustomEvent.detail")}} 속성을 통해 이 값에 접근할 수 있습니다. + - {{domxref("Event.Event", "Event()")}} 생성자의 옵션에 지정할 수 있는 모든 속성. + +## 예제 + +```js +// CustomEvent 생성 +const catFound = new CustomEvent('animalfound', { + detail: { + name: 'cat' + } +}); +const dogFound = new CustomEvent('animalfound', { + detail: { + name: 'dog' + } +}); + +// 적합한 이벤트 수신기 부착 +obj.addEventListener('animalfound', (e) => console.log(e.detail.name)); + +// 이벤트 발송 +obj.dispatchEvent(catFound); +obj.dispatchEvent(dogFound); + +// 콘솔에 "cat"과 "dog"가 기록됨 +``` + +[이벤트 생성 및 발동](/ko/docs/Web/Events/Creating_and_triggering_events) 문서에서 더 많은 예제를 확인하세요. + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 함께 보기 + +- {{domxref("CustomEvent")}} diff --git a/files/ko/web/api/customevent/detail/index.md b/files/ko/web/api/customevent/detail/index.md new file mode 100644 index 0000000000..88043995e0 --- /dev/null +++ b/files/ko/web/api/customevent/detail/index.md @@ -0,0 +1,54 @@ +--- +title: CustomEvent.detail +slug: Web/API/CustomEvent/detail +tags: + - Property + - Reference + - Read-only +browser-compat: api.CustomEvent.detail +translation_of: Web/API/CustomEvent/detail +--- +{{APIRef("DOM")}} + +{{domxref("CustomEvent")}} 인터페이스의 **`detail`** 읽기 전용 속성은 이벤트를 초기화할 때 제공한 데이터를 반환합니다. + +## 값 + +이벤트를 초기화할 때 제공한 아무 데이터. + +## 예제 + +```js +// CustomEvent 생성 +const catFound = new CustomEvent('animalfound', { + detail: { + name: 'cat' + } +}); +const dogFound = new CustomEvent('animalfound', { + detail: { + name: 'dog' + } +}); + +// 적합한 이벤트 수신기 부착 +obj.addEventListener('animalfound', (e) => console.log(e.detail.name)); + +// 이벤트 발송 +obj.dispatchEvent(catFound); +obj.dispatchEvent(dogFound); + +// 콘솔에 "cat"과 "dog"가 기록됨 +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{domxref("CustomEvent")}} diff --git a/files/ko/web/api/customevent/index.html b/files/ko/web/api/customevent/index.html deleted file mode 100644 index 782f81ba74..0000000000 --- a/files/ko/web/api/customevent/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: CustomEvent -slug: Web/API/CustomEvent -tags: - - API - - DOM - - Interface - - NeedsCompatTable - - NeedsExample - - Reference -translation_of: Web/API/CustomEvent ---- -

{{APIRef("DOM")}}CustomEvent 인터페이스는 어플리케이션의 어떤 목적에 의해 초기화된 이벤트를 나타냅니다.

- -

{{AvailableInWorkers}}

- -

생성자

- -
-
{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}
-
CustomEvent 를 생성합니다.
-
- -

프로퍼티

- -
-
{{domxref("CustomEvent.detail")}} {{readonlyinline}}
-
이벤트 초기화에 전달되는 모든 데이터.
-
- -

이 인터페이스는 그 부모인 {{domxref("Event")}} 로부터 프로퍼티를 상속받습니다:

- -

{{Page("/en-US/docs/Web/API/Event", "Properties")}}

- -

메소드

- -
-
{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}
-
-

CustomEvent 객체를 초기화합니다. 이벤트가 이미 디스패치되었다면, 이 메소드는 아무것도 하지 않습니다.

-
-
- -

이 인터페이스는 그 부모인 {{domxref("Event")}} 로부터 메소드를 상속받습니다:

- -

{{Page("/ko/docs/Web/API/Event", "Methods")}}

- -

명세

- - - - - - - - - - - - - - - - -
명세상태코멘트
{{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}}{{Spec2('DOM WHATWG')}}초기 정의.
- -

브라우저 호환성

- -

 

- - - -

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

- -

권한 코드에서 비권한 코드로 실행

- -

CustomEvent 를 권한 코드(예, 확장 기능)에서 비권한 코드(예, 웹페이지)로 실행할 때, 보안 문제를 고려해야 합니다. Firefox 와 다른 Gecko 어플리케이션은 한 컨텍스트에서 생성된 객체가 다른 곳에서 바로 사용되는 것을 제한하여 보안상의 문제를 자동으로 방지하지만, 이는 여러분의 코드가 예상한대로 실행되는 것을 제한하기도 합니다.

- -

CustomEvent 객체는 반드시 동일한 창에서 생성해야 합니다. CustomEvent 의 detail 속성도 동일하게 제한됩니다. String 과 Array 값은 제한 없이 그 컨텐츠를 읽을 수 있지만, 커스텀 객체는 그렇지 않습니다. 커스텀 객체를 사용할 때, Components.utils.cloneInto() 를 사용해 컨텐츠 스크립트에서 읽을 수 있는 객체의 속성을 정의해야 합니다.

- -
// doc 은 컨텐츠 다큐먼트의 참조입니다
-function dispatchCustomEvent(doc) {
-  var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView);
-  var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);
-  doc.dispatchEvent(myEvent);
-}
- -

함수 노출은 크롬 권한으로 실행하기 위한 컨텐츠 스크립트를 허용하여 보안 취약점에 열려있다는 점을 주의하시기 바랍니다.

- -

함께 보기

- - diff --git a/files/ko/web/api/customevent/index.md b/files/ko/web/api/customevent/index.md new file mode 100644 index 0000000000..e158ace0e0 --- /dev/null +++ b/files/ko/web/api/customevent/index.md @@ -0,0 +1,46 @@ +--- +title: CustomEvent +slug: Web/API/CustomEvent +tags: + - Interface + - Reference +browser-compat: api.CustomEvent +translation_of: Web/API/CustomEvent +--- +{{APIRef("DOM")}} + +**`CustomEvent`** 인터페이스는 어떤 목적이든간에 애플리케이션이 초기화한 이벤트를 나타냅니다. + +{{AvailableInWorkers}} + +## 생성자 + +- {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}} + - : 새로운 `CustomEvent`를 생성합니다. + +## 속성 + +부모 인터페이스인 {{domxref("Event")}}의 속성을 상속합니다. + +- {{domxref("CustomEvent.detail")}} {{readonlyinline}} + - : 이벤트를 초기화할 때 제공한 임의의 데이터입니다. + +## 메서드 + +부모 인터페이스인 {{domxref("Event")}}의 메서드를 상속합니다. + +- {{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}} + - : `CustomEvent` 객체를 초기화합니다. 이미 발송한 이벤트에서는 아무 동작도 하지 않습니다. + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{domxref("Window.postMessage()")}} +- [이벤트 생성 및 발동](/ko/docs/Web/Events/Creating_and_triggering_events) -- cgit v1.2.3-54-g00ecf