From 5b75c39cc1547ebfcb87691183b3aa859c3306b7 Mon Sep 17 00:00:00 2001 From: alattalatta Date: Thu, 9 Dec 2021 20:29:30 +0900 Subject: Rewrite/Update Event docs --- files/ko/web/api/event/cancelable/index.md | 68 +++-- files/ko/web/api/event/cancelbubble/index.md | 48 ++- files/ko/web/api/event/event/index.md | 85 +++--- files/ko/web/api/event/eventphase/index.md | 246 +++++++--------- files/ko/web/api/event/index.md | 323 ++++++++------------- files/ko/web/api/event/istrusted/index.md | 60 +--- files/ko/web/api/event/preventdefault/index.md | 168 +++++++---- .../api/event/stopimmediatepropagation/index.md | 63 ++-- files/ko/web/api/event/stoppropagation/index.md | 55 +--- files/ko/web/api/event/target/index.md | 103 ++----- 10 files changed, 525 insertions(+), 694 deletions(-) (limited to 'files/ko') 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 --- -

{{ ApiRef() }}

-

개요

-

이벤트의 취소가 가능한지를 나타냅니다.

-

구문

-
bool = event.cancelable;
-
-

이벤트에 규정한 액션을 취소할 수 있는가의 가능여부에 따라서 bool은 true 또는 false가 됩니다.

-

주의

-

이벤트취소의 가능여부는 이벤트의 초기화 시에 판별됩니다.

-

이벤트를 취소하기 위해 preventDefault 메소드를 호출하게 되며, 관련 이벤트에 규정된 액션을 실행하지 않도록 합니다.

-

사양

-

DOM Level 2 Events: cancelable

-

 

-

