Rewrite/Update Event docs

10 files changed, 525 insertions, 694 deletions

diff --git a/files/ko/web/api/event/cancelable/index.md b/files/ko/web/api/event/cancelable/index.md
index 4c3154cebe..44ba56459a 100644
--- a/files/ko/web/api/event/cancelable/index.md
+++ b/files/ko/web/api/event/cancelable/index.md
@@ -1,23 +1,55 @@
 ---
-title: event.cancelable
+title: Event.cancelable
 slug: Web/API/Event/cancelable
 tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
+  - Property
+  - Read-only
+  - Reference
+browser-compat: api.Event.cancelable
 translation_of: Web/API/Event/cancelable
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">개요</h3>
-<p>이벤트의 취소가 가능한지를 나타냅니다.</p>
-<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">구문</h3>
-<pre class="eval"><em>bool</em> = <em>event</em>.cancelable;
-</pre>
-<p>이벤트에 규정한 액션을 취소할 수 있는가의 가능여부에 따라서 bool은 true 또는 false가 됩니다.</p>
-<h3 id=".E6.B3.A8.E6.84.8F.E7.82.B9" name=".E6.B3.A8.E6.84.8F.E7.82.B9">주의</h3>
-<p>이벤트취소의 가능여부는 이벤트의 초기화 시에 판별됩니다.</p>
-<p>이벤트를 취소하기 위해 <a href="/ja/DOM/event.preventDefault" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="ja/DOM/event.preventDefault">preventDefault</a> 메소드를 호출하게 되며, 관련 이벤트에 규정된 액션을 실행하지 않도록 합니다.</p>
-<h3 id=".E4.BB.95.E6.A7.98.E6.9B.B8" name=".E4.BB.95.E6.A7.98.E6.9B.B8">사양</h3>
-<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-canCancel">DOM Level 2 Events: cancelable</a></p>
-<p> </p>
-<p>{{ languages( { "en": "en/DOM/event.cancelable", "es": "es/DOM/event.cancelable", "pl": "pl/DOM/event.cancelable", "ja": "ja/DOM/event.cancelable" } ) }}</p>
+{{ ApiRef("DOM") }}
+
+{{domxref("Event")}} 인터페이스의 **`cancelable`** 읽기 전용 속성은 이벤트의 취소가 가능한지를 나타냅니다.
+
+이벤트가 취소 불가능한 경우, 해당 이벤트의 `cancelable` 속성은 `false`이며 수신기에서 이벤트의 발생을 멈출 수 없습니다.
+
+취소 가능한 브라우저 내장 이벤트는 대부분 사용자가 페이지와 상호작용해서 발생하는 이벤트입니다. 예컨대 {{event("click")}}, {{event("scroll")}}, {{event("beforeunload")}} 이벤트를 취소하게 되면, 각각 사용자가 어떤 요소를 클릭하는 것, 페이지를 스크롤하는 것, 페이지에서 나가는 것을 막게 됩니다.
+
+사용자 JavaScript 코드에서 생성하는 [합성 이벤트](/en-US/docs/Web/API/Event/Event)의 경우, 이벤트를 초기화할 때 취소 가능 여부를 지정할 수 있습니다.
+
+이벤트를 취소하려면 이벤트의 {{domxref("Event.preventDefault()", "preventDefault()")}} 메서드를 호출하세요. 해당 이벤트에 대한 기본 동작을 실행하지 않게 됩니다.
+
+다양한 종류의 이벤트를 처리해야 하는 처리기의 경우 `preventDefault()`를 호출하기 전에 먼저 `cancelable` 속성의 값을 검사해야 할 수 있습니다.
+
+## 값
+
+이벤트를 취소할 수 있으면 `true`.
+
+## 예제
+
+브라우저 제공자들은 {{event("wheel")}} 이벤트를 [최초 수신 시점에만 취소할 수 있도록](https://github.com/WICG/interventions/issues/33) 제안하고 있습니다. 즉, 두 번째 `wheel` 이벤트부터는 취소할 수 없습니다.
+
+```js
+function preventScrollWheel(event) {
+  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+    // 이벤트를 취소할 수 있으므로 취소함
+    event.preventDefault();
+  } else {
+    // 이벤트를 취소할 수 없음
+    // preventDefault() 호출이 안전하지 않음
+    console.warn(`The following event couldn't be canceled:`);
+    console.dir(event);
+  }
+}
+
+document.addEventListener('wheel', preventScrollWheel);
+```
+
+## 명세
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
diff --git a/files/ko/web/api/event/cancelbubble/index.md b/files/ko/web/api/event/cancelbubble/index.md
index 89820f5ec3..5a9a4141fa 100644
--- a/files/ko/web/api/event/cancelbubble/index.md
+++ b/files/ko/web/api/event/cancelbubble/index.md
@@ -1,42 +1,30 @@
 ---
 title: Event.cancelBubble
 slug: Web/API/Event/cancelBubble
+tags:
+  - Property
+  - Reference
+  - Deprecated
+browser-compat: api.Event.cancelBubble
 translation_of: Web/API/Event/cancelBubble
 ---
-<p>{{APIRef("DOM Events")}}</p>
+{{APIRef("DOM Events")}} {{Deprecated_Header}}
 
-<p><strong>Event.cancelBubble</strong> 속성은 {{domxref("Event.stopPropagation()")}}의 별칭입니다. 이벤트 핸들러에서 반환되기 전에 값을 true로 설정하면 이벤트가 전파되지 않습니다.</p>
+**Event.cancelBubble** 속성은 {{domxref("Event.stopPropagation()")}}의 별칭입니다. 이벤트 핸들러에서 반환되기 전에 값을 true로 설정하면 이벤트가 전파되지 않습니다.
 
-<p>Syntax</p>
+## 예제
 
-<pre class="syntaxbox">event.cancelBubble = <em>bool;</em>
-<em>var bool</em> = event.cancelBubble;
-</pre>
+```js
+elem.onclick = function(event) {
+  // Do cool things here
+  event.cancelBubble = true;
+}
+```
 
-<h2 id="Example">Example</h2>
+## 명세
 
-<pre>elem.onclick = function(e) {
- // do cool things here
-  e.cancelBubble = true;
-}</pre>
+{{Specifications}}
 
-<h2 id="Specifications">Specifications</h2>
+## 브라우저 호환성
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancellBubble')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{Compat("api.Event.cancelBubble")}}</p>
+{{Compat}}
diff --git a/files/ko/web/api/event/event/index.md b/files/ko/web/api/event/event/index.md
index 5ba8e6a6c4..0542cb6198 100644
--- a/files/ko/web/api/event/event/index.md
+++ b/files/ko/web/api/event/event/index.md
@@ -2,76 +2,57 @@
 title: Event()
 slug: Web/API/Event/Event
 tags:
-  - API
   - Constructor
-  - DOM
-  - Event
   - Reference
+browser-compat: api.Event.Event
 translation_of: Web/API/Event/Event
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p><code><strong>Event()</strong></code> constructor는 새로운 {{domxref("Event")}} 객체를 생성합니다.</p>
+**`Event()`** 생성자는 새로운 {{domxref("Event")}} 객체를 생성합니다. 생성자로 생성한 이벤트는 브라우저가 생성하는 이벤트와 구분해서 합성 이벤트(synthetic event)라고 부르며, [스크립트에서 발송할 수 있습니다](/ko/docs/Web/Events/Creating_and_triggering_events).
 
-<h2 id="Syntax">Syntax</h2>
+## 구문
 
-<pre class="syntaxbox">new Event(<var>typeArg</var>[, <var>eventInit</var>]);</pre>
+```js
+new Event(typeArg)
+new Event(typeArg, eventInit);
+```
 
-<h3 id="Values">Values</h3>
+### 매개변수
 
-<dl>
- <dt><code>typeArg</code></dt>
- <dd>이 인자는 {{domxref("DOMString")}} 입니다. event의 이름을 나타냅니다.</dd>
- <dt><code>eventInit</code> {{optional_inline}}</dt>
- <dd>이 인자는 <code>EventInit</code> dictionary, 입니다. 아래의 추가 옵션 필드가 있습니다.
- <ul>
-  <li><code>bubbles</code>:  {{jsxref("Boolean")}} 값을 받습니다. 해당 event가 bubble인지 아닌지 결정합니다. 기본값은 <code>false</code> 입니다.</li>
-  <li><code>cancelable</code>: {{jsxref("Boolean")}} 값을 받습니다.event가 캔슬 될 수 있는지 없는지 결정합니다. 기본값은<code>false</code> 입니다.</li>
-  <li><code>composed</code>: {{jsxref("Boolean")}} 값을 받습니다. event가 shadow root 바깥의 eventListener 들도 trigger 할 것인지 결정합니다. (더 자세한 내용은 이곳에서 {{domxref("Event.composed")}} ). 기본값은 <code>false</code> 입니다.</li>
- </ul>
- </dd>
-</dl>
+- `typeArg`
+  - : 이벤트의 이름을 나타내는 문자열입니다.
+- `eventInit` {{optional_inline}}
+  - : 다음 속성을 포함하는 객체입니다.
+    - `bubbles` {{optional_inline}}
+      - : 이벤트의 버블링 여부를 나타내는 불리언 값입니다. 기본 값은 `false`입니다.
+    - `cancelable` {{optional_inline}}
+      - : 이벤트를 취소할 수 있는지 나타내는 불리언 값입니다. 기본 값은 `false`입니다.
+    - `composed` {{optional_inline}}
+      - : 이벤트가 섀도 루트(shadow root) 바깥의 이벤트 수신기로도 전달될지 나타내는 불리언 값입니다. {{domxref("Event.composed")}}에서 자세한 정보를 확인하세요. 기본 값은 `false`입니다.
 
-<h2 id="Example">Example</h2>
+## 예제
 
-<pre class="brush: js">// create a look event that bubbles up and cannot be canceled
+```js
+// 버블링 가능하고 취소 불가능한 look 이벤트 생성
 
