From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/api/event/cancelable/index.html | 23 +++ files/ko/web/api/event/cancelbubble/index.html | 90 +++++++++ files/ko/web/api/event/createevent/index.html | 29 +++ files/ko/web/api/event/event/index.html | 77 ++++++++ files/ko/web/api/event/eventphase/index.html | 179 +++++++++++++++++ files/ko/web/api/event/index.html | 212 +++++++++++++++++++++ files/ko/web/api/event/istrusted/index.html | 61 ++++++ files/ko/web/api/event/preventdefault/index.html | 93 +++++++++ .../api/event/stopimmediatepropagation/index.html | 91 +++++++++ files/ko/web/api/event/stoppropagation/index.html | 99 ++++++++++ files/ko/web/api/event/target/index.html | 96 ++++++++++ 11 files changed, 1050 insertions(+) create mode 100644 files/ko/web/api/event/cancelable/index.html create mode 100644 files/ko/web/api/event/cancelbubble/index.html create mode 100644 files/ko/web/api/event/createevent/index.html create mode 100644 files/ko/web/api/event/event/index.html create mode 100644 files/ko/web/api/event/eventphase/index.html create mode 100644 files/ko/web/api/event/index.html create mode 100644 files/ko/web/api/event/istrusted/index.html create mode 100644 files/ko/web/api/event/preventdefault/index.html create mode 100644 files/ko/web/api/event/stopimmediatepropagation/index.html create mode 100644 files/ko/web/api/event/stoppropagation/index.html create mode 100644 files/ko/web/api/event/target/index.html (limited to 'files/ko/web/api/event') diff --git a/files/ko/web/api/event/cancelable/index.html b/files/ko/web/api/event/cancelable/index.html new file mode 100644 index 0000000000..4c3154cebe --- /dev/null +++ b/files/ko/web/api/event/cancelable/index.html @@ -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 new file mode 100644 index 0000000000..174565f9c4 --- /dev/null +++ b/files/ko/web/api/event/cancelbubble/index.html @@ -0,0 +1,90 @@ +--- +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

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(53)}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(53)}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Previous to Firefox 53, this property was defined on the {{domxref("UIEvent")}} interface. See {{bug(1298970)}} for more details.

diff --git a/files/ko/web/api/event/createevent/index.html b/files/ko/web/api/event/createevent/index.html new file mode 100644 index 0000000000..ef05a699e4 --- /dev/null +++ b/files/ko/web/api/event/createevent/index.html @@ -0,0 +1,29 @@ +--- +title: Event.createEvent() +slug: Web/API/Event/createEvent +translation_of: Web/API/Document/createEvent +--- +

{{APIRef("DOM")}}

+ +

새로운 event를 생성합니다, 새로 만들어진 event는 반드시 자신의 init() method를 호출함으로써 초기화되어야만 합니다.

+ +

Syntax

+ +
document.createEvent(type)
+ +
+
type
+
A string indicating the event type to create.
+
+ +

이 method는 명시된 타입인 새로운 DOM {{ domxref("Event") }} 객체를 반환하며 이는 반드시 사용 전에 초기화되어야만 합니다.

+ +

Example

+ +
var newEvent = document.createEvent("UIEvents");
+ +

Specification

+ + diff --git a/files/ko/web/api/event/event/index.html b/files/ko/web/api/event/event/index.html new file mode 100644 index 0000000000..5ba8e6a6c4 --- /dev/null +++ b/files/ko/web/api/event/event/index.html @@ -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 new file mode 100644 index 0000000000..895222832d --- /dev/null +++ b/files/ko/web/api/event/eventphase/index.html @@ -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 new file mode 100644 index 0000000000..04c4bc5695 --- /dev/null +++ b/files/ko/web/api/event/index.html @@ -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 new file mode 100644 index 0000000000..afce93c401 --- /dev/null +++ b/files/ko/web/api/event/istrusted/index.html @@ -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 new file mode 100644 index 0000000000..71f4fdb229 --- /dev/null +++ b/files/ko/web/api/event/preventdefault/index.html @@ -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 new file mode 100644 index 0000000000..6c2bc93b84 --- /dev/null +++ b/files/ko/web/api/event/stopimmediatepropagation/index.html @@ -0,0 +1,91 @@ +--- +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
+ +

브라우저 호환성

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("6.0")}}{{CompatGeckoDesktop("10.0")}}{{CompatIE(9.0)}}{{CompatOpera("15.0")}}{{CompatSafari("5.0")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ko/web/api/event/stoppropagation/index.html b/files/ko/web/api/event/stoppropagation/index.html new file mode 100644 index 0000000000..bead1eceb9 --- /dev/null +++ b/files/ko/web/api/event/stoppropagation/index.html @@ -0,0 +1,99 @@ +--- +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
+ +

브라우저 호환성

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/ko/web/api/event/target/index.html b/files/ko/web/api/event/target/index.html new file mode 100644 index 0000000000..02fbdd8726 --- /dev/null +++ b/files/ko/web/api/event/target/index.html @@ -0,0 +1,96 @@ +--- +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")}}와 다릅니다.

+ +

Syntax

+ +
theTarget = event.target
+ +

Value

+ +

{{domxref("EventTarget")}}

+ +

Example

+ +

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);
+
+ +

Specifications

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

Browser compatibility

+ + + +

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

+ +

Compatibility notes

+ +

On IE 6-8 the event model is different. Event listeners are attached with the non-standard {{domxref('EventTarget.attachEvent')}} method. In this model, the event object has a {{domxref('Event.srcElement')}} property, instead of the target property, and it has the same semantics as event.target.

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

See also

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