{{ languages( { "en": "en/DOM/event.cancelable", "es": "es/DOM/event.cancelable", "pl": "pl/DOM/event.cancelable", "ja": "ja/DOM/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}} 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 --- -

{{APIRef("DOM Events")}}

+{{APIRef("DOM Events")}} {{Deprecated_Header}} -

Event.cancelBubble 속성은 {{domxref("Event.stopPropagation()")}}의 별칭입니다. 이벤트 핸들러에서 반환되기 전에 값을 true로 설정하면 이벤트가 전파되지 않습니다.

+**Event.cancelBubble** 속성은 {{domxref("Event.stopPropagation()")}}의 별칭입니다. 이벤트 핸들러에서 반환되기 전에 값을 true로 설정하면 이벤트가 전파되지 않습니다. -

Syntax

+## 예제 -
event.cancelBubble = bool;
-var bool = event.cancelBubble;
-
+```js +elem.onclick = function(event) { + // Do cool things here + event.cancelBubble = true; +} +``` -

Example

+## 명세 -
elem.onclick = function(e) {
- // do cool things here
-  e.cancelBubble = true;
-}
+{{Specifications}} -

Specifications

+## 브라우저 호환성 - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancellBubble')}}{{Spec2('DOM WHATWG')}} 
- -

Browser compatibility

- -

{{Compat("api.Event.cancelBubble")}}

+{{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 --- -

{{APIRef("DOM")}}

+{{APIRef("DOM")}} -

Event() constructor는 새로운 {{domxref("Event")}} 객체를 생성합니다.

+**`Event()`** 생성자는 새로운 {{domxref("Event")}} 객체를 생성합니다. 생성자로 생성한 이벤트는 브라우저가 생성하는 이벤트와 구분해서 합성 이벤트(synthetic event)라고 부르며, [스크립트에서 발송할 수 있습니다](/ko/docs/Web/Events/Creating_and_triggering_events). -

Syntax

+## 구문 -
new Event(typeArg[, eventInit]);
+```js +new Event(typeArg) +new Event(typeArg, eventInit); +``` -

Values

+### 매개변수 -
-
typeArg
-
이 인자는 {{domxref("DOMString")}} 입니다. event의 이름을 나타냅니다.
-
eventInit {{optional_inline}}
-
이 인자는 EventInit dictionary, 입니다. 아래의 추가 옵션 필드가 있습니다. -
    -
  • bubbles:  {{jsxref("Boolean")}} 값을 받습니다. 해당 event가 bubble인지 아닌지 결정합니다. 기본값은 false 입니다.
    • -
  • cancelable: {{jsxref("Boolean")}} 값을 받습니다.event가 캔슬 될 수 있는지 없는지 결정합니다. 기본값은false 입니다.
    • -
  • composed: {{jsxref("Boolean")}} 값을 받습니다. event가 shadow root 바깥의 eventListener 들도 trigger 할 것인지 결정합니다. (더 자세한 내용은 이곳에서 {{domxref("Event.composed")}} ). 기본값은 false 입니다.
    • -
-
-
+- `typeArg` + - : 이벤트의 이름을 나타내는 문자열입니다. +- `eventInit` {{optional_inline}} + - : 다음 속성을 포함하는 객체입니다. + - `bubbles` {{optional_inline}} + - : 이벤트의 버블링 여부를 나타내는 불리언 값입니다. 기본 값은 `false`입니다. + - `cancelable` {{optional_inline}} + - : 이벤트를 취소할 수 있는지 나타내는 불리언 값입니다. 기본 값은 `false`입니다. + - `composed` {{optional_inline}} + - : 이벤트가 섀도 루트(shadow root) 바깥의 이벤트 수신기로도 전달될지 나타내는 불리언 값입니다. {{domxref("Event.composed")}}에서 자세한 정보를 확인하세요. 기본 값은 `false`입니다. -

Example

+## 예제 -
// 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);
-
+``` -

Specifications

+## 명세 - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG','#dom-event-event','Event()')}}{{Spec2('DOM WHATWG')}}Initial definition
+{{Specifications}} -

Browser compatibility

+## 브라우저 호환성 +{{Compat}} +## 같이 보기 -

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

- -

See also

- - +- {{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 --- -

{{ApiRef("DOM")}}

- -

현재 발생중인 이벤트 흐름의 단계를 나타냅니다.

- -

Syntax

- -
var phase = event.eventPhase;
-
- -

이벤트 흐름의 최근 실행 단계에 대한 지정된 정수값을 반환합니다. 가능한 값은 {{anch("이벤트 단계 상수")}} 목록을 참조.

- -

Constants

- -

Event phase constants

- -

이 값들은 이벤트 흐름의 현재 실행 단계를 나타냅니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstantValueDescription
Event.NONE0아무런 이벤트도 발생하지 않았습니다.
Event.CAPTURING_PHASE1이벤트가 상위 개체를 통해 전파됩니다. 이 프로세스는 {{domxref("Window")}},  {{domxref("Document")}}에서 시작하여,  {{domxref("HTMLHtmlElement")}} 등 대상의 부모에 도달할 때까지 요소들을 통과합니다. 이 단계에서 {{domxref("EventTarget.addEventListener()")}} 가 호출될 때 캡처 모드에 있는 {{domxref("EventListener", "Event listeners", "", 1)}} 가 트리거됩니다.
Event.AT_TARGET2이벤트가 {{domxref("EventTarget", "the event's target", "", 1)}}에 도착했습니다. 이 단계에서 등록된 이벤트 리스너가 이 때 호출됩니다. 만약  {{domxref("Event.bubbles")}} 이 false 라면, 이 단계가 완료된 다음 이벤트 진행은 종료됩니다.
Event.BUBBLING_PHASE3이벤트가 역순으로 대상의 조상을 통해 전파됩니다. 대상의 부모부터 시작해서, {{domxref("Window")}}를 포함하는 단계까지 도달합니다. 이는 버블링으로 알려져 있으며, {{domxref("Event.bubbles")}}가 true 일 때만 발생합니다. 이 프로세스 중에 이 단계에 등록된 {{domxref("EventListener", "Event listeners", "", 1)}} 가 트리거됩니다.
- -

더 상세한 내용은 DOM Level 3 Events 명세인 section 3.1, Event dispatch and DOM event flow 를 참고하세요.

- -

Example

- -

HTML Content

- -
<h4>Event Propagation Chain</h4>
-<ul>
-  <li>Click 'd1'</li>
-  <li>Analyse event propagation chain</li>
-  <li>Click next div and repeat the experience</li>
-  <li>Change Capturing mode</li>
-  <li>Repeat the experience</li>
-</ul>
-<input type="checkbox" id="chCapture" />
-<label for="chCapture">Use Capturing</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 Content

- -
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
+
이벤트 전파 체인

+
+
+
+  
d1
+    
d2
+      
d3
+        
d4

+      

+    

+  

+

+```
+
+### 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%;
-}
+} +``` + +### JavaScript -

JavaScript Content

+```js +let clear = false, + divInfo = null, + divs = null, + useCapture = false; -
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 < 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 < 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 + "<br/>";
+    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 < divs.length; i++) {
-    if (divs[i].id != "divInfo")
-      divs[i].style.backgroundColor = (i & 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 = '';
-}
- -

{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}}{{Spec2("DOM2 Events")}}Initial definition
+ 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 --- -

{{ APIRef("DOM") }}

- -

Event 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다.

- -

이벤트는 마우스를 클릭하거나 키보드를 누르는 등 사용자 액션에 의해 발생할 수도 있고, 혹은 비동기적 작업의 진행을 나타내기 위해 API가 생성할 수도 있습니다. 요소의 {{domxref("HTMLElement.click()")}} 메서드를 호출하거나, 이벤트를 정의한 후 특정 대상에 대해서 {{domxref("EventTarget.dispatchEvent()")}}를 사용하는 등 프로그래밍적으로도 만들어낼 수 있습니다.

- -

이벤트의 종류는 다양하며 일부는 Event 인터페이스의 파생 인터페이스를 사용합니다. Event 자체는 모든 이벤트에 공통된 속성과 메서드를 가집니다.

- -

많은 DOM 요소는 이벤트를 받고("수신"), 받은 이벤트를 "처리"하는 코드를 실행할 수 있습니다. 이벤트 처리기는 대개 {{domxref("EventTarget.addEventListener()")}}를 사용해 다양한 요소(<button>, <div>, <span>, 등등)에 "부착"합니다. 그리고 제대로 추가한 경우, 반대로 {{domxref("EventTarget.removeEventListener", "removeEventListener()")}}로 제거할 수도 있습니다.

- -
-

참고: 하나의 요소는 다수의 처리기를 가질 수 있습니다. 완전히 동일한 이벤트에 대해서도, 예컨대 광고 모듈과 통계 모듈이 각각 비디오 시청을 추적하는 등 여러 처리기를 따로 등록할 수 있습니다.

-
- -

중첩된 많은 요소가 서로 자신만의 처리기를 가지고 있는 경우 이벤트 처리가 매우 복잡해질 수 있습니다. 특히 부모 요소와 자식 요소의 "공간 상 위치"가 겹쳐서 이벤트가 양쪽 모두에서 발생하는 경우, 이벤트 처리 순서는 각 처리기의 이벤트 확산과 캡처 설정에 따라 달라집니다.

- -

Event 기반 인터페이스

- -

다음은 Event 인터페이스에서 파생된 인터페이스의 목록입니다.

- -

모든 이벤트 인터페이스 이름은 "Event"로 끝납니다.

- -
- -
- -

생성자

- -
-
{{domxref("Event.Event", "Event()")}}
-
Event 객체를 생성하고 반환합니다.
-
- -

속성

- -
-
{{domxref("Event.bubbles")}} {{readonlyinline}}
-
이벤트가 DOM을 타고 위로 확산되는지 나타냅니다.
-
{{domxref("Event.cancelBubble")}}
-
{{domxref("Event.stopPropagation()")}}의 이명으로, 과거에 사용하던 명칭입니다. 이벤트 처리기가 종료되기 전에 값을 true로 설정하면 더 이상의 확산을 막습니다.
-
{{domxref("Event.cancelable")}} {{readonlyinline}}
-
이벤트를 취소할 수 있는지 나타냅니다.
-
{{domxref("Event.composed")}} {{ReadOnlyInline}}
-
이벤트가 섀도 DOM과 일반 DOM의 경계를 넘어 확산할 수 있는지 나타내는 불리언입니다.
-
{{domxref("Event.currentTarget")}} {{readonlyinline}}
-
이벤트를 위해 현재 등록된 대상의 참조. 이벤트가 현재 전달되기로한 객체입니다. 재 타게팅을 통해 변경될수도 있습니다.
-
{{domxref("Event.deepPath")}} {{non-standard_inline}}
-
이벤트가 확산하며 거쳐간 DOM {{domxref("Node")}}의 {{jsxref("Array")}}입니다.
-
{{domxref("Event.defaultPrevented")}} {{readonlyinline}}
-
이벤트의 {{domxref("event.preventDefault()")}}가 호출됐는지를 나타냅니다.
-
{{domxref("Event.eventPhase")}} {{readonlyinline}}
-
처리 중인 이벤트 흐름의 단계를 나타냅니다.
-
{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}
-
이벤트의 명시적인 원래 대상입니다. (Mozilla 전용)
-
{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}
-
이벤트 대상 재설정 이전의 원래 대상입니다. (Mozilla 전용)
-
{{domxref("Event.returnValue")}}
-
Internet Explorer가 도입했으며 구형 사이트의 동작을 보장하기 위해 DOM 명세에 포함된 호환용 속성입니다. 이상적으로는 {{domxref("Event.preventDefault()")}}와 {{domxref("Event.defaultPrevented")}}를 사용해야 하지만, 원하면 returnValue를 사용할 수 있습니다.
-
{{domxref("Event.srcElement")}} {{non-standard_inline}}
-
구버전 Internet Explorer에서 사용한 {{domxref("Event.target")}}의 다른 이름입니다. 비표준이지만 일부 다른 브라우저에서도 호환성을 위해 지원하고 있습니다.
-
{{domxref("Event.target")}} {{readonlyinline}}
-
이벤트가 처음에 발생했던 대상의 참조입니다.
-
{{domxref("Event.timeStamp")}} {{readonlyinline}}
-
이벤트가 생성된 시간(밀리초)입니다. 명세에 따르면 문서 로딩 후 이벤트 생성 시점까지의 시간으로 나타나 있지만 실제 구현은 브라우저마다 다릅니다. 또한 이 속성의 값을 {{domxref("DOMHighResTimeStamp")}}로 바꾸는 작업이 진행 중입니다.
-
{{domxref("Event.type")}} {{readonlyinline}}
-
이벤트의 이름입니다. 대소문자를 구분하지 않습니다.
-
{{domxref("Event.isTrusted")}} {{readonlyinline}}
-
이벤트가 브라우저에 의해 생성, 예컨대 사용자 클릭으로 인해 발생한 것인지, 아니면 {{domxref("Event.initEvent()")}} 등을 사용한 스크립트에서 발생한 것인지 나타냅니다.
-
- - - -

메서드

- -
-
{{domxref("Event.composedPath()")}}
-
이벤트의 경로, 즉 수신기를 발동할 모든 객체를 반환합니다. 섀도우 루트의 {{domxref("ShadowRoot.mode")}}가 closed인 경우 섀도우 트리의 노드는 포함하지 않습니다.
-
{{domxref("Event.preventDefault()")}}
-
취소 가능한 경우 이벤트를 취소합니다.
-
{{domxref("Event.stopImmediatePropagation()")}}
-
이 특정 이벤트에 대해서 다른 모든 수신기의 호출을 방지합니다. 같은 요소에 부착된 수신기는 물론 캡처 단계 등 이후에 순회활 요소에 부착된 수신기도 이 이벤트를 받지 않습니다.
-
{{domxref("Event.stopPropagation()")}}
-
이벤트의 DOM 내 추가 확산을 방지합니다.
-
- - - -

명세

- - - - - - - - - - - - - - -
명세상태코멘트
{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}{{Spec2('DOM WHATWG')}}
- -

브라우저 호환성

- - - -

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

- -

같이 보기

- - +{{APIRef("DOM")}} + +**`Event`** 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다. + +이벤트는 마우스를 클릭하거나 키보드를 누르는 등 사용자의 액션에 의해 발생할 수도 있고, 비동기적 작업의 진행을 나타내기 위해서 API가 생성할 수도 있습니다. 요소의 {{domxref("HTMLElement.click()")}} 메서드를 호출하거나, 이벤트를 정의한 후 특정 대상에 대해서 {{domxref("EventTarget.dispatchEvent()")}}로 발송하는 등 프로그래밍적으로도 만들어낼 수 있습니다. + +이벤트에는 다양한 종류가 있으며 일부는 `Event` 인터페이스의 파생 인터페이스를 사용합니다. `Event` 자체는 모든 이벤트에 공통된 속성과 메서드를 가집니다. + +많은 DOM 요소는 이벤트를 받고("수신"), 받은 이벤트를 "처리"할 수 있습니다. 이벤트 처리기는 주로 {{domxref("EventTarget.addEventListener()")}}를 사용해서 다양한 요소(`