-var evt = new Event("look", {"bubbles":true, "cancelable":false});
+const evt = new Event("look", {"bubbles":true, "cancelable":false});
 document.dispatchEvent(evt);
 
-// event can be dispatched from any element, not only the document
+// document 외의 다른 요소에서도 이벤트 발송 가능
 myDiv.dispatchEvent(evt);
-</pre>
+```
 
-<h2 id="Specifications">Specifications</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('DOM WHATWG','#dom-event-event','Event()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## 브라우저 호환성
 
+{{Compat}}
 
+## 같이 보기
 
-<p>{{Compat("api.Event.Event")}}</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>{{domxref("Event")}}</li>
- <li>{{domxref("EventTarget.dispatchEvent()")}}</li>
- <li><a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">Creating and triggering events</a></li>
-</ul>
+- {{domxref("Event")}}
+- {{domxref("EventTarget.dispatchEvent()")}}
+- [이벤트 생성 및 발동](/en-US/docs/Web/Events/Creating_and_triggering_events)
diff --git a/files/ko/web/api/event/eventphase/index.md b/files/ko/web/api/event/eventphase/index.md
index 895222832d..dcfe4c3e7f 100644
--- a/files/ko/web/api/event/eventphase/index.md
+++ b/files/ko/web/api/event/eventphase/index.md
@@ -1,86 +1,60 @@
 ---
 title: Event.eventPhase
 slug: Web/API/Event/eventPhase
+tags:
+  - Property
+  - Read-only
+  - Reference
+browser-compat: api.Event.eventPhase
 translation_of: Web/API/Event/eventPhase
 ---
-<p>{{ApiRef("DOM")}}</p>
-
-<p>현재 발생중인 이벤트 흐름의 단계를 나타냅니다.</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="brush: js"><em>var phase</em> = event.eventPhase;
-</pre>
-
-<p>이벤트 흐름의 최근 실행 단계에 대한 지정된 정수값을 반환합니다. 가능한 값은 {{anch("이벤트 단계 상수")}} 목록을 참조.</p>
-
-<h2 id="Constants">Constants</h2>
-
-<h3 id="Event_phase_constants">Event phase constants</h3>
-
-<p>이 값들은 이벤트 흐름의 현재 실행 단계를 나타냅니다.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Constant</th>
-   <th scope="col">Value</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>Event.NONE</code></td>
-   <td>0</td>
-   <td>아무런 이벤트도 발생하지 않았습니다.</td>
-  </tr>
-  <tr>
-   <td><code>Event.CAPTURING_PHASE</code></td>
-   <td>1</td>
-   <td>이벤트가 상위 개체를 통해 전파됩니다. 이 프로세스는 {{domxref("Window")}},  {{domxref("Document")}}에서 시작하여,  {{domxref("HTMLHtmlElement")}} 등 대상의 부모에 도달할 때까지 요소들을 통과합니다. 이 단계에서 {{domxref("EventTarget.addEventListener()")}} 가 호출될 때 캡처 모드에 있는 {{domxref("EventListener", "Event listeners", "", 1)}} 가 트리거됩니다.</td>
-  </tr>
-  <tr>
-   <td><code>Event.AT_TARGET</code></td>
-   <td>2</td>
-   <td>이벤트가 {{domxref("EventTarget", "the event's target", "", 1)}}에 도착했습니다. 이 단계에서 등록된 이벤트 리스너가 이 때 호출됩니다. 만약  {{domxref("Event.bubbles")}} 이 <code>false</code> 라면, 이 단계가 완료된 다음 이벤트 진행은 종료됩니다.</td>
-  </tr>
-  <tr>
-   <td><code>Event.BUBBLING_PHASE</code></td>
-   <td>3</td>
-   <td>이벤트가 역순으로 대상의 조상을 통해 전파됩니다. 대상의 부모부터 시작해서, {{domxref("Window")}}를 포함하는 단계까지 도달합니다. 이는 버블링으로 알려져 있으며, {{domxref("Event.bubbles")}}가 <code>true</code> 일 때만 발생합니다. 이 프로세스 중에 이 단계에 등록된 {{domxref("EventListener", "Event listeners", "", 1)}} 가 트리거됩니다.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>더 상세한 내용은 DOM Level 3 Events 명세인 <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">section 3.1, Event dispatch and DOM event flow</a> 를 참고하세요.</p>
-
-<h2 id="Example" name="Example">Example</h2>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">&lt;h4&gt;Event Propagation Chain&lt;/h4&gt;
-&lt;ul&gt;
-  &lt;li&gt;Click 'd1'&lt;/li&gt;
-  &lt;li&gt;Analyse event propagation chain&lt;/li&gt;
-  &lt;li&gt;Click next div and repeat the experience&lt;/li&gt;
-  &lt;li&gt;Change Capturing mode&lt;/li&gt;
-  &lt;li&gt;Repeat the experience&lt;/li&gt;
-&lt;/ul&gt;
-&lt;input type="checkbox" id="chCapture" /&gt;
-&lt;label for="chCapture"&gt;Use Capturing&lt;/label&gt;
- &lt;div id="d1"&gt;d1
-  &lt;div id="d2"&gt;d2
-      &lt;div id="d3"&gt;d3
-          &lt;div id="d4"&gt;d4&lt;/div&gt;
-      &lt;/div&gt;
-  &lt;/div&gt;
- &lt;/div&gt;
- &lt;div id="divInfo"&gt;&lt;/div&gt;
-</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">div {
+{{ApiRef("DOM")}}
+
+{{domxref("Event")}} 인터페이스의 **`eventPhase`** 읽기 전용 속성은 현재 평가 중인 이벤트 흐름 단계를 나타냅니다.
+
+## 값
+
+이벤트 흐름의 단계를 나타내는 정수 값을 반환합니다. 가능한 값은 다음과 같습니다.
+
+- `Event.NONE (0)`
+  - : 이 이벤트는 현재 처리 중이 아닙니다.
+- `Event.CAPTURING_PHASE (1)`
+  - : 이벤트가 대상의 부모 객체를 통해 전파 중입니다. 이 단계는 {{domxref("Window")}}에서 시작해서, {{domxref("Document")}}, {{domxref("HTMLHtmlElement")}}를 거쳐 이벤트가 대상의 부모에 도달할 때까지 지속됩니다. {{domxref("EventTarget.addEventListener()")}}로 등록한 [이벤트 수신기](/ko/docs/Web/API/EventListener) 중 캡처 모드로 등록한 수신기는 이 단계에서 발동합니다.
+- `Event.AT_TARGET (2)`
+  - : 이벤트가 [이벤트 대상](/ko/docs/Web/API/EventTarget)에 도착했습니다. {{domxref("Event.bubbles")}}가 `false`면 `Event.AT_TARGET` 단계가 끝남과 동시에 이벤트 처리도 마칩니다.
+- `Event.BUBBLING_PHASE (3)`
+  - : 이벤트가 대상의 조상을 따라 역순으로 전파 중입니다. 이 단계는 대상의 부모에서 시작해서 마침내 {{domxref("Window")}}에 도달할 때까지 지속됩니다. 이 동작을 버블링이라고 부르며, {{domxref("Event.bubbles")}}가 `true`여야 발생합니다. [이벤트 수신기](/ko/docs/Web/API/EventListener) 중 캡처 모드가 아닌 수신기는 이 단계에서 발동합니다.
+
+
+## 예제
+
+### HTML
+
+```html
+<h4>이벤트 전파 체인</h4>
+<ul>
+  <li>'d1'을 클릭하세요</li>
+  <li>이벤트의 전파 과정을 확인하세요</li>
+  <li>다음 div를 클릭해서 위의 과정을 반복하세요</li>
+  <li>캡처 모드를 변경하세요</li>
+  <li>위의 과정을 반복하세요</li>
+</ul>
+<input type="checkbox" id="chCapture" />
+<label for="chCapture">캡처 사용</label>
+  <div id="d1">d1
+    <div id="d2">d2
+      <div id="d3">d3
+        <div id="d4">d4</div>
+      </div>
+    </div>
+  </div>
+<div id="divInfo"></div>
+```
+
+### CSS
+
+```css
+div {
   margin: 20px;
   padding: 4px;
   border: thin black solid;
@@ -91,89 +65,89 @@ translation_of: Web/API/Event/eventPhase
   padding: 8px;
   background-color:white;
   font-size:80%;
-}</pre>
+}
+```
+
+### JavaScript
 
-<h3 id="JavaScript_Content">JavaScript Content</h3>
+```js
+let clear = false,
+    divInfo = null,
+    divs = null,
+    useCapture = false;
 
