diff options
Diffstat (limited to 'files/ko/web/api/event')
| -rw-r--r-- | files/ko/web/api/event/cancelable/index.html | 23 | ||||
| -rw-r--r-- | files/ko/web/api/event/cancelbubble/index.html | 90 | ||||
| -rw-r--r-- | files/ko/web/api/event/createevent/index.html | 29 | ||||
| -rw-r--r-- | files/ko/web/api/event/event/index.html | 77 | ||||
| -rw-r--r-- | files/ko/web/api/event/eventphase/index.html | 179 | ||||
| -rw-r--r-- | files/ko/web/api/event/index.html | 212 | ||||
| -rw-r--r-- | files/ko/web/api/event/istrusted/index.html | 61 | ||||
| -rw-r--r-- | files/ko/web/api/event/preventdefault/index.html | 93 | ||||
| -rw-r--r-- | files/ko/web/api/event/stopimmediatepropagation/index.html | 91 | ||||
| -rw-r--r-- | files/ko/web/api/event/stoppropagation/index.html | 99 | ||||
| -rw-r--r-- | files/ko/web/api/event/target/index.html | 96 |
11 files changed, 1050 insertions, 0 deletions
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 +--- +<p>{{ ApiRef() }}</p> +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">개요</h3> +<p>이벤트의 취소가 가능한지를 나타냅니다.</p> +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">구문</h3> +<pre class="eval"><em>bool</em> = <em>event</em>.cancelable; +</pre> +<p>이벤트에 규정한 액션을 취소할 수 있는가의 가능여부에 따라서 bool은 true 또는 false가 됩니다.</p> +<h3 id=".E6.B3.A8.E6.84.8F.E7.82.B9" name=".E6.B3.A8.E6.84.8F.E7.82.B9">주의</h3> +<p>이벤트취소의 가능여부는 이벤트의 초기화 시에 판별됩니다.</p> +<p>이벤트를 취소하기 위해 <a href="/ja/DOM/event.preventDefault" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="ja/DOM/event.preventDefault">preventDefault</a> 메소드를 호출하게 되며, 관련 이벤트에 규정된 액션을 실행하지 않도록 합니다.</p> +<h3 id=".E4.BB.95.E6.A7.98.E6.9B.B8" name=".E4.BB.95.E6.A7.98.E6.9B.B8">사양</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-canCancel">DOM Level 2 Events: cancelable</a></p> +<p> </p> +<p>{{ languages( { "en": "en/DOM/event.cancelable", "es": "es/DOM/event.cancelable", "pl": "pl/DOM/event.cancelable", "ja": "ja/DOM/event.cancelable" } ) }}</p> 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 +--- +<p>{{APIRef("DOM Events")}}</p> + +<p><strong>Event.cancelBubble</strong> 속성은 {{domxref("Event.stopPropagation()")}}의 별칭입니다. 이벤트 핸들러에서 반환되기 전에 값을 true로 설정하면 이벤트가 전파되지 않습니다.</p> + +<p>Syntax</p> + +<pre class="syntaxbox">event.cancelBubble = <em>bool;</em> +<em>var bool</em> = event.cancelBubble; +</pre> + +<h2 id="Example">Example</h2> + +<pre>elem.onclick = function(e) { + // do cool things here + e.cancelBubble = true; +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancellBubble')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(53)}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(53)}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Previous to Firefox 53, this property was defined on the {{domxref("UIEvent")}} interface. See {{bug(1298970)}} for more details.</p> 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 +--- +<p>{{APIRef("DOM")}}</p> + +<p>새로운 event를 생성합니다, 새로 만들어진 event는 반드시 자신의 init() method를 호출함으로써 초기화되어야만 합니다.</p> + +<h3 id="Syntax">Syntax</h3> + +<pre><code>document.createEvent(type) </code></pre> + +<dl> + <dt><code>type</code></dt> + <dd>A string indicating the event type to create.</dd> +</dl> + +<p>이 method는 명시된 타입인 새로운 DOM {{ domxref("Event") }} 객체를 반환하며 이는 반드시 사용 전에 초기화되어야만 합니다.</p> + +<h3 id="Example">Example</h3> + +<pre>var newEvent = document.createEvent("UIEvents");</pre> + +<h3 id="Specification">Specification</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">DOM Level 2 Events</a></li> +</ul> 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 +--- +<p>{{APIRef("DOM")}}</p> + +<p><code><strong>Event()</strong></code> constructor는 새로운 {{domxref("Event")}} 객체를 생성합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">new Event(<var>typeArg</var>[, <var>eventInit</var>]);</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>typeArg</code></dt> + <dd>이 인자는 {{domxref("DOMString")}} 입니다. event의 이름을 나타냅니다.</dd> + <dt><code>eventInit</code> {{optional_inline}}</dt> + <dd>이 인자는 <code>EventInit</code> dictionary, 입니다. 아래의 추가 옵션 필드가 있습니다. + <ul> + <li><code>bubbles</code>: {{jsxref("Boolean")}} 값을 받습니다. 해당 event가 bubble인지 아닌지 결정합니다. 기본값은 <code>false</code> 입니다.</li> + <li><code>cancelable</code>: {{jsxref("Boolean")}} 값을 받습니다.event가 캔슬 될 수 있는지 없는지 결정합니다. 기본값은<code>false</code> 입니다.</li> + <li><code>composed</code>: {{jsxref("Boolean")}} 값을 받습니다. event가 shadow root 바깥의 eventListener 들도 trigger 할 것인지 결정합니다. (더 자세한 내용은 이곳에서 {{domxref("Event.composed")}} ). 기본값은 <code>false</code> 입니다.</li> + </ul> + </dd> +</dl> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">// 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); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-event-event','Event()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Event.Event")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Event")}}</li> + <li>{{domxref("EventTarget.dispatchEvent()")}}</li> + <li><a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">Creating and triggering events</a></li> +</ul> 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 +--- +<p>{{ApiRef("DOM")}}</p> + +<p>현재 발생중인 이벤트 흐름의 단계를 나타냅니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js"><em>var phase</em> = event.eventPhase; +</pre> + +<p>이벤트 흐름의 최근 실행 단계에 대한 지정된 정수값을 반환합니다. 가능한 값은 {{anch("이벤트 단계 상수")}} 목록을 참조.</p> + +<h2 id="Constants">Constants</h2> + +<h3 id="Event_phase_constants">Event phase constants</h3> + +<p>이 값들은 이벤트 흐름의 현재 실행 단계를 나타냅니다.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Constant</th> + <th scope="col">Value</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>Event.NONE</code></td> + <td>0</td> + <td>아무런 이벤트도 발생하지 않았습니다.</td> + </tr> + <tr> + <td><code>Event.CAPTURING_PHASE</code></td> + <td>1</td> + <td>이벤트가 상위 개체를 통해 전파됩니다. 이 프로세스는 {{domxref("Window")}}, {{domxref("Document")}}에서 시작하여, {{domxref("HTMLHtmlElement")}} 등 대상의 부모에 도달할 때까지 요소들을 통과합니다. 이 단계에서 {{domxref("EventTarget.addEventListener()")}} 가 호출될 때 캡처 모드에 있는 {{domxref("EventListener", "Event listeners", "", 1)}} 가 트리거됩니다.</td> + </tr> + <tr> + <td><code>Event.AT_TARGET</code></td> + <td>2</td> + <td>이벤트가 {{domxref("EventTarget", "the event's target", "", 1)}}에 도착했습니다. 이 단계에서 등록된 이벤트 리스너가 이 때 호출됩니다. 만약 {{domxref("Event.bubbles")}} 이 <code>false</code> 라면, 이 단계가 완료된 다음 이벤트 진행은 종료됩니다.</td> + </tr> + <tr> + <td><code>Event.BUBBLING_PHASE</code></td> + <td>3</td> + <td>이벤트가 역순으로 대상의 조상을 통해 전파됩니다. 대상의 부모부터 시작해서, {{domxref("Window")}}를 포함하는 단계까지 도달합니다. 이는 버블링으로 알려져 있으며, {{domxref("Event.bubbles")}}가 <code>true</code> 일 때만 발생합니다. 이 프로세스 중에 이 단계에 등록된 {{domxref("EventListener", "Event listeners", "", 1)}} 가 트리거됩니다.</td> + </tr> + </tbody> +</table> + +<p>더 상세한 내용은 DOM Level 3 Events 명세인 <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">section 3.1, Event dispatch and DOM event flow</a> 를 참고하세요.</p> + +<h2 id="Example" name="Example">Example</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><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> +</pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">div { + margin: 20px; + padding: 4px; + border: thin black solid; +} + +#divInfo { + margin: 18px; + padding: 8px; + background-color:white; + font-size:80%; +}</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js">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 = ''; +}</pre> + +<p>{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> 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 +--- +<p>{{ APIRef("DOM") }}</p> + +<p><strong><code>Event</code></strong> 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다.</p> + +<p>이벤트는 마우스를 클릭하거나 키보드를 누르는 등 사용자 액션에 의해 발생할 수도 있고, 혹은 비동기적 작업의 진행을 나타내기 위해 API가 생성할 수도 있습니다. 요소의 {{domxref("HTMLElement.click()")}} 메서드를 호출하거나, 이벤트를 정의한 후 특정 대상에 대해서 {{domxref("EventTarget.dispatchEvent()")}}를 사용하는 등 프로그래밍적으로도 만들어낼 수 있습니다.</p> + +<p>이벤트의 종류는 다양하며 일부는 <code>Event</code> 인터페이스의 파생 인터페이스를 사용합니다. <code>Event</code> 자체는 모든 이벤트에 공통된 속성과 메서드를 가집니다.</p> + +<p>많은 DOM 요소는 이벤트를 받고("수신"), 받은 이벤트를 "처리"하는 코드를 실행할 수 있습니다. 이벤트 처리기는 대개 {{domxref("EventTarget.addEventListener()")}}를 사용해 다양한 요소(<code><button></code>, <code><div></code>, <code><span></code>, 등등)에 "부착"합니다. 그리고 제대로 추가한 경우, 반대로 {{domxref("EventTarget.removeEventListener", "removeEventListener()")}}로 제거할 수도 있습니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> 하나의 요소는 다수의 처리기를 가질 수 있습니다. 완전히 동일한 이벤트에 대해서도, 예컨대 광고 모듈과 통계 모듈이 각각 비디오 시청을 추적하는 등 여러 처리기를 따로 등록할 수 있습니다.</p> +</div> + +<p>중첩된 많은 요소가 서로 자신만의 처리기를 가지고 있는 경우 이벤트 처리가 매우 복잡해질 수 있습니다. 특히 부모 요소와 자식 요소의 "공간 상 위치"가 겹쳐서 이벤트가 양쪽 모두에서 발생하는 경우, 이벤트 처리 순서는 각 처리기의 <a href="/ko/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">이벤트 확산과 캡처</a> 설정에 따라 달라집니다.</p> + +<h2 id="Event_기반_인터페이스">Event 기반 인터페이스</h2> + +<p>다음은 <code>Event</code> 인터페이스에서 파생된 인터페이스의 목록입니다.</p> + +<p>모든 이벤트 인터페이스 이름은 "Event"로 끝납니다.</p> + +<div class="index"> +<ul> + <li> + <div class="index"> + <ul> + <li>{{domxref("AnimationEvent")}}</li> + <li>{{domxref("AudioProcessingEvent")}}</li> + <li>{{domxref("BeforeInputEvent")}}</li> + <li>{{domxref("BeforeUnloadEvent")}}</li> + <li>{{domxref("BlobEvent")}}</li> + <li>{{domxref("ClipboardEvent")}}</li> + <li>{{domxref("CloseEvent")}}</li> + <li>{{domxref("CompositionEvent")}}</li> + <li>{{domxref("CSSFontFaceLoadEvent")}}</li> + <li>{{domxref("CustomEvent")}}</li> + <li>{{domxref("DeviceLightEvent")}}</li> + <li>{{domxref("DeviceMotionEvent")}}</li> + <li>{{domxref("DeviceOrientationEvent")}}</li> + <li>{{domxref("DeviceProximityEvent")}}</li> + <li>{{domxref("DOMTransactionEvent")}}</li> + <li>{{domxref("DragEvent")}}</li> + <li>{{domxref("EditingBeforeInputEvent")}}</li> + <li>{{domxref("ErrorEvent")}}</li> + <li>{{domxref("FetchEvent")}}</li> + <li>{{domxref("FocusEvent")}}</li> + <li>{{domxref("GamepadEvent")}}</li> + <li>{{domxref("HashChangeEvent")}}</li> + <li>{{domxref("IDBVersionChangeEvent")}}</li> + <li>{{domxref("InputEvent")}}</li> + <li>{{domxref("KeyboardEvent")}}</li> + <li>{{domxref("MediaStreamEvent")}}</li> + <li>{{domxref("MessageEvent")}}</li> + <li>{{domxref("MouseEvent")}}</li> + <li>{{domxref("MutationEvent")}}</li> + <li>{{domxref("OfflineAudioCompletionEvent")}}</li> + <li>{{domxref("OverconstrainedError")}}</li> + <li>{{domxref("PageTransitionEvent")}}</li> + <li>{{domxref("PaymentRequestUpdateEvent")}}</li> + <li>{{domxref("PointerEvent")}}</li> + <li>{{domxref("PopStateEvent")}}</li> + <li>{{domxref("ProgressEvent")}}</li> + <li>{{domxref("RelatedEvent")}}</li> + <li>{{domxref("RTCDataChannelEvent")}}</li> + <li>{{domxref("RTCIdentityErrorEvent")}}</li> + <li>{{domxref("RTCIdentityEvent")}}</li> + <li>{{domxref("RTCPeerConnectionIceEvent")}}</li> + <li>{{domxref("SensorEvent")}}</li> + <li>{{domxref("StorageEvent")}}</li> + <li>{{domxref("SVGEvent")}}</li> + <li>{{domxref("SVGZoomEvent")}}</li> + <li>{{domxref("TimeEvent")}}</li> + <li>{{domxref("TouchEvent")}}</li> + <li>{{domxref("TrackEvent")}}</li> + <li>{{domxref("TransitionEvent")}}</li> + <li>{{domxref("UIEvent")}}</li> + <li>{{domxref("UserProximityEvent")}}</li> + <li>{{domxref("WebGLContextEvent")}}</li> + <li>{{domxref("WheelEvent")}}</li> + </ul> + </div> + </li> +</ul> +</div> + +<h2 id="생성자">생성자</h2> + +<dl> + <dt>{{domxref("Event.Event", "Event()")}}</dt> + <dd><code>Event</code> 객체를 생성하고 반환합니다.</dd> +</dl> + +<h2 id="속성">속성</h2> + +<dl> + <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt> + <dd>이벤트가 DOM을 타고 위로 확산되는지 나타냅니다.</dd> + <dt>{{domxref("Event.cancelBubble")}}</dt> + <dd>{{domxref("Event.stopPropagation()")}}의 이명으로, 과거에 사용하던 명칭입니다. 이벤트 처리기가 종료되기 전에 값을 <code>true</code>로 설정하면 더 이상의 확산을 막습니다.</dd> + <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt> + <dd>이벤트를 취소할 수 있는지 나타냅니다.</dd> + <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt> + <dd>이벤트가 섀도 DOM과 일반 DOM의 경계를 넘어 확산할 수 있는지 나타내는 불리언입니다.</dd> + <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt> + <dd>이벤트를 위해 현재 등록된 대상의 참조. 이벤트가 현재 전달되기로한 객체입니다. 재 타게팅을 통해 변경될수도 있습니다.</dd> + <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt> + <dd>이벤트가 확산하며 거쳐간 DOM {{domxref("Node")}}의 {{jsxref("Array")}}입니다.</dd> + <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt> + <dd>이벤트의 {{domxref("event.preventDefault()")}}가 호출됐는지를 나타냅니다.</dd> + <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt> + <dd>처리 중인 이벤트 흐름의 단계를 나타냅니다.</dd> + <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>이벤트의 명시적인 원래 대상입니다. (Mozilla 전용)</dd> + <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>이벤트 대상 재설정 이전의 원래 대상입니다. (Mozilla 전용)</dd> + <dt>{{domxref("Event.returnValue")}}</dt> + <dd>Internet Explorer가 도입했으며 구형 사이트의 동작을 보장하기 위해 DOM 명세에 포함된 호환용 속성입니다. 이상적으로는 {{domxref("Event.preventDefault()")}}와 {{domxref("Event.defaultPrevented")}}를 사용해야 하지만, 원하면 <code>returnValue</code>를 사용할 수 있습니다.</dd> + <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt> + <dd>구버전 Internet Explorer에서 사용한 {{domxref("Event.target")}}의 다른 이름입니다. 비표준이지만 일부 다른 브라우저에서도 호환성을 위해 지원하고 있습니다.</dd> + <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt> + <dd>이벤트가 처음에 발생했던 대상의 참조입니다.</dd> + <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt> + <dd>이벤트가 생성된 시간(밀리초)입니다. 명세에 따르면 문서 로딩 후 이벤트 생성 시점까지의 시간으로 나타나 있지만 실제 구현은 브라우저마다 다릅니다. 또한 이 속성의 값을 {{domxref("DOMHighResTimeStamp")}}로 바꾸는 작업이 진행 중입니다.</dd> + <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt> + <dd>이벤트의 이름입니다. 대소문자를 구분하지 않습니다.</dd> + <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt> + <dd>이벤트가 브라우저에 의해 생성, 예컨대 사용자 클릭으로 인해 발생한 것인지, 아니면 {{domxref("Event.initEvent()")}} 등을 사용한 스크립트에서 발생한 것인지 나타냅니다.</dd> +</dl> + +<div class="hidden"> +<h3 id="Obsolete_properties">Obsolete properties</h3> + +<dl> + <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt> + <dd>Obsolete; use {{domxref("Event.composed", "composed")}} instead. (A {{jsxref("Boolean")}} indicating whether the given event will bubble across through the shadow root into the standard DOM.)</dd> +</dl> +</div> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{domxref("Event.composedPath()")}}</dt> + <dd>이벤트의 경로, 즉 수신기를 발동할 모든 객체를 반환합니다. 섀도우 루트의 {{domxref("ShadowRoot.mode")}}가 <code>closed</code>인 경우 섀도우 트리의 노드는 포함하지 않습니다.</dd> + <dt>{{domxref("Event.preventDefault()")}}</dt> + <dd>취소 가능한 경우 이벤트를 취소합니다.</dd> + <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt> + <dd>이 특정 이벤트에 대해서 다른 모든 수신기의 호출을 방지합니다. 같은 요소에 부착된 수신기는 물론 캡처 단계 등 이후에 순회활 요소에 부착된 수신기도 이 이벤트를 받지 않습니다.</dd> + <dt>{{domxref("Event.stopPropagation()")}}</dt> + <dd>이벤트의 DOM 내 추가 확산을 방지합니다.</dd> +</dl> + +<div class="hidden"> +<h3 id="더_이상_사용되지_않는_메소드">더 이상 사용되지 않는 메소드</h3> + +<dl> + <dt>{{domxref("Event.createEvent()")}} {{deprecated_inline}}</dt> + <dd>Creates a new event, which must then be initialized by calling its <code>initEvent()</code> method.</dd> + <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt> + <dd>생성된 이벤트의 값을 초기화합니다. 이벤트가 이미 디스패치되고 있다면, 이 메소드는 아무것도 하지 않습니다.</dd> + <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>{{domxref("Event.defaultPrevented")}}의 값을 반환합니다.</dd> + <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>이벤트 확산을 방지합니다. {{domxref("event.stopPropagation")}}을 사용하세요.</dd> + <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>이벤트 확산을 방지합니다. {{domxref("event.stopPropagation")}}을 사용하세요.</dd> +</dl> +</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>명세</th> + <th>상태</th> + <th>코멘트</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.Event")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>사용 가능한 이벤트 유형: <a href="/ko/docs/Web/Events">이벤트 참고서</a></li> + <li><a href="/ko/docs/Web/API/Event/Comparison_of_Event_Targets">이벤트 대상의 비교</a> (<code>target</code> vs <code>currentTarget</code> vs <code>relatedTarget</code> vs <code>originalTarget</code>)</li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/Guide/Events/Creating_and_triggering_events">이벤트 생성 및 트리거</a></li> +</ul> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{domxref("Event")}} 인터페이스의 읽기 전용 속성인 <strong><code>isTrusted</code></strong>는, 이벤트가 사용자 행위에 의하여 발생되었으면 <code>true</code>이고 이벤트가 스크립트로 인해 생성 또는 수정되었거나 <code>dispatchEvent</code>를 통해 보내졌으면 <code>false</code>인 논리 값입니다. 이것이 <code>true</code>인 이벤트는 <strong>신뢰된다</strong>고 표현합니다.</p> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="syntaxbox">var bool = event.isTrusted; +</pre> + +<h2 id="예제">예제</h2> + +<pre> if(event.isTrusted) + { + // 이 이벤트는 신뢰됩니다. + } + else + { + // 이 이벤트는 신뢰되지 않습니다. + } +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + <td>이벤트가 신뢰되기 위한 요건을 추가하였으나 <code>isTrusted</code> 속성을 정의하지는 않았습니다.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.Event.isTrusted")}}</p> 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 +--- +<p>{{ ApiRef() }}</p> + +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">개요</h3> + +<p>이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소합니다.</p> + +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">구문</h3> + +<pre class="eval"><em>event</em>.preventDefault() +</pre> + +<h3 id=".E4.BE.8B" name=".E4.BE.8B">예제</h3> + +<p>다음의 예제에서는 체크박스를 클릭했을 때 발생하는 동작을 멈추는 방법을 살펴보겠습니다. </p> + +<pre><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> +</pre> + +<p><code>preventDefault의 예제를 </code><a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;">여기</a><code>에서 확인할 수 있습니다.</code></p> + +<p>아래의 예제에서는, preventDefault() 를 사용해서 올바르지 않은 텍스트가 입력란에 입력되는것을 막는 방법을 설명하고 있습니다.</p> + +<pre><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> +</pre> + +<h3 id=".E6.B3.A8.E6.84.8F.E7.82.B9" name=".E6.B3.A8.E6.84.8F.E7.82.B9">주의</h3> + +<p>이벤트를 취소하는 도중에 preventDefault를 호출하게되면, 일반적으로는 브라우저의 구현에 의해 처리되는 기존의 액션이 동작하지 않게되고, 그 결과 이벤트가 발생하지 않게됩니다.</p> + +<p>이벤트의 취소가능 여부는 <a href="/ko/DOM/event.cancelable" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="ko/DOM/event.cancelable">event.cancelable</a>를 사용해서 확인할 수 있습니다. 취소불가능한 이벤트에 대해서 preventDefault를 호출해도 결과는 없습니다.</p> + +<p>preventDefault는 DOM을 통한 이벤트의 전파를 막지않습니다. 전파를 막을때는 <a href="/ko/docs/Web/API/Event/stopPropagation" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="ko/DOM/event.stopPropagation">event.stopPropagation</a>를 사용해주세요.</p> + +<h3 id=".E4.BB.95.E6.A7.98.E6.9B.B8" name=".E4.BB.95.E6.A7.98.E6.9B.B8">사양</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-preventDefault">DOM Level 2 Events: preventDefault</a></p> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<p><code>event.stopImmediatePropagation()</code> 는 같은 이벤트에서 다른 리스너들이 불려지는 것을 막습니다. </p> + +<h2 id="문법">문법</h2> + +<pre class="eval"><em>event</em>.stopImmediatePropagation(); +</pre> + +<h2 id="주석">주석</h2> + +<p>만약 다양한 리스너들이 같은 이벤트타입을 위한 같은 요소에 소속되어 있다면 그들은 추가 된 순서대로 불리게 될 것입니다. 만약 <code>event.stopImmediatePropagation()을 호출하면, 남아있는 리스너들이 불리는 일이 없을 것입니다.</code></p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM4', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("6.0")}}</td> + <td>{{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatIE(9.0)}}</td> + <td>{{CompatOpera("15.0")}}</td> + <td>{{CompatSafari("5.0")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<p>이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><em>event</em>.stopPropagation();</pre> + +<h2 id="예시">예시</h2> + +<p>DOM에서 이 방법과 이벤트 전파의 더욱 상세한 예시를 위한 예제 5: <a href="https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Event Propagation</a> 를 보세요.</p> + +<h2 id="주석">주석</h2> + +<p>이벤트 흐름의 설명을 위한 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">DOM 명세</a> 를 보세요. ( <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM 레벨 3 이벤트 초안</a>에는 삽화가 들어가 있습니다.)</p> + +<p><a href="/en-US/docs/Web/API/event.preventDefault">preventDefault</a>는 이벤트의 기본적인 동작(캡쳐링과 버블링)이 일어나는 것을 막기위해 보완적으로 사용되는 방법입니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> 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 +--- +<p>{{ApiRef("DOM")}}</p> + +<p>{{domxref("Event")}} interface의 <code><strong>target</strong></code> 속성은 event가 전달한 객체에 대한 참조입니다. 이는 이벤트의 버블링 또는 캡처 단계에서 이벤트 핸들러를 호출하는 {{domxref("Event.currentTarget")}}와 다릅니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">theTarget = event.target</pre> + +<h3 id="Value">Value</h3> + +<p>{{domxref("EventTarget")}}</p> + +<h2 id="Example">Example</h2> + +<p><code>event.target</code> 속성을 사용하여 <strong>event delegation</strong>을 구현할 수 있습니다.</p> + +<pre class="brush: js notranslate">// 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); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Event.target")}}</p> + +<h2 id="Compatibility_notes">Compatibility notes</h2> + +<p>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 <code>target</code> property, and it has the same semantics as <code>event.target</code>.</p> + +<pre class="brush: js notranslate">function hide(e) { + // Support IE6-8 + var target = e.target || e.srcElement; + target.style.visibility = 'hidden'; +} +</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a></li> +</ul> |