[ko] Rewrite CustomEvent and CustomEvent(), add CustomEvent.detail (#3298)

* Rewrite CustomEvent

* Add CustomEvent.detail

5 files changed, 169 insertions, 206 deletions

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
----
-<p>{{APIRef("DOM")}}</p>
-
-<p><code><strong>CustomEvent()</strong></code> 생성자는 새로운 {{domxref("CustomEvent")}} 를 생성합니다.</p>
-
-<p>{{AvailableInWorkers}}</p>
-
-<h2 id="문법">문법</h2>
-
-<pre class="syntaxbox"> <var>event</var> = new CustomEvent(<var>typeArg</var>, <var>customEventInit</var>);</pre>
-
-<h3 id="파라미터">파라미터</h3>
-
-<dl>
- <dt><code>typeArg</code></dt>
- <dd>{{domxref("DOMString")}} 은 이벤트의 이름을 나타냅니다.</dd>
- <dt><code>customEventInit</code> {{optional_inline}}</dt>
- <dd><code>CustomEventInit</code> 딕셔너리는 다음 필드를 갖습니다.
- <ul>
-  <li><code>"detail"</code>: 옵션이며 기본 값은 <code>null</code> 입니다. 모든 타입을 사용할 수 있으며 이벤트에 관련된 이벤트-의존 값입니다.</li>
- </ul>
-
- <div class="note">
- <p><var><code>CustomEventInit</code> 딕셔너리는 {{domxref("Event.Event", "EventInit")}} 으로부터의 필드도 허용합니다.</var></p>
- </div>
- </dd>
-</dl>
-
-<h3 id="반환_값">반환 값</h3>
-
-<p>지정한 타입의 새로운 <code>CustomEvent</code> 객체. <code>CustomEventInit</code> 이 제공되었다면 그에 따른 모든 프로퍼티가 구성됩니다.</p>
-
-<h2 id="예제">예제</h2>
-
-<pre class="brush: js">// 적당한 이벤트 리스터 추가
-obj.addEventListener("cat", function(e) { process(e.detail) });
-
-// 이벤트 생성 및 실행
-var event = new CustomEvent("cat", {
-  detail: {
-    hazcheeseburger: true
-  }
-});
-obj.dispatchEvent(event);</pre>
-
-<p>더 많은 예제는 <a href="https://developer.mozilla.org/ko/docs/Web/Guide/Events/Creating_and_triggering_events">이벤트 생성 및 트리거</a> 문서에서 확인하세요.</p>
-
-<h2 id="명세">명세</h2>
-
-<table class="standard-table" style="height: 49px; width: 1000px;">
- <thead>
-  <tr>
-   <th scope="col">명세</th>
-   <th scope="col">상태</th>
-   <th scope="col">코멘트</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#dom-customevent-customevent','CustomEvent()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>초기 정의.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
-
-
-
-<p>{{Compat("api.CustomEvent.CustomEvent")}}</p>
-
-<h2 id="폴리필">폴리필</h2>
-
-<p>다음 코드를 사용해 <code>CustomEvent()</code> 생성자의 기능을 인터넷 익스플로러 9 이상에서 폴리필링할 수 있습니다.</p>
-
-<pre class="brush: js">(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;
-})();</pre>
-
-<p>Internet Explorer 9 이상은 window 에 CustomEvent 를 추가하지만, 올바른 구현이 아니며, 이는 함수입니다.</p>
-
-<h2 id="함께_보기">함께 보기</h2>
-
-<ul>
- <li>{{domxref("CustomEvent")}}</li>
- <li><a href="https://developer.mozilla.org/ko/docs/Web/Guide/Events/Creating_and_triggering_events">이벤트 생성 및 트리거</a></li>
-</ul>
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
----
-<p>{{APIRef("DOM")}}<strong><code>CustomEvent</code></strong> 인터페이스는 어플리케이션의 어떤 목적에 의해 초기화된 이벤트를 나타냅니다.</p>
-
-<p>{{AvailableInWorkers}}</p>
-
-<h2 id="생성자">생성자</h2>
-
-<dl>
- <dt>{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</dt>
- <dd><code>CustomEvent</code> 를 생성합니다.</dd>
-</dl>
-
-<h2 id="프로퍼티">프로퍼티</h2>
-
-<dl>
- <dt>{{domxref("CustomEvent.detail")}} {{readonlyinline}}</dt>
- <dd>이벤트 초기화에 전달되는 모든 데이터.</dd>
-</dl>
-
-<p><em>이 인터페이스는 그 부모인 </em>{{domxref("Event")}} 로부터 프로퍼티를 상속받습니다:</p>
-
-<p>{{Page("/en-US/docs/Web/API/Event", "Properties")}}</p>
-
-<h2 id="메소드">메소드</h2>
-
-<dl>
- <dt>{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}</dt>
- <dd>
- <p><code>CustomEvent</code> 객체를 초기화합니다. 이벤트가 이미 디스패치되었다면, 이 메소드는 아무것도 하지 않습니다.</p>
- </dd>
-</dl>
-
-<p><em>이 인터페이스는 그 부모인 </em>{{domxref("Event")}} 로부터 메소드를 상속받습니다:</p>
-
-<p>{{Page("/ko/docs/Web/API/Event", "Methods")}}</p>
-
-<h2 id="명세">명세</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">명세</th>
-   <th scope="col">상태</th>
-   <th scope="col">코멘트</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>초기 정의.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
-
-<p> </p>
-
-
-
-<p>{{Compat("api.CustomEvent")}}</p>
-
-<h2 id="권한_코드에서_비권한_코드로_실행">권한 코드에서 비권한 코드로 실행</h2>
-
-<p>CustomEvent 를 권한 코드(예, 확장 기능)에서 비권한 코드(예, 웹페이지)로 실행할 때, 보안 문제를 고려해야 합니다. Firefox 와 다른 Gecko 어플리케이션은 한 컨텍스트에서 생성된 객체가 다른 곳에서 바로 사용되는 것을 제한하여 보안상의 문제를 자동으로 방지하지만, 이는 여러분의 코드가 예상한대로 실행되는 것을 제한하기도 합니다.</p>
-
-<p>CustomEvent 객체는 반드시 동일한 <a href="/ko/docs/XUL/window">창</a>에서 생성해야 합니다. CustomEvent 의 <code>detail</code> 속성도 동일하게 제한됩니다. String 과 Array 값은 제한 없이 그 컨텐츠를 읽을 수 있지만, 커스텀 객체는 그렇지 않습니다. 커스텀 객체를 사용할 때, <a href="/ko/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.cloneInto">Components.utils.cloneInto()</a> 를 사용해 컨텐츠 스크립트에서 읽을 수 있는 객체의 속성을 정의해야 합니다.</p>
-
-<pre class="brush: js">// doc 은 컨텐츠 다큐먼트의 참조입니다
-function dispatchCustomEvent(doc) {
-  var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView);
-  var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);
-  doc.dispatchEvent(myEvent);
-}</pre>
-
-<p>함수 노출은 크롬 권한으로 실행하기 위한 컨텐츠 스크립트를 허용하여 보안 취약점에 열려있다는 점을 주의하시기 바랍니다.</p>
-
-<h2 id="함께_보기">함께 보기</h2>
-
-<ul>
- <li><a href="https://developer.mozilla.org/ko/docs/Archive/Add-ons/Interaction_between_privileged_and_non-privileged_pages" title="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged pages</a></li>
- <li><a href="/ko/docs/Web/API/Window/postMessage" title="/en-US/docs/Web/API/window.postMessage">Window.postMessage</a></li>
- <li><a href="/ko/docs/Web/Guide/Events/Creating_and_triggering_events">이벤트 생성 및 트리거</a></li>
-</ul>
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)