Rewrite/Update Event docs

mdn · Dec 9, 2021 · 6afd8b5 · 6afd8b5
1 parent 320aacc
commit 6afd8b5
Show file tree

Hide file tree

Showing 10 changed files with 525 additions and 694 deletions.
diff --git 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
@@ -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
@@ -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)