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/eventphase/index.md | 246 +++++++++++++---------------- 1 file changed, 110 insertions(+), 136 deletions(-) (limited to 'files/ko/web/api/event/eventphase') 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}} -- cgit v1.2.3-54-g00ecf