diff options
| -rw-r--r-- | files/ko/web/api/event/cancelable/index.md | 68 | ||||
| -rw-r--r-- | files/ko/web/api/event/cancelbubble/index.md | 48 | ||||
| -rw-r--r-- | files/ko/web/api/event/event/index.md | 85 | ||||
| -rw-r--r-- | files/ko/web/api/event/eventphase/index.md | 246 | ||||
| -rw-r--r-- | files/ko/web/api/event/index.md | 323 | ||||
| -rw-r--r-- | files/ko/web/api/event/istrusted/index.md | 60 | ||||
| -rw-r--r-- | files/ko/web/api/event/preventdefault/index.md | 168 | ||||
| -rw-r--r-- | files/ko/web/api/event/stopimmediatepropagation/index.md | 63 | ||||
| -rw-r--r-- | files/ko/web/api/event/stoppropagation/index.md | 55 | ||||
| -rw-r--r-- | files/ko/web/api/event/target/index.md | 103 |
10 files changed, 525 insertions, 694 deletions
diff --git a/files/ko/web/api/event/cancelable/index.md b/files/ko/web/api/event/cancelable/index.md index 4c3154cebe..44ba56459a 100644 --- a/files/ko/web/api/event/cancelable/index.md +++ b/files/ko/web/api/event/cancelable/index.md @@ -1,23 +1,55 @@ --- -title: event.cancelable +title: Event.cancelable slug: Web/API/Event/cancelable tags: - - DOM - - Gecko - - Gecko DOM Reference + - Property + - Read-only + - Reference +browser-compat: api.Event.cancelable translation_of: Web/API/Event/cancelable --- -<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> +{{ ApiRef("DOM") }} + +{{domxref("Event")}} 인터페이스의 **`cancelable`** 읽기 전용 속성은 이벤트의 취소가 가능한지를 나타냅니다. + +이벤트가 취소 불가능한 경우, 해당 이벤트의 `cancelable` 속성은 `false`이며 수신기에서 이벤트의 발생을 멈출 수 없습니다. + +취소 가능한 브라우저 내장 이벤트는 대부분 사용자가 페이지와 상호작용해서 발생하는 이벤트입니다. 예컨대 {{event("click")}}, {{event("scroll")}}, {{event("beforeunload")}} 이벤트를 취소하게 되면, 각각 사용자가 어떤 요소를 클릭하는 것, 페이지를 스크롤하는 것, 페이지에서 나가는 것을 막게 됩니다. + +사용자 JavaScript 코드에서 생성하는 [합성 이벤트](/en-US/docs/Web/API/Event/Event)의 경우, 이벤트를 초기화할 때 취소 가능 여부를 지정할 수 있습니다. + +이벤트를 취소하려면 이벤트의 {{domxref("Event.preventDefault()", "preventDefault()")}} 메서드를 호출하세요. 해당 이벤트에 대한 기본 동작을 실행하지 않게 됩니다. + +다양한 종류의 이벤트를 처리해야 하는 처리기의 경우 `preventDefault()`를 호출하기 전에 먼저 `cancelable` 속성의 값을 검사해야 할 수 있습니다. + +## 값 + +이벤트를 취소할 수 있으면 `true`. + +## 예제 + +브라우저 제공자들은 {{event("wheel")}} 이벤트를 [최초 수신 시점에만 취소할 수 있도록](https://github.com/WICG/interventions/issues/33) 제안하고 있습니다. 즉, 두 번째 `wheel` 이벤트부터는 취소할 수 없습니다. + +```js +function preventScrollWheel(event) { + if (typeof event.cancelable !== 'boolean' || event.cancelable) { + // 이벤트를 취소할 수 있으므로 취소함 + event.preventDefault(); + } else { + // 이벤트를 취소할 수 없음 + // preventDefault() 호출이 안전하지 않음 + console.warn(`The following event couldn't be canceled:`); + console.dir(event); + } +} + +document.addEventListener('wheel', preventScrollWheel); +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} diff --git a/files/ko/web/api/event/cancelbubble/index.md b/files/ko/web/api/event/cancelbubble/index.md index 89820f5ec3..5a9a4141fa 100644 --- a/files/ko/web/api/event/cancelbubble/index.md +++ b/files/ko/web/api/event/cancelbubble/index.md @@ -1,42 +1,30 @@ --- title: Event.cancelBubble slug: Web/API/Event/cancelBubble +tags: + - Property + - Reference + - Deprecated +browser-compat: api.Event.cancelBubble translation_of: Web/API/Event/cancelBubble --- -<p>{{APIRef("DOM Events")}}</p> +{{APIRef("DOM Events")}} {{Deprecated_Header}} -<p><strong>Event.cancelBubble</strong> 속성은 {{domxref("Event.stopPropagation()")}}의 별칭입니다. 이벤트 핸들러에서 반환되기 전에 값을 true로 설정하면 이벤트가 전파되지 않습니다.</p> +**Event.cancelBubble** 속성은 {{domxref("Event.stopPropagation()")}}의 별칭입니다. 이벤트 핸들러에서 반환되기 전에 값을 true로 설정하면 이벤트가 전파되지 않습니다. -<p>Syntax</p> +## 예제 -<pre class="syntaxbox">event.cancelBubble = <em>bool;</em> -<em>var bool</em> = event.cancelBubble; -</pre> +```js +elem.onclick = function(event) { + // Do cool things here + event.cancelBubble = true; +} +``` -<h2 id="Example">Example</h2> +## 명세 -<pre>elem.onclick = function(e) { - // do cool things here - e.cancelBubble = true; -}</pre> +{{Specifications}} -<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>{{Compat("api.Event.cancelBubble")}}</p> +{{Compat}} diff --git a/files/ko/web/api/event/event/index.md b/files/ko/web/api/event/event/index.md index 5ba8e6a6c4..0542cb6198 100644 --- a/files/ko/web/api/event/event/index.md +++ b/files/ko/web/api/event/event/index.md @@ -2,76 +2,57 @@ title: Event() slug: Web/API/Event/Event tags: - - API - Constructor - - DOM - - Event - Reference +browser-compat: api.Event.Event translation_of: Web/API/Event/Event --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p><code><strong>Event()</strong></code> constructor는 새로운 {{domxref("Event")}} 객체를 생성합니다.</p> +**`Event()`** 생성자는 새로운 {{domxref("Event")}} 객체를 생성합니다. 생성자로 생성한 이벤트는 브라우저가 생성하는 이벤트와 구분해서 합성 이벤트(synthetic event)라고 부르며, [스크립트에서 발송할 수 있습니다](/ko/docs/Web/Events/Creating_and_triggering_events). -<h2 id="Syntax">Syntax</h2> +## 구문 -<pre class="syntaxbox">new Event(<var>typeArg</var>[, <var>eventInit</var>]);</pre> +```js +new Event(typeArg) +new Event(typeArg, eventInit); +``` -<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> +- `typeArg` + - : 이벤트의 이름을 나타내는 문자열입니다. +- `eventInit` {{optional_inline}} + - : 다음 속성을 포함하는 객체입니다. + - `bubbles` {{optional_inline}} + - : 이벤트의 버블링 여부를 나타내는 불리언 값입니다. 기본 값은 `false`입니다. + - `cancelable` {{optional_inline}} + - : 이벤트를 취소할 수 있는지 나타내는 불리언 값입니다. 기본 값은 `false`입니다. + - `composed` {{optional_inline}} + - : 이벤트가 섀도 루트(shadow root) 바깥의 이벤트 수신기로도 전달될지 나타내는 불리언 값입니다. {{domxref("Event.composed")}}에서 자세한 정보를 확인하세요. 기본 값은 `false`입니다. -<h2 id="Example">Example</h2> +## 예제 -<pre class="brush: js">// create a look event that bubbles up and cannot be canceled +```js +// 버블링 가능하고 취소 불가능한 look 이벤트 생성 -var evt = new Event("look", {"bubbles":true, "cancelable":false}); +const evt = new Event("look", {"bubbles":true, "cancelable":false}); document.dispatchEvent(evt); -// event can be dispatched from any element, not only the document +// document 외의 다른 요소에서도 이벤트 발송 가능 myDiv.dispatchEvent(evt); -</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> +{{Specifications}} -<h2 id="Browser_compatibility">Browser compatibility</h2> +## 브라우저 호환성 +{{Compat}} +## 같이 보기 -<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> +- {{domxref("Event")}} +- {{domxref("EventTarget.dispatchEvent()")}} +- [이벤트 생성 및 발동](/en-US/docs/Web/Events/Creating_and_triggering_events) diff --git a/files/ko/web/api/event/eventphase/index.md b/files/ko/web/api/event/eventphase/index.md index 895222832d..dcfe4c3e7f 100644 --- a/files/ko/web/api/event/eventphase/index.md +++ b/files/ko/web/api/event/eventphase/index.md @@ -1,86 +1,60 @@ --- title: Event.eventPhase slug: Web/API/Event/eventPhase +tags: + - Property + - Read-only + - Reference +browser-compat: api.Event.eventPhase translation_of: Web/API/Event/eventPhase --- -<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 { +{{ApiRef("DOM")}} + +{{domxref("Event")}} 인터페이스의 **`eventPhase`** 읽기 전용 속성은 현재 평가 중인 이벤트 흐름 단계를 나타냅니다. + +## 값 + +이벤트 흐름의 단계를 나타내는 정수 값을 반환합니다. 가능한 값은 다음과 같습니다. + +- `Event.NONE (0)` + - : 이 이벤트는 현재 처리 중이 아닙니다. +- `Event.CAPTURING_PHASE (1)` + - : 이벤트가 대상의 부모 객체를 통해 전파 중입니다. 이 단계는 {{domxref("Window")}}에서 시작해서, {{domxref("Document")}}, {{domxref("HTMLHtmlElement")}}를 거쳐 이벤트가 대상의 부모에 도달할 때까지 지속됩니다. {{domxref("EventTarget.addEventListener()")}}로 등록한 [이벤트 수신기](/ko/docs/Web/API/EventListener) 중 캡처 모드로 등록한 수신기는 이 단계에서 발동합니다. +- `Event.AT_TARGET (2)` + - : 이벤트가 [이벤트 대상](/ko/docs/Web/API/EventTarget)에 도착했습니다. {{domxref("Event.bubbles")}}가 `false`면 `Event.AT_TARGET` 단계가 끝남과 동시에 이벤트 처리도 마칩니다. +- `Event.BUBBLING_PHASE (3)` + - : 이벤트가 대상의 조상을 따라 역순으로 전파 중입니다. 이 단계는 대상의 부모에서 시작해서 마침내 {{domxref("Window")}}에 도달할 때까지 지속됩니다. 이 동작을 버블링이라고 부르며, {{domxref("Event.bubbles")}}가 `true`여야 발생합니다. [이벤트 수신기](/ko/docs/Web/API/EventListener) 중 캡처 모드가 아닌 수신기는 이 단계에서 발동합니다. + + +## 예제 + +### HTML + +```html +<h4>이벤트 전파 체인</h4> +<ul> + <li>'d1'을 클릭하세요</li> + <li>이벤트의 전파 과정을 확인하세요</li> + <li>다음 div를 클릭해서 위의 과정을 반복하세요</li> + <li>캡처 모드를 변경하세요</li> + <li>위의 과정을 반복하세요</li> +</ul> +<input type="checkbox" id="chCapture" /> +<label for="chCapture">캡처 사용</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 + +```css +div { margin: 20px; padding: 4px; border: thin black solid; @@ -91,89 +65,89 @@ translation_of: Web/API/Event/eventPhase padding: 8px; background-color:white; font-size:80%; -}</pre> +} +``` + +### JavaScript -<h3 id="JavaScript_Content">JavaScript Content</h3> +```js +let clear = false, + divInfo = null, + divs = null, + useCapture = false; -<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"); + divInfo = document.getElementById('divInfo') + divs = document.getElementsByTagName('div') + chCapture = document.getElementById('chCapture') chCapture.onclick = function () { - RemoveListeners(); - AddListeners(); + RemoveListeners() + AddListeners() } - Clear(); - AddListeners(); + Clear() + AddListeners() } function RemoveListeners() { - for (var i = 0; i < divs.length; i++) { - var d = divs[i]; + for (let i = 0; i < divs.length; i++) { + let d = divs[i] if (d.id != "divInfo") { - d.removeEventListener("click", OnDivClick, true); - d.removeEventListener("click", OnDivClick, false); + d.removeEventListener("click", OnDivClick, true) + d.removeEventListener("click", OnDivClick, false) } } } function AddListeners() { - for (var i = 0; i < divs.length; i++) { - var d = divs[i]; + for (let i = 0; i < divs.length; i++) { + let d = divs[i] if (d.id != "divInfo") { - if (chCapture.checked) - d.addEventListener("click", OnDivClick, true); - else - d.addEventListener("click", OnDivClick, false); - d.onmousemove = function () { clear = true; }; + if (chCapture.checked) { + d.addEventListener("click", OnDivClick, true) + } + else { + d.addEventListener("click", OnDivClick, false) + d.onmousemove = function () { clear = true } + } } } } function OnDivClick(e) { if (clear) { - Clear(); clear = false; + Clear() + clear = false } if (e.eventPhase == 2) e.currentTarget.style.backgroundColor = 'red'; - var level = e.eventPhase == 0 ? "none" : e.eventPhase == 1 ? "capturing" : e.eventPhase == 2 ? "target" : e.eventPhase == 3 ? "bubbling" : "error"; - divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "<br/>"; + const level = + e.eventPhase == 0 ? "없음" : + e.eventPhase == 1 ? "캡처" : + e.eventPhase == 2 ? "대상" : + e.eventPhase == 3 ? "버블" : "오류"; + const p = document.createElement('p') + p.textContent = `${e.currentTarget.id}; eventPhase: ${level}`; + divInfo.appendChild(p); } function Clear() { - for (var i = 0; i < divs.length; i++) { - if (divs[i].id != "divInfo") - divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff"; + for (let i = 0; i < divs.length; i++) { + if (divs[i].id != "divInfo") { + divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff" + } } - divInfo.innerHTML = ''; -}</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> + divInfo.textContent = ''; +} +``` + +### 결과 + +{{EmbedLiveSample('예제', '', '700')}} + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} diff --git a/files/ko/web/api/event/index.md b/files/ko/web/api/event/index.md index 04c4bc5695..15de863b26 100644 --- a/files/ko/web/api/event/index.md +++ b/files/ko/web/api/event/index.md @@ -2,211 +2,126 @@ title: Event slug: Web/API/Event tags: - - API - - DOM - - Event - Interface - Reference - - UI - - 이벤트 +browser-compat: api.Event translation_of: Web/API/Event --- -<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> +{{APIRef("DOM")}} + +**`Event`** 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다. + +이벤트는 마우스를 클릭하거나 키보드를 누르는 등 사용자의 액션에 의해 발생할 수도 있고, 비동기적 작업의 진행을 나타내기 위해서 API가 생성할 수도 있습니다. 요소의 {{domxref("HTMLElement.click()")}} 메서드를 호출하거나, 이벤트를 정의한 후 특정 대상에 대해서 {{domxref("EventTarget.dispatchEvent()")}}로 발송하는 등 프로그래밍적으로도 만들어낼 수 있습니다. + +이벤트에는 다양한 종류가 있으며 일부는 `Event` 인터페이스의 파생 인터페이스를 사용합니다. `Event` 자체는 모든 이벤트에 공통된 속성과 메서드를 가집니다. + +많은 DOM 요소는 이벤트를 받고("수신"), 받은 이벤트를 "처리"할 수 있습니다. 이벤트 처리기는 주로 {{domxref("EventTarget.addEventListener()")}}를 사용해서 다양한 요소(`<button>`, `<div>`, `<span>`, 등등)에 "부착"합니다. 올바르게 부착한 경우, {{domxref("EventTarget.removeEventListener", "removeEventListener()")}}를 사용하면 반대로 제거할 수도 있습니다. + +> **참고:** 하나의 요소가 다수의 처리기를 가질 수 있습니다. 완전히 동일한 이벤트에 여러 처리기를 따로 등록할 수 있습니다. 예컨대 광고 모듈과 통계 모듈이 각각 비디오 시청 이벤트에 대한 처리기를 부착하는 것이 가능합니다. + +중첩된 많은 요소가 서로 자신만의 이벤트 처리기를 가지고 있으면 이벤트의 처리가 매우 복잡해질 수 있습니다. 특히 부모 요소와 자식 요소가 화면에서 차지하는 영역이 겹쳐서 (클릭 등의) 이벤트가 양쪽 모두에서 발생하는 경우, 이벤트 처리 순서는 각 처리기의 [이벤트 버블링과 캡처](/ko/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture) 설정에 따라 달라집니다. + +## Event 기반 인터페이스 + +다음은 `Event` 인터페이스에서 파생된 인터페이스의 목록입니다. + +모든 이벤트 인터페이스 이름은 "Event"로 끝난다는 사실도 확인할 수 있습니다. + +- {{domxref("AnimationEvent")}} +- {{domxref("AudioProcessingEvent")}} +- {{domxref("BeforeUnloadEvent")}} +- {{domxref("BlobEvent")}} +- {{domxref("ClipboardEvent")}} +- {{domxref("CloseEvent")}} +- {{domxref("CompositionEvent")}} +- {{domxref("CustomEvent")}} +- {{domxref("DeviceMotionEvent")}} +- {{domxref("DeviceOrientationEvent")}} +- {{domxref("DeviceProximityEvent")}} +- {{domxref("DragEvent")}} +- {{domxref("ErrorEvent")}} +- {{domxref("FetchEvent")}} +- {{domxref("FocusEvent")}} +- {{domxref("FormDataEvent")}} +- {{domxref("GamepadEvent")}} +- {{domxref("HashChangeEvent")}} +- {{domxref("HIDInputReportEvent")}} +- {{domxref("IDBVersionChangeEvent")}} +- {{domxref("InputEvent")}} +- {{domxref("KeyboardEvent")}} +- {{domxref("MediaStreamEvent")}} +- {{domxref("MessageEvent")}} +- {{domxref("MouseEvent")}} +- {{domxref("MutationEvent")}} +- {{domxref("OfflineAudioCompletionEvent")}} +- {{domxref("PageTransitionEvent")}} +- {{domxref("PaymentRequestUpdateEvent")}} +- {{domxref("PointerEvent")}} +- {{domxref("PopStateEvent")}} +- {{domxref("ProgressEvent")}} +- {{domxref("RTCDataChannelEvent")}} +- {{domxref("RTCPeerConnectionIceEvent")}} +- {{domxref("StorageEvent")}} +- {{domxref("SubmitEvent")}} +- {{domxref("SVGEvent")}} +- {{domxref("TimeEvent")}} +- {{domxref("TouchEvent")}} +- {{domxref("TrackEvent")}} +- {{domxref("TransitionEvent")}} +- {{domxref("UIEvent")}} +- {{domxref("UserProximityEvent")}} +- {{domxref("WebGLContextEvent")}} +- {{domxref("WheelEvent")}} + +## 생성자 + +- {{domxref("Event.Event", "Event()")}} + - : `Event` 객체를 생성하고 반환합니다. + +## 속성 + +- {{domxref("Event.bubbles")}} {{readonlyinline}} + - : 이벤트가 DOM을 타고 버블링되는지 나타냅니다. +- {{domxref("Event.cancelable")}} {{readonlyinline}} + - : 이벤트를 취소할 수 있는지 나타냅니다. +- {{domxref("Event.composed")}} {{ReadOnlyInline}} + - : 이벤트가 섀도 DOM과 일반 DOM의 경계를 넘어 버블링할 수 있는지 나타내는 불리언입니다. +- {{domxref("Event.currentTarget")}} {{readonlyinline}} + - : 이벤트의 현재 대상, 즉 이벤트의 전파 과정 중 이벤트가 현재 위치한 객체를 가리킵니다. '리타겟팅'(retargeting)으로 인해 중간에 값이 바뀌었을 수 있습니다. +- {{domxref("Event.defaultPrevented")}} {{readonlyinline}} + - : 이벤트의 {{domxref("event.preventDefault()")}} 호출이 이벤트를 취소했는지 나타냅니다. +- {{domxref("Event.eventPhase")}} {{readonlyinline}} + - : 이벤트 흐름에서 현재 처리 중인 단계를 나타냅니다. `NONE`, `CAPTURIING_PHASE`, `AT_TARGET`, `BUBBLING_PHASE` 중 하나입니다. +- {{domxref("Event.isTrusted")}} {{readonlyinline}} + - : 이벤트가 (사용자 클릭 등으로 인해) 브라우저에 의해 초기화됐는지, (생성자 등) 스크립트에 의해 초기화됐는지 나타냅니다. +- {{domxref("Event.target")}} {{readonlyinline}} + - : 이벤트가 처음에 발생한 대상을 가리킵니다. +- {{domxref("Event.timeStamp")}} {{readonlyinline}} + - : 이벤트가 생성된 시간(밀리초)입니다. 과거에는 명세 상 UNIX 시간과 이벤트 생성 시점까지의 차이였지만 실제 구현은 브라우저마다 달랐습니다. 지금은 {{domxref("DOMHighResTimeStamp")}}를 반환합니다. +- {{domxref("Event.type")}} {{readonlyinline}} + - : 이벤트의 이름입니다. 대소문자를 구분하지 않습니다. + +## 메서드 + +- {{domxref("Event.composedPath()")}} + - : 이벤트의 경로, 즉 수신기가 발동했거나 발동할 모든 객체의 배열을 반환합니다. 섀도 루트의 {{domxref("ShadowRoot.mode")}}가 `closed`인 경우 섀도 트리의 노드는 포함하지 않습니다. +- {{domxref("Event.preventDefault()")}} + - : 취소 가능한 경우 이벤트를 취소합니다. +- {{domxref("Event.stopImmediatePropagation()")}} + - : 이 특정 이벤트에 대해서 다른 모든 수신기의 호출을 방지합니다. 같은 요소에 부착된 수신기는 물론 캡처링과 버블링 단계에서 후속으로 호출할 수신기의 발동도 막습니다. +- {{domxref("Event.stopPropagation()")}} + - : 이벤트의 DOM 내 추가 전파를 방지합니다. + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- 사용 가능한 이벤트 유형 목록: [이벤트 참고서](/ko/docs/Web/Events) +- [이벤트 대상의 비교](/ko/docs/Web/API/Event/Comparison_of_Event_Targets) (`target` vs `currentTarget` vs `relatedTarget` vs `originalTarget`) +- [이벤트 생성 및 발동](/ko/docs/Web/Events/Creating_and_triggering_events) diff --git a/files/ko/web/api/event/istrusted/index.md b/files/ko/web/api/event/istrusted/index.md index afce93c401..46afd25b2c 100644 --- a/files/ko/web/api/event/istrusted/index.md +++ b/files/ko/web/api/event/istrusted/index.md @@ -2,60 +2,30 @@ title: Event.isTrusted slug: Web/API/Event/isTrusted tags: - - API - - Event - Property - Read-only - Reference - - 속성 - - 이벤트 +browser-compat: api.Event.isTrusted translation_of: Web/API/Event/isTrusted --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>{{domxref("Event")}} 인터페이스의 읽기 전용 속성인 <strong><code>isTrusted</code></strong>는, 이벤트가 사용자 행위에 의하여 발생되었으면 <code>true</code>이고 이벤트가 스크립트로 인해 생성 또는 수정되었거나 <code>dispatchEvent</code>를 통해 보내졌으면 <code>false</code>인 논리 값입니다. 이것이 <code>true</code>인 이벤트는 <strong>신뢰된다</strong>고 표현합니다.</p> +{{domxref("Event")}} 인터페이스의 **`isTrusted`** 읽기 전용 속성은 사용자 액션에 의해 생성된 이벤트에서는 `ture`, 스크립트에서 생성 또는 수정했거나 {{domxref("EventTarget.dispatchEvent()")}}로 발송한 이벤트의 경우 `false`인 불리언 값입니다. -<h2 id="Syntax" name="Syntax">구문</h2> +## 예제 -<pre class="syntaxbox">var bool = event.isTrusted; -</pre> +```js +if (e.isTrusted) { + // 신뢰할 수 있는 이벤트 +} else { + // 신뢰 불가능한 이벤트 +} +``` -<h2 id="예제">예제</h2> +## 명세 -<pre> if(event.isTrusted) - { - // 이 이벤트는 신뢰됩니다. - } - else - { - // 이 이벤트는 신뢰되지 않습니다. - } -</pre> +{{Specifications}} -<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> +{{Compat}} diff --git a/files/ko/web/api/event/preventdefault/index.md b/files/ko/web/api/event/preventdefault/index.md index 71f4fdb229..56f1a309ba 100644 --- a/files/ko/web/api/event/preventdefault/index.md +++ b/files/ko/web/api/event/preventdefault/index.md @@ -1,93 +1,151 @@ --- -title: event.preventDefault +title: Event.preventDefault() slug: Web/API/Event/preventDefault +tags: + - Method + - Reference +browser-compat: api.Event.preventDefault translation_of: Web/API/Event/preventDefault --- -<p>{{ ApiRef() }}</p> +{{apiref("DOM")}} -<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">개요</h3> +{{domxref("Event")}} 인터페이스의 **`preventDefault()`** 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 {{Glossary("user agent", "사용자 에이전트")}}의 기본 동작을 실행하지 않도록 지정합니다. -<p>이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소합니다.</p> +`preventDefault()`를 호출한 이벤트도 수신기 중 하나에서 {{domxref("Event.stopPropagation", "stopPropagation()")}} 또는 {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}을 호출하기 전까지는 다른 이벤트와 마찬가지로 전파됩니다. -<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">구문</h3> +아래에도 적혀있지만, `cancelable: true` 없이 {{domxref("EventTarget.dispatchEvent()")}}로 발송한 이벤트처럼 취소 불가능한 이벤트의 경우, `preventDefault()`를 호출해도 아무 효과도 나타나지 않습니다. -<pre class="eval"><em>event</em>.preventDefault() -</pre> +## 구문 -<h3 id=".E4.BE.8B" name=".E4.BE.8B">예제</h3> +``` +event.preventDefault(); +``` -<p>다음의 예제에서는 체크박스를 클릭했을 때 발생하는 동작을 멈추는 방법을 살펴보겠습니다. </p> +### 기본 클릭 동작 방지하기 -<pre><html> -<head> -<title>preventDefault 예제</title> +체크박스의 클릭 기본 동작은 체크박스를 체크하거나 체크 해제하는 것입니다. 이 예제는 체크박스의 클릭 기본 동작을 방지하는 모습을 보입니다. -<script type="text/javascript"> +#### JavaScript -function stopDefAction(evt) { - evt.preventDefault(); -} -</script> -</head> +```js +document.querySelector("#id-checkbox").addEventListener("click", function(event) { + document.getElementById("output-box").innerHTML += "죄송합니다! <code>preventDefault()</code> 때문에 체크할 수 없어요!<br>"; + event.preventDefault(); +}, false); +``` -<body> +#### HTML -<p>체크박스 컨트롤을 클릭해 주세요</p> +```html +<p>체크박스를 클릭해주세요.</p> -<form> -<input type="checkbox" onclick="stopDefAction(event);"/> -<label for="checkbox">체크박스</label> -</form> +<form> + <label for="id-checkbox">체크박스:</label> + <input type="checkbox" id="id-checkbox"/> +</form> -</body> -</html> -</pre> +<div id="output-box"></div> +``` -<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> +{{EmbedLiveSample("기본_클릭_동작_방지하기")}} -<pre><html> -<head> -<title>preventDefault 예제</title> +### 키 입력이 입력 칸을 채우는 것을 방지하기 -<script type="text/javascript"> +이 예제에서는 `preventDefault()`를 사용해서 사용자가 입력 칸에 원하지 않는 문자를 입력하지 못하도록 합니다. 실제로 이런 기능이 필요할 땐 [내장 HTML 양식 검증](/ko/docs/Learn/Forms/Form_validation)을 사용하세요. -function checkName(evt) { -var charCode = evt.charCode; +#### HTML + +```html +<div class="container"> + <p>이름을 입력하세요. 영문 소문자만 사용할 수 있습니다.</p> + + <form> + <input type="text" id="my-textbox"> + </form> +</div> +``` + +#### CSS + +사용자가 잘못된 키를 누를 때 보여줄 경고창을 그리기 위한 CSS입니다. + +```css +.warning { + border: 2px solid #f39389; + border-radius: 2px; + padding: 10px; + position: absolute; + background-color: #fbd8d4; + color: #3b3c40; +} +``` + +#### JavaScript + +이제 실제 작업을 수행할 JavaScript 코드입니다. 우선 {{event("keypress")}} 이벤트를 수신합니다. - if (charCode != 0) { - if (charCode < 97 || charCode > 122) { +```js +var myTextbox = document.getElementById('my-textbox'); +myTextbox.addEventListener('keypress', checkName, false); +``` + +`checkName()` 함수는 사용자가 누른 키를 관찰해서 허용할지, 허용하지 않을지 결정합니다. + +```js +function checkName(evt) { + var charCode = evt.charCode; + if (charCode != 0) { + if (charCode < 97 || charCode > 122) { evt.preventDefault(); - alert("소문자만 입력할 수 있습니다." + "\n" - + "charCode: " + charCode + "\n" + displayWarning( + "영문 소문자만 입력하세요." + + "\n" + "charCode: " + charCode + "\n" ); } } } +``` + +`displayWarning()` 함수는 경고창을 띄웁니다. 완벽한 모습은 아니지만 예제로는 충분합니다. + +```js +var warningTimeout; +var warningBox = document.createElement("div"); +warningBox.className = "warning"; -</script> -</head> +function displayWarning(msg) { + warningBox.innerHTML = msg; + + if (document.body.contains(warningBox)) { + window.clearTimeout(warningTimeout); + } else { + // insert warningBox after myTextbox + myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling); + } + + warningTimeout = window.setTimeout(function() { + warningBox.parentNode.removeChild(warningBox); + warningTimeout = -1; + }, 2000); +} +``` -<body> +#### 결과 -<p>당신의 이름을 소문자만으로 입력해주세요.</p> -<form> -<input type="text" onkeypress="checkName(event);"/> -</form> +{{ EmbedLiveSample('키_입력이_입력_칸을_채우는_것을_방지하기', 600, 200) }} -</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> +이벤트 흐름의 어떤 단계에서라도 `preventDefault()`를 호출하면 이벤트를 취소합니다. 즉, 이벤트에 대한 구현체의 기본 동작을 실행하지 않습니다. -<p>이벤트를 취소하는 도중에 preventDefault를 호출하게되면, 일반적으로는 브라우저의 구현에 의해 처리되는 기존의 액션이 동작하지 않게되고, 그 결과 이벤트가 발생하지 않게됩니다.</p> +{{domxref("Event.cancelable")}}을 사용해서 이벤트의 취소 가능 여부를 알아낼 수 있습니다. 취소 불가능한 이벤트에 대해 `preventDefault()`를 호출해도 아무 효과가 없습니다. -<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> +{{Specifications}} -<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> +{{Compat}} diff --git a/files/ko/web/api/event/stopimmediatepropagation/index.md b/files/ko/web/api/event/stopimmediatepropagation/index.md index 56b27d7f18..ef7c77e637 100644 --- a/files/ko/web/api/event/stopimmediatepropagation/index.md +++ b/files/ko/web/api/event/stopimmediatepropagation/index.md @@ -1,45 +1,28 @@ --- title: Event.stopImmediatePropagation() slug: Web/API/Event/stopImmediatePropagation +tags: + - Method + - Reference +browser-compat: 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>{{Compat("api.Event.stopImmediatePropagation")}}</p> +{{APIRef("DOM")}} + +{{domxref("Event")}} 인터페이스의 **`stopImmediatePropagation()`** 메서드는 같은 이벤트에 대해 나머지 수신기가 발동하지 못하도록 방지합니다. + +같은 이벤트 유형에 대한 다수의 수신기를 하나의 요소에 부착한 경우, 각각의 수신기 호출 순서는 부착 순서와 동일합니다. 그 수신기들 중 하나에서 `stopImmediatePropagation()` 메서드를 호출하면 그 이후의 나머지 수신기들은 호출되지 않습니다. + +## 구문 + +```js +event.stopImmediatePropagation(); +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} diff --git a/files/ko/web/api/event/stoppropagation/index.md b/files/ko/web/api/event/stoppropagation/index.md index 6830d39e41..f20ecdab06 100644 --- a/files/ko/web/api/event/stoppropagation/index.md +++ b/files/ko/web/api/event/stoppropagation/index.md @@ -1,53 +1,30 @@ --- title: Event.stopPropagation() slug: Web/API/Event/stopPropagation +tags: + - Method + - Reference +browser-compat: api.Event.stopPropagation translation_of: Web/API/Event/stopPropagation --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다.</p> +{{domxref("Event")}} 인터페이스의 **`stopPropagation()`** 메서드는 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지합니다. 전파를 방지해도 이벤트의 기본 동작은 실행되므로, `stopPropagation()`이 링크나 버튼의 클릭을 막는 것은 아닙니다. 이런 기본 동작을 방지하려면 {{domxref("Event.preventDefault()", "preventDefault()")}} 메서드를 사용하세요. 또한, `stopPropagation()`은 같은 이벤트 대상에 부착한 다른 수신기까지 막지는 않습니다. 이것까지 막으려면 {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}를 사용하세요. -<h2 id="문법">문법</h2> +## 구문 -<pre class="syntaxbox"><em>event</em>.stopPropagation();</pre> +```js +event.stopPropagation(); +``` -<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> +[이벤트 전파](/ko/docs/Web/API/Document_Object_Model/Examples#example_5_event_propagation)를 확인하세요. -<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> +{{Specifications}} -<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>{{Compat("api.Event.stopPropagation")}}</p> +{{Compat}} diff --git a/files/ko/web/api/event/target/index.md b/files/ko/web/api/event/target/index.md index 1fa5ad467e..fffc1d6d1a 100644 --- a/files/ko/web/api/event/target/index.md +++ b/files/ko/web/api/event/target/index.md @@ -2,100 +2,53 @@ title: Event.target slug: Web/API/Event/target tags: - - 돔 - - 레퍼런스 - - 속성 - - 이벤트 - - 타겟 + - Property + - Reference + - Read-only +browser-compat: api.Event.target translation_of: Web/API/Event/target --- -<p>{{ApiRef("DOM")}}</p> +{{ApiRef("DOM")}} -<p>{{domxref("Event")}} interface의 <code><strong>target</strong></code> 속성은 event가 전달한 객체에 대한 참조입니다. 이는 이벤트의 버블링 또는 캡처 단계에서 이벤트 핸들러를 호출하는 {{domxref("Event.currentTarget")}}와 다릅니다.</p> +{{domxref("Event")}} 인터페이스의 **`target`** 속성은 이벤트가 발생한 대상 객체를 가리킵니다. 버블링과 캡처링 단계에서는 {{domxref("Event.currentTarget")}}과 다를 수 있습니다. -<h2 id="Syntax">구문</h2> +### 값 -<pre class="brush: js">const theTarget = someEvent.target</pre> +연관된 {{domxref("EventTarget")}}. -<h3 id="Value">Value</h3> +## 예제 -<p>{{domxref("EventTarget")}}</p> +`event.target` 속성을 사용하여 **이벤트 위임**을 구현할 수 있습니다. -<h2 id="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'); +```js +// 목록 생성 +const ul = document.createElement('ul'); document.body.appendChild(ul); -var li1 = document.createElement('li'); -var li2 = document.createElement('li'); +const li1 = document.createElement('li'); +const 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'; +function hide(evt) { + // e.target은 사용자가 클릭한 <li> 요소를 가리킴 + // 여기서 e.currentTarget은 부모인 <ul>을 가리킬 것 + evt.target.style.visibility = 'hidden'; } -// Attach the listener to the list -// It will fire when each <li> is clicked +// 목록에 수신기 부착 +// 각각의 <li>를 클릭할 때 호출됨 ul.addEventListener('click', hide, false); -</pre> - -<h2 id="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-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">브라우저 호환성</h2> +## 명세 -<p>{{Compat("api.Event.target")}}</p> +{{Specifications}} -<h3 id="Compatibility_notes">호환성 참고</h3> +## 브라우저 호환성 -<p>IE 6–8에서는 이벤트 모델이 다릅니다. 이벤트 리스너는 비표준 - {{domxref('EventTarget.attachEvent()')}} 메서드로 연결됩니다.</p> - -<p>이 모델에서 이벤트 객체는 {{domxref('Event.srcElement')}} 속성 - (<code>target</code> 속성 대신)을 가지며 <code>Event.target</code>과 - 동일한 의미를 갖습니다.</p> - -<pre class="brush: js">function hide(evt) { - // Support IE6-8 - var target = evt.target || evt.srcElement; - target.style.visibility = 'hidden'; -} -</pre> +{{Compat}} -<h2 id="See_also">같이 보기</h2> +## 같이 보기 -<ul> - <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a></li> -</ul> +- [이벤트 대상의 비교](/ko/docs/Web/API/Event/Comparison_of_Event_Targets) |