From 43ddfdfa09be74789468d7f2b3afdf19c079cc39 Mon Sep 17 00:00:00 2001 From: alattalatta Date: Thu, 9 Dec 2021 18:26:19 +0900 Subject: Rename html to md --- files/ko/web/api/event/cancelable/index.html | 23 --- files/ko/web/api/event/cancelable/index.md | 23 +++ files/ko/web/api/event/cancelbubble/index.html | 42 ---- files/ko/web/api/event/cancelbubble/index.md | 42 ++++ files/ko/web/api/event/event/index.html | 77 -------- files/ko/web/api/event/event/index.md | 77 ++++++++ files/ko/web/api/event/eventphase/index.html | 179 ----------------- files/ko/web/api/event/eventphase/index.md | 179 +++++++++++++++++ files/ko/web/api/event/index.html | 212 --------------------- files/ko/web/api/event/index.md | 212 +++++++++++++++++++++ files/ko/web/api/event/istrusted/index.html | 61 ------ files/ko/web/api/event/istrusted/index.md | 61 ++++++ files/ko/web/api/event/preventdefault/index.html | 93 --------- files/ko/web/api/event/preventdefault/index.md | 93 +++++++++ .../api/event/stopimmediatepropagation/index.html | 45 ----- .../api/event/stopimmediatepropagation/index.md | 45 +++++ files/ko/web/api/event/stoppropagation/index.html | 53 ------ files/ko/web/api/event/stoppropagation/index.md | 53 ++++++ files/ko/web/api/event/target/index.html | 101 ---------- files/ko/web/api/event/target/index.md | 101 ++++++++++ 20 files changed, 886 insertions(+), 886 deletions(-) delete mode 100644 files/ko/web/api/event/cancelable/index.html create mode 100644 files/ko/web/api/event/cancelable/index.md delete mode 100644 files/ko/web/api/event/cancelbubble/index.html create mode 100644 files/ko/web/api/event/cancelbubble/index.md delete mode 100644 files/ko/web/api/event/event/index.html create mode 100644 files/ko/web/api/event/event/index.md delete mode 100644 files/ko/web/api/event/eventphase/index.html create mode 100644 files/ko/web/api/event/eventphase/index.md delete mode 100644 files/ko/web/api/event/index.html create mode 100644 files/ko/web/api/event/index.md delete mode 100644 files/ko/web/api/event/istrusted/index.html create mode 100644 files/ko/web/api/event/istrusted/index.md delete mode 100644 files/ko/web/api/event/preventdefault/index.html create mode 100644 files/ko/web/api/event/preventdefault/index.md delete mode 100644 files/ko/web/api/event/stopimmediatepropagation/index.html create mode 100644 files/ko/web/api/event/stopimmediatepropagation/index.md delete mode 100644 files/ko/web/api/event/stoppropagation/index.html create mode 100644 files/ko/web/api/event/stoppropagation/index.md delete mode 100644 files/ko/web/api/event/target/index.html create mode 100644 files/ko/web/api/event/target/index.md (limited to 'files') diff --git a/files/ko/web/api/event/cancelable/index.html b/files/ko/web/api/event/cancelable/index.html deleted file mode 100644 index 4c3154cebe..0000000000 --- a/files/ko/web/api/event/cancelable/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: event.cancelable -slug: Web/API/Event/cancelable -tags: - - DOM - - Gecko - - Gecko DOM Reference -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" } ) }}

diff --git a/files/ko/web/api/event/cancelable/index.md b/files/ko/web/api/event/cancelable/index.md new file mode 100644 index 0000000000..4c3154cebe --- /dev/null +++ b/files/ko/web/api/event/cancelable/index.md @@ -0,0 +1,23 @@ +--- +title: event.cancelable +slug: Web/API/Event/cancelable +tags: + - DOM + - Gecko + - Gecko DOM Reference +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" } ) }}

diff --git a/files/ko/web/api/event/cancelbubble/index.html b/files/ko/web/api/event/cancelbubble/index.html deleted file mode 100644 index 89820f5ec3..0000000000 --- a/files/ko/web/api/event/cancelbubble/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Event.cancelBubble -slug: Web/API/Event/cancelBubble -translation_of: Web/API/Event/cancelBubble ---- -