-<pre class="brush: js">var clear = false, divInfo = null, divs = null, useCapture = false;
 window.onload = function () {
-  divInfo = document.getElementById("divInfo");
-  divs = document.getElementsByTagName('div');
-  chCapture = document.getElementById("chCapture");
+  divInfo = document.getElementById('divInfo')
+  divs = document.getElementsByTagName('div')
+  chCapture = document.getElementById('chCapture')
   chCapture.onclick = function () {
-    RemoveListeners();
-    AddListeners();
+    RemoveListeners()
+    AddListeners()
   }
-  Clear();
-  AddListeners();
+  Clear()
+  AddListeners()
 }
 
 function RemoveListeners() {
-  for (var i = 0; i &lt; divs.length; i++) {
-    var d = divs[i];
+  for (let i = 0; i < divs.length; i++) {
+    let d = divs[i]
     if (d.id != "divInfo") {
-      d.removeEventListener("click", OnDivClick, true);
-      d.removeEventListener("click", OnDivClick, false);
+      d.removeEventListener("click", OnDivClick, true)
+      d.removeEventListener("click", OnDivClick, false)
     }
   }
 }
 
 function AddListeners() {
-  for (var i = 0; i &lt; divs.length; i++) {
-    var d = divs[i];
+  for (let i = 0; i < divs.length; i++) {
+    let d = divs[i]
     if (d.id != "divInfo") {
-      if (chCapture.checked)
-        d.addEventListener("click", OnDivClick, true);
-      else
-        d.addEventListener("click", OnDivClick, false);
-      d.onmousemove = function () { clear = true; };
+        if (chCapture.checked) {
+            d.addEventListener("click", OnDivClick, true)
+        }
+        else {
+            d.addEventListener("click", OnDivClick, false)
+            d.onmousemove = function () { clear = true }
+        }
     }
   }
 }
 
 function OnDivClick(e) {
   if (clear) {
-    Clear(); clear = false;
+    Clear()
+    clear = false
   }
   if (e.eventPhase == 2)
     e.currentTarget.style.backgroundColor = 'red';
-  var level = e.eventPhase == 0 ? "none" : e.eventPhase == 1 ? "capturing" : e.eventPhase == 2 ? "target" : e.eventPhase == 3 ? "bubbling" : "error";
-  divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "&lt;br/&gt;";
+    const level =
+        e.eventPhase == 0 ? "없음" :
+        e.eventPhase == 1 ? "캡처" :
+        e.eventPhase == 2 ? "대상" :
+        e.eventPhase == 3 ? "버블" : "오류";
+    const p = document.createElement('p')
+    p.textContent = `${e.currentTarget.id}; eventPhase: ${level}`;
+    divInfo.appendChild(p);
 }
 
 function Clear() {
-  for (var i = 0; i &lt; divs.length; i++) {
-    if (divs[i].id != "divInfo")
-      divs[i].style.backgroundColor = (i &amp; 1) ? "#f6eedb" : "#cceeff";
+  for (let i = 0; i < divs.length; i++) {
+    if (divs[i].id != "divInfo") {
+      divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff"
+    }
   }
-  divInfo.innerHTML = '';
-}</pre>
-
-<p>{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}</p>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Specification</th>
-   <th>Status</th>
-   <th>Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}}</td>
-   <td>{{Spec2("DOM2 Events")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+  divInfo.textContent = '';
+}
+```
+
+### 결과
+
+{{EmbedLiveSample('예제', '', '700')}}
+
+## 명세
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
diff --git a/files/ko/web/api/event/index.md b/files/ko/web/api/event/index.md
index 04c4bc5695..15de863b26 100644
--- a/files/ko/web/api/event/index.md
+++ b/files/ko/web/api/event/index.md
@@ -2,211 +2,126 @@
 title: Event
 slug: Web/API/Event
 tags:
-  - API
-  - DOM
-  - Event
   - Interface
   - Reference
-  - UI
-  - 이벤트
+browser-compat: api.Event
 translation_of: Web/API/Event
 ---
-<p>{{ APIRef("DOM") }}</p>
-
-<p><strong><code>Event</code></strong> 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다.</p>
-
-<p>이벤트는 마우스를 클릭하거나 키보드를 누르는 등 사용자 액션에 의해 발생할 수도 있고, 혹은 비동기적 작업의 진행을 나타내기 위해 API가 생성할 수도 있습니다. 요소의 {{domxref("HTMLElement.click()")}} 메서드를 호출하거나, 이벤트를 정의한 후 특정 대상에 대해서 {{domxref("EventTarget.dispatchEvent()")}}를 사용하는 등 프로그래밍적으로도 만들어낼 수 있습니다.</p>
-
-<p>이벤트의 종류는 다양하며 일부는 <code>Event</code> 인터페이스의 파생 인터페이스를 사용합니다. <code>Event</code> 자체는 모든 이벤트에 공통된 속성과 메서드를 가집니다.</p>
-
-<p>많은 DOM 요소는 이벤트를 받고("수신"), 받은 이벤트를 "처리"하는 코드를 실행할 수 있습니다. 이벤트 처리기는 대개 {{domxref("EventTarget.addEventListener()")}}를 사용해 다양한 요소(<code>&lt;button&gt;</code>, <code>&lt;div&gt;</code>, <code>&lt;span&gt;</code>, 등등)에 "부착"합니다. 그리고 제대로 추가한 경우, 반대로 {{domxref("EventTarget.removeEventListener", "removeEventListener()")}}로 제거할 수도 있습니다.</p>
-
-<div class="blockIndicator note">
-<p><strong>참고:</strong> 하나의 요소는 다수의 처리기를 가질 수 있습니다. 완전히 동일한 이벤트에 대해서도, 예컨대 광고 모듈과 통계 모듈이 각각 비디오 시청을 추적하는 등 여러 처리기를 따로 등록할 수 있습니다.</p>
-</div>
-
-<p>중첩된 많은 요소가 서로 자신만의 처리기를 가지고 있는 경우 이벤트 처리가 매우 복잡해질 수 있습니다. 특히 부모 요소와 자식 요소의 "공간 상 위치"가 겹쳐서 이벤트가 양쪽 모두에서 발생하는 경우, 이벤트 처리 순서는 각 처리기의 <a href="/ko/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">이벤트 확산과 캡처</a> 설정에 따라 달라집니다.</p>
-
-<h2 id="Event_기반_인터페이스">Event 기반 인터페이스</h2>
-
-<p>다음은 <code>Event</code> 인터페이스에서 파생된 인터페이스의 목록입니다.</p>
-
-<p>모든 이벤트 인터페이스 이름은 "Event"로 끝납니다.</p>
-
-<div class="index">
-<ul>
- <li>
-  <div class="index">
-  <ul>
-   <li>{{domxref("AnimationEvent")}}</li>
-   <li>{{domxref("AudioProcessingEvent")}}</li>
-   <li>{{domxref("BeforeInputEvent")}}</li>
-   <li>{{domxref("BeforeUnloadEvent")}}</li>
-   <li>{{domxref("BlobEvent")}}</li>
-   <li>{{domxref("ClipboardEvent")}}</li>
-   <li>{{domxref("CloseEvent")}}</li>
-   <li>{{domxref("CompositionEvent")}}</li>
-   <li>{{domxref("CSSFontFaceLoadEvent")}}</li>
-   <li>{{domxref("CustomEvent")}}</li>
-   <li>{{domxref("DeviceLightEvent")}}</li>
-   <li>{{domxref("DeviceMotionEvent")}}</li>
-   <li>{{domxref("DeviceOrientationEvent")}}</li>
-   <li>{{domxref("DeviceProximityEvent")}}</li>
-   <li>{{domxref("DOMTransactionEvent")}}</li>
-   <li>{{domxref("DragEvent")}}</li>
-   <li>{{domxref("EditingBeforeInputEvent")}}</li>
-   <li>{{domxref("ErrorEvent")}}</li>
-   <li>{{domxref("FetchEvent")}}</li>
-   <li>{{domxref("FocusEvent")}}</li>
-   <li>{{domxref("GamepadEvent")}}</li>
-   <li>{{domxref("HashChangeEvent")}}</li>
-   <li>{{domxref("IDBVersionChangeEvent")}}</li>
-   <li>{{domxref("InputEvent")}}</li>
-   <li>{{domxref("KeyboardEvent")}}</li>
-   <li>{{domxref("MediaStreamEvent")}}</li>
-   <li>{{domxref("MessageEvent")}}</li>
-   <li>{{domxref("MouseEvent")}}</li>
-   <li>{{domxref("MutationEvent")}}</li>
-   <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
-   <li>{{domxref("OverconstrainedError")}}</li>
-   <li>{{domxref("PageTransitionEvent")}}</li>
-   <li>{{domxref("PaymentRequestUpdateEvent")}}</li>
-   <li>{{domxref("PointerEvent")}}</li>
-   <li>{{domxref("PopStateEvent")}}</li>
-   <li>{{domxref("ProgressEvent")}}</li>
-   <li>{{domxref("RelatedEvent")}}</li>
-   <li>{{domxref("RTCDataChannelEvent")}}</li>
-   <li>{{domxref("RTCIdentityErrorEvent")}}</li>
-   <li>{{domxref("RTCIdentityEvent")}}</li>
-   <li>{{domxref("RTCPeerConnectionIceEvent")}}</li>
-   <li>{{domxref("SensorEvent")}}</li>
-   <li>{{domxref("StorageEvent")}}</li>
-   <li>{{domxref("SVGEvent")}}</li>
-   <li>{{domxref("SVGZoomEvent")}}</li>
-   <li>{{domxref("TimeEvent")}}</li>
-   <li>{{domxref("TouchEvent")}}</li>
-   <li>{{domxref("TrackEvent")}}</li>
-   <li>{{domxref("TransitionEvent")}}</li>
-   <li>{{domxref("UIEvent")}}</li>
-   <li>{{domxref("UserProximityEvent")}}</li>
-   <li>{{domxref("WebGLContextEvent")}}</li>
-   <li>{{domxref("WheelEvent")}}</li>
-  </ul>
-  </div>
- </li>
-</ul>
-</div>
-
-<h2 id="생성자">생성자</h2>
-
-<dl>
- <dt>{{domxref("Event.Event", "Event()")}}</dt>
- <dd><code>Event</code> 객체를 생성하고 반환합니다.</dd>
-</dl>
-
-<h2 id="속성">속성</h2>
-
-<dl>
- <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt>
- <dd>이벤트가 DOM을 타고 위로 확산되는지 나타냅니다.</dd>
- <dt>{{domxref("Event.cancelBubble")}}</dt>
- <dd>{{domxref("Event.stopPropagation()")}}의 이명으로, 과거에 사용하던 명칭입니다. 이벤트 처리기가 종료되기 전에 값을 <code>true</code>로 설정하면 더 이상의 확산을 막습니다.</dd>
- <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt>
- <dd>이벤트를 취소할 수 있는지 나타냅니다.</dd>
- <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt>
- <dd>이벤트가 섀도 DOM과 일반 DOM의 경계를 넘어 확산할 수 있는지 나타내는 불리언입니다.</dd>
- <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt>
- <dd>이벤트를 위해 현재 등록된 대상의 참조. 이벤트가 현재 전달되기로한 객체입니다. 재 타게팅을 통해 변경될수도 있습니다.</dd>
- <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt>
- <dd>이벤트가 확산하며 거쳐간 DOM {{domxref("Node")}}의 {{jsxref("Array")}}입니다.</dd>
- <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt>
- <dd>이벤트의 {{domxref("event.preventDefault()")}}가 호출됐는지를 나타냅니다.</dd>
- <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt>
- <dd>처리 중인 이벤트 흐름의 단계를 나타냅니다.</dd>
- <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
- <dd>이벤트의 명시적인 원래 대상입니다. (Mozilla 전용)</dd>
- <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
- <dd>이벤트 대상 재설정 이전의 원래 대상입니다. (Mozilla 전용)</dd>
- <dt>{{domxref("Event.returnValue")}}</dt>
- <dd>Internet Explorer가 도입했으며 구형 사이트의 동작을 보장하기 위해 DOM 명세에 포함된 호환용 속성입니다. 이상적으로는 {{domxref("Event.preventDefault()")}}와 {{domxref("Event.defaultPrevented")}}를 사용해야 하지만, 원하면 <code>returnValue</code>를 사용할 수 있습니다.</dd>
- <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt>
- <dd>구버전 Internet Explorer에서 사용한 {{domxref("Event.target")}}의 다른 이름입니다. 비표준이지만 일부 다른 브라우저에서도 호환성을 위해 지원하고 있습니다.</dd>
- <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt>
- <dd>이벤트가 처음에 발생했던 대상의 참조입니다.</dd>
- <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt>
- <dd>이벤트가 생성된 시간(밀리초)입니다. 명세에 따르면 문서 로딩 후 이벤트 생성 시점까지의 시간으로 나타나 있지만 실제 구현은 브라우저마다 다릅니다. 또한 이 속성의 값을 {{domxref("DOMHighResTimeStamp")}}로 바꾸는 작업이 진행 중입니다.</dd>
- <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt>
- <dd>이벤트의 이름입니다. 대소문자를 구분하지 않습니다.</dd>
- <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt>
- <dd>이벤트가 브라우저에 의해 생성, 예컨대 사용자 클릭으로 인해 발생한 것인지, 아니면 {{domxref("Event.initEvent()")}} 등을 사용한 스크립트에서 발생한 것인지 나타냅니다.</dd>
-</dl>
-
-<div class="hidden">
-<h3 id="Obsolete_properties">Obsolete properties</h3>
-
-<dl>
- <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt>
- <dd>Obsolete; use {{domxref("Event.composed", "composed")}} instead. (A {{jsxref("Boolean")}} indicating whether the given event will bubble across through the shadow root into the standard DOM.)</dd>
-</dl>
-</div>
-
-<h2 id="메서드">메서드</h2>
-
-<dl>
- <dt>{{domxref("Event.composedPath()")}}</dt>
- <dd>이벤트의 경로, 즉 수신기를 발동할 모든 객체를 반환합니다. 섀도우 루트의 {{domxref("ShadowRoot.mode")}}가 <code>closed</code>인 경우 섀도우 트리의 노드는 포함하지 않습니다.</dd>
- <dt>{{domxref("Event.preventDefault()")}}</dt>
- <dd>취소 가능한 경우 이벤트를 취소합니다.</dd>
- <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt>
- <dd>이 특정 이벤트에 대해서 다른 모든 수신기의 호출을 방지합니다. 같은 요소에 부착된 수신기는 물론 캡처 단계 등 이후에 순회활 요소에 부착된 수신기도 이 이벤트를 받지 않습니다.</dd>
- <dt>{{domxref("Event.stopPropagation()")}}</dt>
- <dd>이벤트의 DOM 내 추가 확산을 방지합니다.</dd>
-</dl>
-
-<div class="hidden">
-<h3 id="더_이상_사용되지_않는_메소드">더 이상 사용되지 않는 메소드</h3>
-
-<dl>
- <dt>{{domxref("Event.createEvent()")}} {{deprecated_inline}}</dt>
- <dd>Creates a new event, which must then be initialized by calling its <code>initEvent()</code> method.</dd>
- <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt>
- <dd>생성된 이벤트의 값을 초기화합니다. 이벤트가 이미 디스패치되고 있다면, 이 메소드는 아무것도 하지 않습니다.</dd>
- <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
- <dd>{{domxref("Event.defaultPrevented")}}의 값을 반환합니다.</dd>
- <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
- <dd>이벤트 확산을 방지합니다. {{domxref("event.stopPropagation")}}을 사용하세요.</dd>
- <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
- <dd>이벤트 확산을 방지합니다. {{domxref("event.stopPropagation")}}을 사용하세요.</dd>
-</dl>
-</div>
-
-<h2 id="명세">명세</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>명세</th>
-   <th>상태</th>
-   <th>코멘트</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
-
-
-
-<p>{{Compat("api.Event")}}</p>
-
-<h2 id="같이_보기">같이 보기</h2>
-
-<ul>
- <li>사용 가능한 이벤트 유형: <a href="/ko/docs/Web/Events">이벤트 참고서</a></li>
- <li><a href="/ko/docs/Web/API/Event/Comparison_of_Event_Targets">이벤트 대상의 비교</a> (<code>target</code> vs <code>currentTarget</code> vs <code>relatedTarget</code> vs <code>originalTarget</code>)</li>
- <li><a href="https://developer.mozilla.org/ko/docs/Web/Guide/Events/Creating_and_triggering_events">이벤트 생성 및 트리거</a></li>
-</ul>
+{{APIRef("DOM")}}
+
+**`Event`** 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다.
+
+이벤트는 마우스를 클릭하거나 키보드를 누르는 등 사용자의 액션에 의해 발생할 수도 있고, 비동기적 작업의 진행을 나타내기 위해서 API가 생성할 수도 있습니다. 요소의 {{domxref("HTMLElement.click()")}} 메서드를 호출하거나, 이벤트를 정의한 후 특정 대상에 대해서 {{domxref("EventTarget.dispatchEvent()")}}로 발송하는 등 프로그래밍적으로도 만들어낼 수 있습니다.
+
+이벤트에는 다양한 종류가 있으며 일부는 `Event` 인터페이스의 파생 인터페이스를 사용합니다. `Event` 자체는 모든 이벤트에 공통된 속성과 메서드를 가집니다.
+
+많은 DOM 요소는 이벤트를 받고("수신"), 받은 이벤트를 "처리"할 수 있습니다. 이벤트 처리기는 주로 {{domxref("EventTarget.addEventListener()")}}를 사용해서 다양한 요소(`<button>`, `<div>`, `<span>`, 등등)에 "부착"합니다. 올바르게 부착한 경우, {{domxref("EventTarget.removeEventListener", "removeEventListener()")}}를 사용하면 반대로 제거할 수도 있습니다.
+
+> **참고:** 하나의 요소가 다수의 처리기를 가질 수 있습니다. 완전히 동일한 이벤트에 여러 처리기를 따로 등록할 수 있습니다. 예컨대 광고 모듈과 통계 모듈이 각각 비디오 시청 이벤트에 대한 처리기를 부착하는 것이 가능합니다.
+
+중첩된 많은 요소가 서로 자신만의 이벤트 처리기를 가지고 있으면 이벤트의 처리가 매우 복잡해질 수 있습니다. 특히 부모 요소와 자식 요소가 화면에서 차지하는 영역이 겹쳐서 (클릭 등의) 이벤트가 양쪽 모두에서 발생하는 경우, 이벤트 처리 순서는 각 처리기의 [이벤트 버블링과 캡처](/ko/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture) 설정에 따라 달라집니다.
+
+## Event 기반 인터페이스
+
+다음은 `Event` 인터페이스에서 파생된 인터페이스의 목록입니다.
+
+모든 이벤트 인터페이스 이름은 "Event"로 끝난다는 사실도 확인할 수 있습니다.
+
+- {{domxref("AnimationEvent")}}
+- {{domxref("AudioProcessingEvent")}}
+- {{domxref("BeforeUnloadEvent")}}
+- {{domxref("BlobEvent")}}
+- {{domxref("ClipboardEvent")}}
+- {{domxref("CloseEvent")}}
+- {{domxref("CompositionEvent")}}
+- {{domxref("CustomEvent")}}
+- {{domxref("DeviceMotionEvent")}}
+- {{domxref("DeviceOrientationEvent")}}
+- {{domxref("DeviceProximityEvent")}}
+- {{domxref("DragEvent")}}
+- {{domxref("ErrorEvent")}}
+- {{domxref("FetchEvent")}}
+- {{domxref("FocusEvent")}}
+- {{domxref("FormDataEvent")}}
+- {{domxref("GamepadEvent")}}
+- {{domxref("HashChangeEvent")}}
+- {{domxref("HIDInputReportEvent")}}
+- {{domxref("IDBVersionChangeEvent")}}
+- {{domxref("InputEvent")}}
+- {{domxref("KeyboardEvent")}}
+- {{domxref("MediaStreamEvent")}}
+- {{domxref("MessageEvent")}}
+- {{domxref("MouseEvent")}}
+- {{domxref("MutationEvent")}}
+- {{domxref("OfflineAudioCompletionEvent")}}
+- {{domxref("PageTransitionEvent")}}
+- {{domxref("PaymentRequestUpdateEvent")}}
+- {{domxref("PointerEvent")}}
+- {{domxref("PopStateEvent")}}
+- {{domxref("ProgressEvent")}}
+- {{domxref("RTCDataChannelEvent")}}
+- {{domxref("RTCPeerConnectionIceEvent")}}
+- {{domxref("StorageEvent")}}
+- {{domxref("SubmitEvent")}}
+- {{domxref("SVGEvent")}}
+- {{domxref("TimeEvent")}}
+- {{domxref("TouchEvent")}}
+- {{domxref("TrackEvent")}}
+- {{domxref("TransitionEvent")}}
+- {{domxref("UIEvent")}}
+- {{domxref("UserProximityEvent")}}
+- {{domxref("WebGLContextEvent")}}
+- {{domxref("WheelEvent")}}
+
+## 생성자
+
+- {{domxref("Event.Event", "Event()")}}
+  - : `Event` 객체를 생성하고 반환합니다.
+
+## 속성
+
+- {{domxref("Event.bubbles")}} {{readonlyinline}}
+  - : 이벤트가 DOM을 타고 버블링되는지 나타냅니다.
+- {{domxref("Event.cancelable")}} {{readonlyinline}}
+  - : 이벤트를 취소할 수 있는지 나타냅니다.
+- {{domxref("Event.composed")}} {{ReadOnlyInline}}
+  - : 이벤트가 섀도 DOM과 일반 DOM의 경계를 넘어 버블링할 수 있는지 나타내는 불리언입니다.
+- {{domxref("Event.currentTarget")}} {{readonlyinline}}
+  - : 이벤트의 현재 대상, 즉 이벤트의 전파 과정 중 이벤트가 현재 위치한 객체를 가리킵니다. '리타겟팅'(retargeting)으로 인해 중간에 값이 바뀌었을 수 있습니다.
+- {{domxref("Event.defaultPrevented")}} {{readonlyinline}}
+  - : 이벤트의 {{domxref("event.preventDefault()")}} 호출이 이벤트를 취소했는지 나타냅니다.
+- {{domxref("Event.eventPhase")}} {{readonlyinline}}
+  - : 이벤트 흐름에서 현재 처리 중인 단계를 나타냅니다. `NONE`, `CAPTURIING_PHASE`, `AT_TARGET`, `BUBBLING_PHASE` 중 하나입니다.
+- {{domxref("Event.isTrusted")}} {{readonlyinline}}
+  - : 이벤트가 (사용자 클릭 등으로 인해) 브라우저에 의해 초기화됐는지, (생성자 등) 스크립트에 의해 초기화됐는지 나타냅니다.
+- {{domxref("Event.target")}} {{readonlyinline}}
+  - : 이벤트가 처음에 발생한 대상을 가리킵니다.
+- {{domxref("Event.timeStamp")}} {{readonlyinline}}
+  - : 이벤트가 생성된 시간(밀리초)입니다. 과거에는 명세 상 UNIX 시간과 이벤트 생성 시점까지의 차이였지만 실제 구현은 브라우저마다 달랐습니다. 지금은 {{domxref("DOMHighResTimeStamp")}}를 반환합니다.
+- {{domxref("Event.type")}} {{readonlyinline}}
+  - : 이벤트의 이름입니다. 대소문자를 구분하지 않습니다.
+
+## 메서드
+
+- {{domxref("Event.composedPath()")}}
+  - : 이벤트의 경로, 즉 수신기가 발동했거나 발동할 모든 객체의 배열을 반환합니다. 섀도 루트의 {{domxref("ShadowRoot.mode")}}가 `closed`인 경우 섀도 트리의 노드는 포함하지 않습니다.
+- {{domxref("Event.preventDefault()")}}
+  - : 취소 가능한 경우 이벤트를 취소합니다.
+- {{domxref("Event.stopImmediatePropagation()")}}
+  - : 이 특정 이벤트에 대해서 다른 모든 수신기의 호출을 방지합니다. 같은 요소에 부착된 수신기는 물론 캡처링과 버블링 단계에서 후속으로 호출할 수신기의 발동도 막습니다.
+- {{domxref("Event.stopPropagation()")}}
+  - : 이벤트의 DOM 내 추가 전파를 방지합니다.
+
+## 명세
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- 사용 가능한 이벤트 유형 목록: [이벤트 참고서](/ko/docs/Web/Events)
+- [이벤트 대상의 비교](/ko/docs/Web/API/Event/Comparison_of_Event_Targets) (`target` vs `currentTarget` vs `relatedTarget` vs `originalTarget`)
+- [이벤트 생성 및 발동](/ko/docs/Web/Events/Creating_and_triggering_events)
diff --git a/files/ko/web/api/event/istrusted/index.md b/files/ko/web/api/event/istrusted/index.md
index afce93c401..46afd25b2c 100644
--- a/files/ko/web/api/event/istrusted/index.md
+++ b/files/ko/web/api/event/istrusted/index.md
@@ -2,60 +2,30 @@
 title: Event.isTrusted
 slug: Web/API/Event/isTrusted
 tags:
-  - API
-  - Event
   - Property
   - Read-only
   - Reference
-  - 속성
-  - 이벤트
+browser-compat: api.Event.isTrusted
 translation_of: Web/API/Event/isTrusted
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>{{domxref("Event")}} 인터페이스의 읽기 전용 속성인 <strong><code>isTrusted</code></strong>는, 이벤트가 사용자 행위에 의하여 발생되었으면 <code>true</code>이고 이벤트가 스크립트로 인해 생성 또는 수정되었거나 <code>dispatchEvent</code>를 통해 보내졌으면 <code>false</code>인 논리 값입니다. 이것이 <code>true</code>인 이벤트는 <strong>신뢰된다</strong>고 표현합니다.</p>
+{{domxref("Event")}} 인터페이스의 **`isTrusted`** 읽기 전용 속성은 사용자 액션에 의해 생성된 이벤트에서는 `ture`, 스크립트에서 생성 또는 수정했거나 {{domxref("EventTarget.dispatchEvent()")}}로 발송한 이벤트의 경우 `false`인 불리언 값입니다.
 
-<h2 id="Syntax" name="Syntax">구문</h2>
+## 예제
 
-<pre class="syntaxbox">var bool = event.isTrusted;
-</pre>
+```js
+if (e.isTrusted) {
+  // 신뢰할 수 있는 이벤트
+} else {
+  // 신뢰 불가능한 이벤트
+}
+```
 
-<h2 id="예제">예제</h2>
+## 명세
 
-<pre> if(event.isTrusted)
- {
-    // 이 이벤트는 신뢰됩니다.
- }
- else
- {
-    // 이 이벤트는 신뢰되지 않습니다.
- }
-</pre>
+{{Specifications}}
 
-<h2 id="명세">명세</h2>
+## 브라우저 호환성
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">명세</th>
-   <th scope="col">상태</th>
-   <th scope="col">비고</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}</td>
-   <td>{{ Spec2('DOM WHATWG') }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-   <td>이벤트가 신뢰되기 위한 요건을 추가하였으나 <code>isTrusted</code> 속성을 정의하지는 않았습니다.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
-
-
-
-<p>{{Compat("api.Event.isTrusted")}}</p>
+{{Compat}}
diff --git a/files/ko/web/api/event/preventdefault/index.md b/files/ko/web/api/event/preventdefault/index.md
index 71f4fdb229..56f1a309ba 100644
--- a/files/ko/web/api/event/preventdefault/index.md
+++ b/files/ko/web/api/event/preventdefault/index.md
@@ -1,93 +1,151 @@
 ---
-title: event.preventDefault
+title: Event.preventDefault()
 slug: Web/API/Event/preventDefault
+tags:
+  - Method
+  - Reference
+browser-compat: api.Event.preventDefault
 translation_of: Web/API/Event/preventDefault
 ---
-<p>{{ ApiRef() }}</p>
+{{apiref("DOM")}}
 
-<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">개요</h3>
+{{domxref("Event")}} 인터페이스의 **`preventDefault()`** 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 {{Glossary("user agent", "사용자 에이전트")}}의 기본 동작을 실행하지 않도록 지정합니다.
 
-<p>이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소합니다.</p>
+`preventDefault()`를 호출한 이벤트도 수신기 중 하나에서 {{domxref("Event.stopPropagation", "stopPropagation()")}} 또는 {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}을 호출하기 전까지는 다른 이벤트와 마찬가지로 전파됩니다.
 
-<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">구문</h3>
+아래에도 적혀있지만, `cancelable: true` 없이 {{domxref("EventTarget.dispatchEvent()")}}로 발송한 이벤트처럼 취소 불가능한 이벤트의 경우, `preventDefault()`를 호출해도 아무 효과도 나타나지 않습니다.
 
-<pre class="eval"><em>event</em>.preventDefault()
-</pre>
+## 구문
 
-<h3 id=".E4.BE.8B" name=".E4.BE.8B">예제</h3>
+```
+event.preventDefault();
+```
 
-<p>다음의 예제에서는 체크박스를 클릭했을 때 발생하는 동작을 멈추는 방법을 살펴보겠습니다. </p>
+### 기본 클릭 동작 방지하기
 
-<pre>&lt;html&gt;
-&lt;head&gt;
-&lt;title&gt;preventDefault 예제&lt;/title&gt;
+체크박스의 클릭 기본 동작은 체크박스를 체크하거나 체크 해제하는 것입니다. 이 예제는 체크박스의 클릭 기본 동작을 방지하는 모습을 보입니다.
 
-&lt;script type="text/javascript"&gt;
+#### JavaScript
 
-function stopDefAction(evt) {
-  evt.preventDefault();
-}
-&lt;/script&gt;
-&lt;/head&gt;
+```js
+document.querySelector("#id-checkbox").addEventListener("click", function(event) {
+         document.getElementById("output-box").innerHTML += "죄송합니다! <code>preventDefault()</code> 때문에 체크할 수 없어요!<br>";
+         event.preventDefault();
+}, false);
+```
 
-&lt;body&gt;
+#### HTML
 
-&lt;p&gt;체크박스 컨트롤을 클릭해 주세요&lt;/p&gt;
+```html
+<p>체크박스를 클릭해주세요.</p>
 
-&lt;form&gt;
-&lt;input type="checkbox" onclick="stopDefAction(event);"/&gt;
-&lt;label for="checkbox"&gt;체크박스&lt;/label&gt;
-&lt;/form&gt;
+<form>
+  <label for="id-checkbox">체크박스:</label>
+  <input type="checkbox" id="id-checkbox"/>
+</form>
 
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+<div id="output-box"></div>
+```
 
-<p><code>preventDefault의 예제를 </code><a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;">여기</a><code>에서 확인할 수 있습니다.</code></p>
+#### 결과
 
-<p>아래의 예제에서는, preventDefault() 를 사용해서 올바르지 않은 텍스트가 입력란에 입력되는것을 막는 방법을 설명하고 있습니다.</p>
+{{EmbedLiveSample("기본_클릭_동작_방지하기")}}
 
-<pre>&lt;html&gt;
-&lt;head&gt;
-&lt;title&gt;preventDefault 예제&lt;/title&gt;
+### 키 입력이 입력 칸을 채우는 것을 방지하기
 
-&lt;script type="text/javascript"&gt;
+이 예제에서는 `preventDefault()`를 사용해서 사용자가 입력 칸에 원하지 않는 문자를 입력하지 못하도록 합니다. 실제로 이런 기능이 필요할 땐 [내장 HTML 양식 검증](/ko/docs/Learn/Forms/Form_validation)을 사용하세요.
 
-function checkName(evt) {
-var charCode = evt.charCode;
+#### HTML
+
+```html
+<div class="container">
+  <p>이름을 입력하세요. 영문 소문자만 사용할 수 있습니다.</p>
+
+  <form>
+    <input type="text" id="my-textbox">
+  </form>
+</div>
+```
+
+#### CSS
+
+사용자가 잘못된 키를 누를 때 보여줄 경고창을 그리기 위한 CSS입니다.
+
+```css
+.warning {
+  border: 2px solid #f39389;
+  border-radius: 2px;
+  padding: 10px;
+  position: absolute;
+  background-color: #fbd8d4;
+  color: #3b3c40;
+}
+```
+
+#### JavaScript
+
+이제 실제 작업을 수행할 JavaScript 코드입니다. 우선 {{event("keypress")}} 이벤트를 수신합니다.
 
-  if (charCode != 0) {
-    if (charCode &lt; 97 || charCode &gt; 122) {
+```js
+var myTextbox = document.getElementById('my-textbox');
+myTextbox.addEventListener('keypress', checkName, false);
+```
+
+`checkName()` 함수는 사용자가 누른 키를 관찰해서 허용할지, 허용하지 않을지 결정합니다.
+
+```js
+function checkName(evt) {
+  var charCode = evt.charCode;
+  if (charCode != 0) {
+    if (charCode < 97 || charCode > 122) {
       evt.preventDefault();
-      alert("소문자만 입력할 수 있습니다." + "\n"
-            + "charCode: " + charCode + "\n"
+      displayWarning(
+        "영문 소문자만 입력하세요."
+        + "\n" + "charCode: " + charCode + "\n"
       );
     }
   }
 }
+```
+
+`displayWarning()` 함수는 경고창을 띄웁니다. 완벽한 모습은 아니지만 예제로는 충분합니다.
+
+```js
+var warningTimeout;
+var warningBox = document.createElement("div");
+warningBox.className = "warning";
 
-&lt;/script&gt;
-&lt;/head&gt;
+function displayWarning(msg) {
+  warningBox.innerHTML = msg;
+
+  if (document.body.contains(warningBox)) {
+    window.clearTimeout(warningTimeout);
+  } else {
+    // insert warningBox after myTextbox
+    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
+  }
+
+  warningTimeout = window.setTimeout(function() {
+      warningBox.parentNode.removeChild(warningBox);
+      warningTimeout = -1;
+    }, 2000);
+}
+```
 
-&lt;body&gt;
+#### 결과
 
-&lt;p&gt;당신의 이름을 소문자만으로 입력해주세요.&lt;/p&gt;
-&lt;form&gt;
-&lt;input type="text" onkeypress="checkName(event);"/&gt;
-&lt;/form&gt;
+{{ EmbedLiveSample('키_입력이_입력_칸을_채우는_것을_방지하기', 600, 200) }}
 
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+## 참고
 
-<h3 id=".E6.B3.A8.E6.84.8F.E7.82.B9" name=".E6.B3.A8.E6.84.8F.E7.82.B9">주의</h3>
+이벤트 흐름의 어떤 단계에서라도 `preventDefault()`를 호출하면 이벤트를 취소합니다. 즉, 이벤트에 대한 구현체의 기본 동작을 실행하지 않습니다.
 
-<p>이벤트를 취소하는 도중에 preventDefault를 호출하게되면, 일반적으로는 브라우저의 구현에 의해 처리되는 기존의 액션이 동작하지 않게되고, 그 결과 이벤트가 발생하지 않게됩니다.</p>
+{{domxref("Event.cancelable")}}을 사용해서 이벤트의 취소 가능 여부를 알아낼 수 있습니다. 취소 불가능한 이벤트에 대해 `preventDefault()`를 호출해도 아무 효과가 없습니다.
 
-<p>이벤트의 취소가능 여부는 <a href="/ko/DOM/event.cancelable" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="ko/DOM/event.cancelable">event.cancelable</a>를 사용해서 확인할 수 있습니다. 취소불가능한 이벤트에 대해서 preventDefault를 호출해도 결과는 없습니다.</p>
+## 명세
 
-<p>preventDefault는 DOM을 통한 이벤트의 전파를 막지않습니다. 전파를 막을때는 <a href="/ko/docs/Web/API/Event/stopPropagation" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="ko/DOM/event.stopPropagation">event.stopPropagation</a>를 사용해주세요.</p>
+{{Specifications}}
 
-<h3 id=".E4.BB.95.E6.A7.98.E6.9B.B8" name=".E4.BB.95.E6.A7.98.E6.9B.B8">사양</h3>
+## 브라우저 호환성
 
-<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-preventDefault">DOM Level 2 Events: preventDefault</a></p>
+{{Compat}}
diff --git a/files/ko/web/api/event/stopimmediatepropagation/index.md b/files/ko/web/api/event/stopimmediatepropagation/index.md
index 56b27d7f18..ef7c77e637 100644
--- a/files/ko/web/api/event/stopimmediatepropagation/index.md
+++ b/files/ko/web/api/event/stopimmediatepropagation/index.md
@@ -1,45 +1,28 @@
 ---
 title: Event.stopImmediatePropagation()
 slug: Web/API/Event/stopImmediatePropagation
+tags:
+  - Method
+  - Reference
+browser-compat: api.Event.stopImmediatePropagation
 translation_of: Web/API/Event/stopImmediatePropagation
 ---
-<div>{{APIRef("DOM")}}</div>
-
-<p><code>event.stopImmediatePropagation()</code> 는 같은 이벤트에서 다른 리스너들이 불려지는 것을 막습니다. </p>
-
-<h2 id="문법">문법</h2>
-
-<pre class="eval"><em>event</em>.stopImmediatePropagation();
-</pre>
-
-<h2 id="주석">주석</h2>
-
-<p>만약  다양한 리스너들이 같은 이벤트타입을 위한 같은 요소에 소속되어 있다면 그들은 추가 된 순서대로 불리게 될 것입니다. 만약 <code>event.stopImmediatePropagation()을 호출하면, 남아있는 리스너들이 불리는 일이 없을 것입니다.</code></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', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM4', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}</td>
-   <td>{{Spec2('DOM4')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
-
-<p>{{Compat("api.Event.stopImmediatePropagation")}}</p>
+{{APIRef("DOM")}}
+
+{{domxref("Event")}} 인터페이스의 **`stopImmediatePropagation()`** 메서드는 같은 이벤트에 대해 나머지 수신기가 발동하지 못하도록 방지합니다.
+
+같은 이벤트 유형에 대한 다수의 수신기를 하나의 요소에 부착한 경우, 각각의 수신기 호출 순서는 부착 순서와 동일합니다. 그 수신기들 중 하나에서 `stopImmediatePropagation()` 메서드를 호출하면 그 이후의 나머지 수신기들은 호출되지 않습니다.
+
+## 구문
+
+```js
+event.stopImmediatePropagation();
+```
+
+## 명세
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
diff --git a/files/ko/web/api/event/stoppropagation/index.md b/files/ko/web/api/event/stoppropagation/index.md
index 6830d39e41..f20ecdab06 100644
--- a/files/ko/web/api/event/stoppropagation/index.md
+++ b/files/ko/web/api/event/stoppropagation/index.md
@@ -1,53 +1,30 @@
 ---
 title: Event.stopPropagation()
 slug: Web/API/Event/stopPropagation
+tags:
+  - Method
+  - Reference
+browser-compat: api.Event.stopPropagation
 translation_of: Web/API/Event/stopPropagation
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다.</p>
+{{domxref("Event")}} 인터페이스의 **`stopPropagation()`** 메서드는 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지합니다. 전파를 방지해도 이벤트의 기본 동작은 실행되므로, `stopPropagation()`이 링크나 버튼의 클릭을 막는 것은 아닙니다. 이런 기본 동작을 방지하려면 {{domxref("Event.preventDefault()", "preventDefault()")}} 메서드를 사용하세요. 또한, `stopPropagation()`은 같은 이벤트 대상에 부착한 다른 수신기까지 막지는 않습니다. 이것까지 막으려면 {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}를 사용하세요.
 
-<h2 id="문법">문법</h2>
+## 구문
 
-<pre class="syntaxbox"><em>event</em>.stopPropagation();</pre>
+```js
+event.stopPropagation();
+```
 
-<h2 id="예시">예시</h2>
+## 예제
 
-<p>DOM에서 이 방법과 이벤트 전파의 더욱 상세한 예시를 위한 예제 5:  <a href="https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Event Propagation</a> 를 보세요.</p>
+[이벤트 전파](/ko/docs/Web/API/Document_Object_Model/Examples#example_5_event_propagation)를 확인하세요.
 
-<h2 id="주석">주석</h2>
+## 명세
 
-<p>이벤트 흐름의 설명을 위한 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">DOM 명세</a> 를 보세요. ( <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM 레벨 3 이벤트 초안</a>에는 삽화가 들어가 있습니다.)</p>
+{{Specifications}}
 
-<p><a href="/en-US/docs/Web/API/event.preventDefault">preventDefault</a>는 이벤트의 기본적인 동작(캡쳐링과 버블링)이 일어나는 것을 막기위해 보완적으로 사용되는 방법입니다.</p>
+## 브라우저 호환성
 
-<h2 id="명세">명세</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Specification</th>
-   <th>Status</th>
-   <th>Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}</td>
-   <td>{{Spec2("DOM2 Events")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
-
-<p>{{Compat("api.Event.stopPropagation")}}</p>
+{{Compat}}
diff --git a/files/ko/web/api/event/target/index.md b/files/ko/web/api/event/target/index.md
index 1fa5ad467e..fffc1d6d1a 100644
--- a/files/ko/web/api/event/target/index.md
+++ b/files/ko/web/api/event/target/index.md
@@ -2,100 +2,53 @@
 title: Event.target
 slug: Web/API/Event/target
 tags:
-  - 돔
-  - 레퍼런스
-  - 속성
-  - 이벤트
-  - 타겟
+  - Property
+  - Reference
+  - Read-only
+browser-compat: api.Event.target
 translation_of: Web/API/Event/target
 ---
-<p>{{ApiRef("DOM")}}</p>
+{{ApiRef("DOM")}}
 
-<p>{{domxref("Event")}} interface의 <code><strong>target</strong></code> 속성은 event가 전달한 객체에 대한 참조입니다. 이는 이벤트의 버블링 또는 캡처 단계에서 이벤트 핸들러를 호출하는 {{domxref("Event.currentTarget")}}와 다릅니다.</p>
+{{domxref("Event")}} 인터페이스의 **`target`** 속성은 이벤트가 발생한 대상 객체를 가리킵니다. 버블링과 캡처링 단계에서는 {{domxref("Event.currentTarget")}}과 다를 수 있습니다.
 
-<h2 id="Syntax">구문</h2>
+### 값
 
-<pre class="brush: js">const theTarget = someEvent.target</pre>
+연관된 {{domxref("EventTarget")}}.
 
-<h3 id="Value">Value</h3>
+## 예제
 
-<p>{{domxref("EventTarget")}}</p>
+`event.target` 속성을 사용하여 **이벤트 위임**을 구현할 수 있습니다.
 
-<h2 id="Example">예제</h2>
-
-<p><code>event.target</code> 속성을 사용하여 <strong>event delegation</strong>을 구현할 수 있습니다.</p>
-
-<pre class="brush: js notranslate">// Make a list
-var ul = document.createElement('ul');
+```js
+// 목록 생성
+const ul = document.createElement('ul');
 document.body.appendChild(ul);
 
-var li1 = document.createElement('li');
-var li2 = document.createElement('li');
+const li1 = document.createElement('li');
+const li2 = document.createElement('li');
 ul.appendChild(li1);
 ul.appendChild(li2);
 
-function hide(e){
-  // e.target refers to the clicked &lt;li&gt; element
-  // This is different than e.currentTarget which would refer to the parent &lt;ul&gt; in this context
-  e.target.style.visibility = 'hidden';
+function hide(evt) {
+  // e.target은 사용자가 클릭한 <li> 요소를 가리킴
+  // 여기서 e.currentTarget은 부모인 <ul>을 가리킬 것
+  evt.target.style.visibility = 'hidden';
 }
 
-// Attach the listener to the list
-// It will fire when each &lt;li&gt; is clicked
+// 목록에 수신기 부착
+// 각각의 <li>를 클릭할 때 호출됨
 ul.addEventListener('click', hide, false);
-</pre>
-
-<h2 id="Specifications">명세</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("DOM WHATWG", "#dom-event-target", "Event.target")}}</td>
-      <td>{{Spec2("DOM WHATWG")}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td>
-      <td>{{Spec2("DOM4")}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td>
-      <td>{{Spec2("DOM2 Events")}}</td>
-      <td>Initial definition</td>
-    </tr>
-  </tbody>
-</table>
+```
 
-<h2 id="Browser_compatibility">브라우저 호환성</h2>
+## 명세
 
-<p>{{Compat("api.Event.target")}}</p>
+{{Specifications}}
 
-<h3 id="Compatibility_notes">호환성 참고</h3>
+## 브라우저 호환성
 
-<p>IE 6–8에서는 이벤트 모델이 다릅니다. 이벤트 리스너는 비표준 
-  {{domxref('EventTarget.attachEvent()')}} 메서드로 연결됩니다.</p>
-
-<p>이 모델에서 이벤트 객체는 {{domxref('Event.srcElement')}} 속성 
-  (<code>target</code> 속성 대신)을 가지며 <code>Event.target</code>과 
-  동일한 의미를 갖습니다.</p>
-
-<pre class="brush: js">function hide(evt) {
-  // Support IE6-8
-  var target = evt.target || evt.srcElement;
-  target.style.visibility = 'hidden';
-}
-</pre>
+{{Compat}}
 
-<h2 id="See_also">같이 보기</h2>
+## 같이 보기
 
-<ul>
- <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a></li>
-</ul>
+- [이벤트 대상의 비교](/ko/docs/Web/API/Event/Comparison_of_Event_Targets)