Rewrite/Update Event docs

files/ko/web/api/event/cancelable/index.md

@@ -0,0 +1,55 @@
+---
+title: Event.cancelable
+slug: Web/API/Event/cancelable
+tags:
+  - Property
+  - Read-only
+  - Reference
+browser-compat: api.Event.cancelable
+translation_of: Web/API/Event/cancelable
+---
+{{ 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}}

files/ko/web/api/event/cancelbubble/index.md

@@ -0,0 +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
+---
+{{APIRef("DOM Events")}} {{Deprecated_Header}}
+
+**Event.cancelBubble** 속성은 {{domxref("Event.stopPropagation()")}}의 별칭입니다. 이벤트 핸들러에서 반환되기 전에 값을 true로 설정하면 이벤트가 전파되지 않습니다.
+
+## 예제
+
+```js
+elem.onclick = function(event) {
+  // Do cool things here
+  event.cancelBubble = true;
+}
+```
+
+## 명세
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}

files/ko/web/api/event/event/index.md

@@ -0,0 +1,58 @@
+---
+title: Event()
+slug: Web/API/Event/Event
+tags:
+  - Constructor
+  - Reference
+browser-compat: api.Event.Event
+translation_of: Web/API/Event/Event
+---
+{{APIRef("DOM")}}
+
+**`Event()`** 생성자는 새로운 {{domxref("Event")}} 객체를 생성합니다. 생성자로 생성한 이벤트는 브라우저가 생성하는 이벤트와 구분해서 합성 이벤트(synthetic event)라고 부르며, [스크립트에서 발송할 수 있습니다](/ko/docs/Web/Events/Creating_and_triggering_events).
+
+## 구문
+
+```js
+new Event(typeArg)
+new Event(typeArg, eventInit);
+```
+
+### 매개변수
+
+- `typeArg`
+  - : 이벤트의 이름을 나타내는 문자열입니다.
+- `eventInit` {{optional_inline}}
+  - : 다음 속성을 포함하는 객체입니다.
+    - `bubbles` {{optional_inline}}
+      - : 이벤트의 버블링 여부를 나타내는 불리언 값입니다. 기본 값은 `false`입니다.
+    - `cancelable` {{optional_inline}}
+      - : 이벤트를 취소할 수 있는지 나타내는 불리언 값입니다. 기본 값은 `false`입니다.
+    - `composed` {{optional_inline}}
+      - : 이벤트가 섀도 루트(shadow root) 바깥의 이벤트 수신기로도 전달될지 나타내는 불리언 값입니다. {{domxref("Event.composed")}}에서 자세한 정보를 확인하세요. 기본 값은 `false`입니다.
+
+## 예제
+
+```js
+// 버블링 가능하고 취소 불가능한 look 이벤트 생성
+
+const evt = new Event("look", {"bubbles":true, "cancelable":false});
+document.dispatchEvent(evt);
+
+// document 외의 다른 요소에서도 이벤트 발송 가능
+myDiv.dispatchEvent(evt);
+```
+
+## 명세
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{domxref("Event")}}
+- {{domxref("EventTarget.dispatchEvent()")}}
+- [이벤트 생성 및 발동](/en-US/docs/Web/Events/Creating_and_triggering_events)