{{APIRef("DOM Events")}}

- -

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

- -

Syntax

- -
event.cancelBubble = bool;
-var bool = event.cancelBubble;
-
- -

Example

- -
elem.onclick = function(e) {
- // do cool things here
-  e.cancelBubble = true;
-}
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancellBubble')}}{{Spec2('DOM WHATWG')}} 
- -

Browser compatibility

- -

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

diff --git a/files/ko/web/api/event/cancelbubble/index.md b/files/ko/web/api/event/cancelbubble/index.md new file mode 100644 index 0000000000..89820f5ec3 --- /dev/null +++ b/files/ko/web/api/event/cancelbubble/index.md @@ -0,0 +1,42 @@ +--- +title: Event.cancelBubble +slug: Web/API/Event/cancelBubble +translation_of: Web/API/Event/cancelBubble +--- +

{{APIRef("DOM Events")}}

+ +

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

+ +

Syntax

+ +
event.cancelBubble = bool;
+var bool = event.cancelBubble;
+
+ +

Example

+ +
elem.onclick = function(e) {
+ // do cool things here
+  e.cancelBubble = true;
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancellBubble')}}{{Spec2('DOM WHATWG')}} 
+ +

Browser compatibility

+ +

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

diff --git a/files/ko/web/api/event/event/index.html b/files/ko/web/api/event/event/index.html deleted file mode 100644 index 5ba8e6a6c4..0000000000 --- a/files/ko/web/api/event/event/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Event() -slug: Web/API/Event/Event -tags: - - API - - Constructor - - DOM - - Event - - Reference -translation_of: Web/API/Event/Event ---- -

{{APIRef("DOM")}}

- -

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

- -

Syntax

- -
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 입니다.
    • -
-
-
- -

Example

- -
// create a look event that bubbles up and cannot be canceled
-
-var evt = new Event("look", {"bubbles":true, "cancelable":false});
-document.dispatchEvent(evt);
-
-// event can be dispatched from any element, not only the document
-myDiv.dispatchEvent(evt);
-
- -

Specifications

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

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/ko/web/api/event/event/index.md b/files/ko/web/api/event/event/index.md new file mode 100644 index 0000000000..5ba8e6a6c4 --- /dev/null +++ b/files/ko/web/api/event/event/index.md @@ -0,0 +1,77 @@ +--- +title: Event() +slug: Web/API/Event/Event +tags: + - API + - Constructor + - DOM + - Event + - Reference +translation_of: Web/API/Event/Event +--- +

{{APIRef("DOM")}}

+ +

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

+ +

Syntax

+ +
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 입니다.
    • +
+
+
+ +

Example

+ +
// create a look event that bubbles up and cannot be canceled
+
+var evt = new Event("look", {"bubbles":true, "cancelable":false});
+document.dispatchEvent(evt);
+
+// event can be dispatched from any element, not only the document
+myDiv.dispatchEvent(evt);
+
+ +

Specifications

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

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/ko/web/api/event/eventphase/index.html b/files/ko/web/api/event/eventphase/index.html deleted file mode 100644 index 895222832d..0000000000 --- a/files/ko/web/api/event/eventphase/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Event.eventPhase -slug: Web/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 {
-  margin: 20px;
-  padding: 4px;
-  border: thin black solid;
-}
-
-#divInfo {
-  margin: 18px;
-  padding: 8px;
-  background-color:white;
-  font-size:80%;
-}
- -

JavaScript Content

- -
var clear = false, divInfo = null, divs = null, useCapture = false;
-window.onload = function () {
-  divInfo = document.getElementById("divInfo");
-  divs = document.getElementsByTagName('div');
-  chCapture = document.getElementById("chCapture");
-  chCapture.onclick = function () {
-    RemoveListeners();
-    AddListeners();
-  }
-  Clear();
-  AddListeners();
-}
-
-function RemoveListeners() {
-  for (var i = 0; i < divs.length; i++) {
-    var d = divs[i];
-    if (d.id != "divInfo") {
-      d.removeEventListener("click", OnDivClick, true);
-      d.removeEventListener("click", OnDivClick, false);
-    }
-  }
-}
-
-function AddListeners() {
-  for (var i = 0; i < divs.length; i++) {
-    var 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; };
-    }
-  }
-}
-
-function OnDivClick(e) {
-  if (clear) {
-    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/>";
-}
-
-function Clear() {
-  for (var 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
diff --git a/files/ko/web/api/event/eventphase/index.md b/files/ko/web/api/event/eventphase/index.md new file mode 100644 index 0000000000..895222832d --- /dev/null +++ b/files/ko/web/api/event/eventphase/index.md @@ -0,0 +1,179 @@ +--- +title: Event.eventPhase +slug: Web/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 {
+  margin: 20px;
+  padding: 4px;
+  border: thin black solid;
+}
+
+#divInfo {
+  margin: 18px;
+  padding: 8px;
+  background-color:white;
+  font-size:80%;
+}
+ +

JavaScript Content

+ +
var clear = false, divInfo = null, divs = null, useCapture = false;
+window.onload = function () {
+  divInfo = document.getElementById("divInfo");
+  divs = document.getElementsByTagName('div');
+  chCapture = document.getElementById("chCapture");
+  chCapture.onclick = function () {
+    RemoveListeners();
+    AddListeners();
+  }
+  Clear();
+  AddListeners();
+}
+
+function RemoveListeners() {
+  for (var i = 0; i < divs.length; i++) {
+    var d = divs[i];
+    if (d.id != "divInfo") {
+      d.removeEventListener("click", OnDivClick, true);
+      d.removeEventListener("click", OnDivClick, false);
+    }
+  }
+}
+
+function AddListeners() {
+  for (var i = 0; i < divs.length; i++) {
+    var 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; };
+    }
+  }
+}
+
+function OnDivClick(e) {
+  if (clear) {
+    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/>";
+}
+
+function Clear() {
+  for (var 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
diff --git a/files/ko/web/api/event/index.html b/files/ko/web/api/event/index.html deleted file mode 100644 index 04c4bc5695..0000000000 --- a/files/ko/web/api/event/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: Event -slug: Web/API/Event -tags: - - API - - DOM - - Event - - Interface - - Reference - - UI - - 이벤트 -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")}}

- -

같이 보기

- - diff --git a/files/ko/web/api/event/index.md b/files/ko/web/api/event/index.md new file mode 100644 index 0000000000..04c4bc5695 --- /dev/null +++ b/files/ko/web/api/event/index.md @@ -0,0 +1,212 @@ +--- +title: Event +slug: Web/API/Event +tags: + - API + - DOM + - Event + - Interface + - Reference + - UI + - 이벤트 +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")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/api/event/istrusted/index.html b/files/ko/web/api/event/istrusted/index.html deleted file mode 100644 index afce93c401..0000000000 --- a/files/ko/web/api/event/istrusted/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Event.isTrusted -slug: Web/API/Event/isTrusted -tags: - - API - - Event - - Property - - Read-only - - Reference - - 속성 - - 이벤트 -translation_of: Web/API/Event/isTrusted ---- -
{{APIRef("DOM")}}
- -

{{domxref("Event")}} 인터페이스의 읽기 전용 속성인 isTrusted는, 이벤트가 사용자 행위에 의하여 발생되었으면 true이고 이벤트가 스크립트로 인해 생성 또는 수정되었거나 dispatchEvent를 통해 보내졌으면 false인 논리 값입니다. 이것이 true인 이벤트는 신뢰된다고 표현합니다.

- -

구문

- -
var bool = event.isTrusted;
-
- -

예제

- -
 if(event.isTrusted)
- {
-    // 이 이벤트는 신뢰됩니다.
- }
- else
- {
-    // 이 이벤트는 신뢰되지 않습니다.
- }
-
- -

명세

- - - - - - - - - - - - - - - - - - - -
명세상태비고
{{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}{{Spec2('DOM3 Events')}}이벤트가 신뢰되기 위한 요건을 추가하였으나 isTrusted 속성을 정의하지는 않았습니다.
- -

브라우저 호환성

- - - -

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

diff --git a/files/ko/web/api/event/istrusted/index.md b/files/ko/web/api/event/istrusted/index.md new file mode 100644 index 0000000000..afce93c401 --- /dev/null +++ b/files/ko/web/api/event/istrusted/index.md @@ -0,0 +1,61 @@ +--- +title: Event.isTrusted +slug: Web/API/Event/isTrusted +tags: + - API + - Event + - Property + - Read-only + - Reference + - 속성 + - 이벤트 +translation_of: Web/API/Event/isTrusted +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Event")}} 인터페이스의 읽기 전용 속성인 isTrusted는, 이벤트가 사용자 행위에 의하여 발생되었으면 true이고 이벤트가 스크립트로 인해 생성 또는 수정되었거나 dispatchEvent를 통해 보내졌으면 false인 논리 값입니다. 이것이 true인 이벤트는 신뢰된다고 표현합니다.

+ +

구문

+ +
var bool = event.isTrusted;
+
+ +

예제

+ +
 if(event.isTrusted)
+ {
+    // 이 이벤트는 신뢰됩니다.
+ }
+ else
+ {
+    // 이 이벤트는 신뢰되지 않습니다.
+ }
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + +
명세상태비고
{{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}{{Spec2('DOM3 Events')}}이벤트가 신뢰되기 위한 요건을 추가하였으나 isTrusted 속성을 정의하지는 않았습니다.
+ +

브라우저 호환성

+ + + +

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

diff --git a/files/ko/web/api/event/preventdefault/index.html b/files/ko/web/api/event/preventdefault/index.html deleted file mode 100644 index 71f4fdb229..0000000000 --- a/files/ko/web/api/event/preventdefault/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: event.preventDefault -slug: Web/API/Event/preventDefault -translation_of: Web/API/Event/preventDefault ---- -

{{ ApiRef() }}

- -

개요

- -

이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소합니다.

- -

구문

- -
event.preventDefault()
-
- -

예제

- -

다음의 예제에서는 체크박스를 클릭했을 때 발생하는 동작을 멈추는 방법을 살펴보겠습니다. 

- -
<html>
-<head>
-<title>preventDefault 예제</title>
-
-<script type="text/javascript">
-
-function stopDefAction(evt) {
-  evt.preventDefault();
-}
-</script>
-</head>
-
-<body>
-
-<p>체크박스 컨트롤을 클릭해 주세요</p>
-
-<form>
-<input type="checkbox" onclick="stopDefAction(event);"/>
-<label for="checkbox">체크박스</label>
-</form>
-
-</body>
-</html>
-
- -

preventDefault의 예제를 여기에서 확인할 수 있습니다.

- -

아래의 예제에서는, preventDefault() 를 사용해서 올바르지 않은 텍스트가 입력란에 입력되는것을 막는 방법을 설명하고 있습니다.

- -
<html>
-<head>
-<title>preventDefault 예제</title>
-
-<script type="text/javascript">
-
-function checkName(evt) {
-var charCode = evt.charCode;
-
-  if (charCode != 0) {
-    if (charCode < 97 || charCode > 122) {
-      evt.preventDefault();
-      alert("소문자만 입력할 수 있습니다." + "\n"
-            + "charCode: " + charCode + "\n"
-      );
-    }
-  }
-}
-
-</script>
-</head>
-
-<body>
-
-<p>당신의 이름을 소문자만으로 입력해주세요.</p>
-<form>
-<input type="text" onkeypress="checkName(event);"/>
-</form>
-
-</body>
-</html>
-
- -

주의

- -

이벤트를 취소하는 도중에 preventDefault를 호출하게되면, 일반적으로는 브라우저의 구현에 의해 처리되는 기존의 액션이 동작하지 않게되고, 그 결과 이벤트가 발생하지 않게됩니다.

- -

이벤트의 취소가능 여부는 event.cancelable를 사용해서 확인할 수 있습니다. 취소불가능한 이벤트에 대해서 preventDefault를 호출해도 결과는 없습니다.

- -

preventDefault는 DOM을 통한 이벤트의 전파를 막지않습니다. 전파를 막을때는 event.stopPropagation를 사용해주세요.

- -

사양

- -

DOM Level 2 Events: preventDefault

diff --git a/files/ko/web/api/event/preventdefault/index.md b/files/ko/web/api/event/preventdefault/index.md new file mode 100644 index 0000000000..71f4fdb229 --- /dev/null +++ b/files/ko/web/api/event/preventdefault/index.md @@ -0,0 +1,93 @@ +--- +title: event.preventDefault +slug: Web/API/Event/preventDefault +translation_of: Web/API/Event/preventDefault +--- +

{{ ApiRef() }}

+ +

개요

+ +

이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소합니다.

+ +

구문

+ +
event.preventDefault()
+
+ +

예제

+ +

다음의 예제에서는 체크박스를 클릭했을 때 발생하는 동작을 멈추는 방법을 살펴보겠습니다. 

+ +
<html>
+<head>
+<title>preventDefault 예제</title>
+
+<script type="text/javascript">
+
+function stopDefAction(evt) {
+  evt.preventDefault();
+}
+</script>
+</head>
+
+<body>
+
+<p>체크박스 컨트롤을 클릭해 주세요</p>
+
+<form>
+<input type="checkbox" onclick="stopDefAction(event);"/>
+<label for="checkbox">체크박스</label>
+</form>
+
+</body>
+</html>
+
+ +

preventDefault의 예제를 여기에서 확인할 수 있습니다.

+ +

아래의 예제에서는, preventDefault() 를 사용해서 올바르지 않은 텍스트가 입력란에 입력되는것을 막는 방법을 설명하고 있습니다.

+ +
<html>
+<head>
+<title>preventDefault 예제</title>
+
+<script type="text/javascript">
+
+function checkName(evt) {
+var charCode = evt.charCode;
+
+  if (charCode != 0) {
+    if (charCode < 97 || charCode > 122) {
+      evt.preventDefault();
+      alert("소문자만 입력할 수 있습니다." + "\n"
+            + "charCode: " + charCode + "\n"
+      );
+    }
+  }
+}
+
+</script>
+</head>
+
+<body>
+
+<p>당신의 이름을 소문자만으로 입력해주세요.</p>
+<form>
+<input type="text" onkeypress="checkName(event);"/>
+</form>
+
+</body>
+</html>
+
+ +

주의

+ +

이벤트를 취소하는 도중에 preventDefault를 호출하게되면, 일반적으로는 브라우저의 구현에 의해 처리되는 기존의 액션이 동작하지 않게되고, 그 결과 이벤트가 발생하지 않게됩니다.

+ +

이벤트의 취소가능 여부는 event.cancelable를 사용해서 확인할 수 있습니다. 취소불가능한 이벤트에 대해서 preventDefault를 호출해도 결과는 없습니다.

+ +

preventDefault는 DOM을 통한 이벤트의 전파를 막지않습니다. 전파를 막을때는 event.stopPropagation를 사용해주세요.

+ +

사양

+ +

DOM Level 2 Events: preventDefault

diff --git a/files/ko/web/api/event/stopimmediatepropagation/index.html b/files/ko/web/api/event/stopimmediatepropagation/index.html deleted file mode 100644 index 56b27d7f18..0000000000 --- a/files/ko/web/api/event/stopimmediatepropagation/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Event.stopImmediatePropagation() -slug: Web/API/Event/stopImmediatePropagation -translation_of: Web/API/Event/stopImmediatePropagation ---- -
{{APIRef("DOM")}}
- -

event.stopImmediatePropagation() 는 같은 이벤트에서 다른 리스너들이 불려지는 것을 막습니다. 

- -

문법

- -
event.stopImmediatePropagation();
-
- -

주석

- -

만약  다양한 리스너들이 같은 이벤트타입을 위한 같은 요소에 소속되어 있다면 그들은 추가 된 순서대로 불리게 될 것입니다. 만약 event.stopImmediatePropagation()을 호출하면, 남아있는 리스너들이 불리는 일이 없을 것입니다.

- -

명세

- - - - - - - - - - - - - - - - - - - - - -
명세상태설명
{{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}{{Spec2('DOM WHATWG')}} 
{{SpecName('DOM4', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}{{Spec2('DOM4')}}Initial definition
- -

브라우저 호환성

- -

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

diff --git a/files/ko/web/api/event/stopimmediatepropagation/index.md b/files/ko/web/api/event/stopimmediatepropagation/index.md new file mode 100644 index 0000000000..56b27d7f18 --- /dev/null +++ b/files/ko/web/api/event/stopimmediatepropagation/index.md @@ -0,0 +1,45 @@ +--- +title: Event.stopImmediatePropagation() +slug: Web/API/Event/stopImmediatePropagation +translation_of: Web/API/Event/stopImmediatePropagation +--- +
{{APIRef("DOM")}}
+ +

event.stopImmediatePropagation() 는 같은 이벤트에서 다른 리스너들이 불려지는 것을 막습니다. 

+ +

문법

+ +
event.stopImmediatePropagation();
+
+ +

주석

+ +

만약  다양한 리스너들이 같은 이벤트타입을 위한 같은 요소에 소속되어 있다면 그들은 추가 된 순서대로 불리게 될 것입니다. 만약 event.stopImmediatePropagation()을 호출하면, 남아있는 리스너들이 불리는 일이 없을 것입니다.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}{{Spec2('DOM WHATWG')}} 
{{SpecName('DOM4', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}{{Spec2('DOM4')}}Initial definition
+ +

브라우저 호환성

+ +

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

diff --git a/files/ko/web/api/event/stoppropagation/index.html b/files/ko/web/api/event/stoppropagation/index.html deleted file mode 100644 index 6830d39e41..0000000000 --- a/files/ko/web/api/event/stoppropagation/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Event.stopPropagation() -slug: Web/API/Event/stopPropagation -translation_of: Web/API/Event/stopPropagation ---- -
{{APIRef("DOM")}}
- -

이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다.

- -

문법

- -
event.stopPropagation();
- -

예시

- -

DOM에서 이 방법과 이벤트 전파의 더욱 상세한 예시를 위한 예제 5:  Event Propagation 를 보세요.

- -

주석

- -

이벤트 흐름의 설명을 위한 DOM 명세 를 보세요. ( DOM 레벨 3 이벤트 초안에는 삽화가 들어가 있습니다.)

- -

preventDefault는 이벤트의 기본적인 동작(캡쳐링과 버블링)이 일어나는 것을 막기위해 보완적으로 사용되는 방법입니다.

- -

명세

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}{{Spec2("DOM2 Events")}}Initial definition
- -

브라우저 호환성

- -

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

diff --git a/files/ko/web/api/event/stoppropagation/index.md b/files/ko/web/api/event/stoppropagation/index.md new file mode 100644 index 0000000000..6830d39e41 --- /dev/null +++ b/files/ko/web/api/event/stoppropagation/index.md @@ -0,0 +1,53 @@ +--- +title: Event.stopPropagation() +slug: Web/API/Event/stopPropagation +translation_of: Web/API/Event/stopPropagation +--- +
{{APIRef("DOM")}}
+ +

이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다.

+ +

문법

+ +
event.stopPropagation();
+ +

예시

+ +

DOM에서 이 방법과 이벤트 전파의 더욱 상세한 예시를 위한 예제 5:  Event Propagation 를 보세요.

+ +

주석

+ +

이벤트 흐름의 설명을 위한 DOM 명세 를 보세요. ( DOM 레벨 3 이벤트 초안에는 삽화가 들어가 있습니다.)

+ +

preventDefault는 이벤트의 기본적인 동작(캡쳐링과 버블링)이 일어나는 것을 막기위해 보완적으로 사용되는 방법입니다.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}{{Spec2("DOM2 Events")}}Initial definition
+ +

브라우저 호환성

+ +

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

diff --git a/files/ko/web/api/event/target/index.html b/files/ko/web/api/event/target/index.html deleted file mode 100644 index 1fa5ad467e..0000000000 --- a/files/ko/web/api/event/target/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Event.target -slug: Web/API/Event/target -tags: - - 돔 - - 레퍼런스 - - 속성 - - 이벤트 - - 타겟 -translation_of: Web/API/Event/target ---- -

{{ApiRef("DOM")}}

- -

{{domxref("Event")}} interface의 target 속성은 event가 전달한 객체에 대한 참조입니다. 이는 이벤트의 버블링 또는 캡처 단계에서 이벤트 핸들러를 호출하는 {{domxref("Event.currentTarget")}}와 다릅니다.

- -

구문

- -
const theTarget = someEvent.target
- -

Value

- -

{{domxref("EventTarget")}}

- -

예제

- -

event.target 속성을 사용하여 event delegation을 구현할 수 있습니다.

- -
// Make a list
-var ul = document.createElement('ul');
-document.body.appendChild(ul);
-
-var li1 = document.createElement('li');
-var li2 = document.createElement('li');
-ul.appendChild(li1);
-ul.appendChild(li2);
-
-function hide(e){
-  // e.target refers to the clicked <li> element
-  // This is different than e.currentTarget which would refer to the parent <ul> in this context
-  e.target.style.visibility = 'hidden';
-}
-
-// Attach the listener to the list
-// It will fire when each <li> is clicked
-ul.addEventListener('click', hide, false);
-
- -

명세

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-event-target", "Event.target")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}{{Spec2("DOM2 Events")}}Initial definition
- -

브라우저 호환성

- -

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

- -

호환성 참고

- -

IE 6–8에서는 이벤트 모델이 다릅니다. 이벤트 리스너는 비표준 - {{domxref('EventTarget.attachEvent()')}} 메서드로 연결됩니다.

- -

이 모델에서 이벤트 객체는 {{domxref('Event.srcElement')}} 속성 - (target 속성 대신)을 가지며 Event.target과 - 동일한 의미를 갖습니다.

- -
function hide(evt) {
-  // Support IE6-8
-  var target = evt.target || evt.srcElement;
-  target.style.visibility = 'hidden';
-}
-
- -

같이 보기

- - diff --git a/files/ko/web/api/event/target/index.md b/files/ko/web/api/event/target/index.md new file mode 100644 index 0000000000..1fa5ad467e --- /dev/null +++ b/files/ko/web/api/event/target/index.md @@ -0,0 +1,101 @@ +--- +title: Event.target +slug: Web/API/Event/target +tags: + - 돔 + - 레퍼런스 + - 속성 + - 이벤트 + - 타겟 +translation_of: Web/API/Event/target +--- +

{{ApiRef("DOM")}}

+ +

{{domxref("Event")}} interface의 target 속성은 event가 전달한 객체에 대한 참조입니다. 이는 이벤트의 버블링 또는 캡처 단계에서 이벤트 핸들러를 호출하는 {{domxref("Event.currentTarget")}}와 다릅니다.

+ +

구문

+ +
const theTarget = someEvent.target
+ +

Value

+ +

{{domxref("EventTarget")}}

+ +

예제

+ +

event.target 속성을 사용하여 event delegation을 구현할 수 있습니다.

+ +
// Make a list
+var ul = document.createElement('ul');
+document.body.appendChild(ul);
+
+var li1 = document.createElement('li');
+var li2 = document.createElement('li');
+ul.appendChild(li1);
+ul.appendChild(li2);
+
+function hide(e){
+  // e.target refers to the clicked <li> element
+  // This is different than e.currentTarget which would refer to the parent <ul> in this context
+  e.target.style.visibility = 'hidden';
+}
+
+// Attach the listener to the list
+// It will fire when each <li> is clicked
+ul.addEventListener('click', hide, false);
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-event-target", "Event.target")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}{{Spec2("DOM2 Events")}}Initial definition
+ +

브라우저 호환성

+ +

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

+ +

호환성 참고

+ +

IE 6–8에서는 이벤트 모델이 다릅니다. 이벤트 리스너는 비표준 + {{domxref('EventTarget.attachEvent()')}} 메서드로 연결됩니다.

+ +

이 모델에서 이벤트 객체는 {{domxref('Event.srcElement')}} 속성 + (target 속성 대신)을 가지며 Event.target과 + 동일한 의미를 갖습니다.

+ +
function hide(evt) {
+  // Support IE6-8
+  var target = evt.target || evt.srcElement;
+  target.style.visibility = 'hidden';
+}
+
+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf