[CRON] sync translated content

4 files changed, 0 insertions, 551 deletions

diff --git a/files/ko/web/api/detecting_device_orientation/index.html b/files/ko/web/api/detecting_device_orientation/index.html
deleted file mode 100644
index 995997b5ab..0000000000
--- a/files/ko/web/api/detecting_device_orientation/index.html
+++ /dev/null
@@ -1,274 +0,0 @@
----
-title: 기기 방향 감지하기
-slug: Web/API/Detecting_device_orientation
-translation_of: Web/API/Detecting_device_orientation
-original_slug: WebAPI/Detecting_device_orientation
----
-<div>{{SeeCompatTable}}</div>
-
-<h2 id="요약">요약</h2>
-
-<p>웹을 이용 가능한 기기들은 자신들의 방향을 알 수 있게 되었다. 즉, 중력과의 관계에서 자신의 방향의 변화를 나타내는 데이터를 알 수 있다는 뜻이다. 특히, 휴대 전화와 같이 손에 쥐고 쓸 수 있는 기기들은 이 정보를 화면을 수직으로 유지하기 위해 자동으로 회전시키는데 사용할 수 있고, 기기가 회전되어서 폭이 높이보다 길 때는 와이드 스크린으로 표시할 수 있게 된다.</p>
-
-<p>방향 정보를 다루는 두 가지 방법의 JavaScript 이벤트가 있다. 첫 번째는 {{domxref("DeviceOrientationEvent")}}로 가속도계가 기기의 방향의 변화를 감지했을 때 발생한다.  이 방향 이벤트들에 의해 보고되는 데이터를 받아서 처리함으로써, 사용자들이 기기를 움직이여서 생기는 방향과 높이의 변화를 상호 작용적으로 응답할 수 있게 된다.</p>
-
-<p>두 번째 이벤트는 {{domxref("DeviceMotionEvent")}}로 가속도에 변화가 일어났을 때 발생한다. 이 이벤트는 {{domxref("DeviceOrientationEvent")}}와는 방향이 아닌 가속도를 감지하고 있다는 점에서 다르다. 일반적으로{{domxref("DeviceMotionEvent")}}를 감지할 수 있는 센서들은 저장 장치들을 충격으로부터 보호하기 위해 노트북에서 사용되는 센서들을 포함한다. {{domxref("DeviceOrientationEvent")}}는 모바일 기기에서 주로 더 많이 나타난다.</p>
-
-<h2 id="방향_이벤트_처리하기">방향 이벤트 처리하기</h2>
-
-<p>방향의 변화를 받기 위해 여러분이 해야하는 것은 {{ event("deviceorientation") }} 이벤트에 리스너를 등록하는 것 뿐이다:</p>
-
-<pre class="brush: js">window.addEventListener("deviceorientation", handleOrientation, true);
-</pre>
-
-<p>이벤트 리스너를 등록한 후에는 (여기에서는 JavaScript 함수 handleOrientation()), 리스너 함수가 업데이트 된 방향 데이터와 함께 주기적으로 호출된다.</p>
-
-<p>방향 이벤트는 다음 네 개의 값을 가진다:</p>
-
-<ul>
- <li>{{ domxref("DeviceOrientationEvent.absolute") }}</li>
- <li>{{ domxref("DeviceOrientationEvent.alpha") }}</li>
- <li>{{ domxref("DeviceOrientationEvent.beta") }}</li>
- <li>{{ domxref("DeviceOrientationEvent.gamma") }}</li>
-</ul>
-
-<p>이벤트 핸들러 함수는 보통 다음과 같다:</p>
-
-<pre class="brush: js">function handleOrientation(event) {
-  var absolute = event.absolute;
-  var alpha    = event.alpha;
-  var beta     = event.beta;
-  var gamma    = event.gamma;
-
-  // Do stuff with the new orientation data
-}
-</pre>
-
-<h3 id="방향_값_설명">방향 값 설명</h3>
-
-<p>각 축으로부터 보고된 값은 표준 좌표계 축을 중심으로 회전한 양을 가리킨다. 더 자세한 내용은 <a href="/en-US/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a> 문서에 나와있으며, 다음은 이를 간략하게 요약한 것이다.</p>
-
-<ul>
- <li>{{ domxref("DeviceOrientationEvent.alpha") }} 값은 0도부터 360도까지 범위의 z축을 중심으로 한 기기의 움직임을 나타낸다.</li>
- <li>{{ domxref("DeviceOrientationEvent.beta") }} 값은 -180도부터 180도까지 범위의 x축을 줌심으로 한 기기의 움직임을 나타낸다. 이는 기기의 앞뒤 움직임을 나타낸다.</li>
- <li>{{ domxref("DeviceOrientationEvent.gamma") }} 값은 -90도부터 90도까지 범위의 y축을 중심으로 한 기기의 움직임을 나타낸다. 이는 기기의 좌우 움직임을 나타낸다.</li>
-</ul>
-
-<h3 id="방향_예제">방향 예제</h3>
-
-<p>이 예제는 {{event("deviceorientation")}} 이벤트를 지원하고 방향을 감지할 수 있는 기기에서 실행중인 모든 브라우저에서 작동한다.</p>
-
-<p>자 그럼, 정원에 공이 하나 있다고 상상해보자:</p>
-
-<pre class="brush: html">&lt;div class="garden"&gt;
-  &lt;div class="ball"&gt;&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;pre class="output"&gt;&lt;/pre&gt;
-</pre>
-
-<p>이 정원은 가로 세로 200 픽셀이고(그렇다, 작은 정원이다), 정 중앙에 공이 있다:</p>
-
-<pre class="brush: css">.garden {
-  position: relative;
-  width : 200px;
-  height: 200px;
-  border: 5px solid #CCC;
-  border-radius: 10px;
-}
-
-.ball {
-  position: absolute;
-  top   : 90px;
-  left  : 90px;
-  width : 20px;
-  height: 20px;
-  background: green;
-  border-radius: 100%;
-}
-</pre>
-
-<p>이제, 우리가 기기를 움직이면 공도 따라서 움직일 것이다:</p>
-
-<pre class="brush: js">var ball   = document.querySelector('.ball');
-var garden = document.querySelector('.garden');
-var output = document.querySelector('.output');
-
-var maxX = garden.clientWidth  - ball.clientWidth;
-var maxY = garden.clientHeight - ball.clientHeight;
-
-function handleOrientation(event) {
-  var x = event.beta;  // In degree in the range [-180,180]
-  var y = event.gamma; // In degree in the range [-90,90]
-
-  output.innerHTML  = "beta : " + x + "\n";
-  output.innerHTML += "gamma: " + y + "\n";
-
-  // Because we don't want to have the device upside down
-  // We constrain the x value to the range [-90,90]
-  if (x &gt;  90) { x =  90};
-  if (x &lt; -90) { x = -90};
-
-  // To make computation easier we shift the range of
-  // x and y to [0,180]
-  x += 90;
-  y += 90;
-
-  // 10 is half the size of the ball
-  // It center the positionning point to the center of the ball
-  ball.style.top  = (maxX*x/180 - 10) + "px";
-  ball.style.left = (maxY*y/180 - 10) + "px";
-}
-
-window.addEventListener('deviceorientation', handleOrientation);
-</pre>
-
-<p>여기 실제로 실행해 볼 수 있는 예제이다:</p>
-
-<div>{{ EmbedLiveSample('Orientation_example', '230', '260') }}</div>
-
-<div class="warning">
-<p><strong>경고:</strong> Chrome과 Firefox는 동일한 방식으로 각을 다루지 않습니다. 그래서 어떤 축의 방향은 반대가 됩니다.</p>
-</div>
-
-<h2 id="모션_이벤트_처리하기">모션 이벤트 처리하기</h2>
-
-<p>모션 이벤트는 이벤트 이름이 {{ event("devicemotion") }}으로 다르다는 점을 제외하면, 방향 이벤트를 처리하는 방법과 동일하다.</p>
-
-<pre class="brush: js">window.addEventListener("devicemotion", <em>handleMotion</em>, true);</pre>
-
-<p><em>HandleMotion</em> 함수의 파라미터로 넘겨진 {{ domxref("DeviceMotionEvent") }} 객체에 실제로 변화된 정보들이 담겨져 있다.</p>
-
-<p>모션 이벤트는 다음 네 가지 속성을 가진다:</p>
-
-<ul>
- <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li>
- <li>{{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}</li>
- <li>{{ domxref("DeviceMotionEvent.rotationRate") }}</li>
- <li>{{ domxref("DeviceMotionEvent.interval") }}</li>
-</ul>
-
-<h3 id="모션_값_설명">모션 값 설명</h3>
-
-<p>{{ domxref("DeviceMotionEvent") }} 객체는 웹 개발자들에게 기기의 위치와 방향의 변화 속도에 관한 정보를 제공한다. 세 개의 축에 따라 변화한 정보가 제공된다 (자세한 내용은 <a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Orientation and motion data explained</a> 문서를 참조).</p>
-
-<p>{{domxref("DeviceMotionEvent.acceleration","acceleration")}}과 {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}에서, 각 축은 다음에 해당된다:</p>
-
-<ul>
- <li><code>x</code>: 서쪽에서 동쪽으로 나타나는 축을 의미한다</li>
- <li><code>y</code>: 남쪽에서 북쪽으로 나타나는 축을 의미한다</li>
- <li><code>z</code>: 땅에서 수직으로 나타나는 축을 의미한다</li>
-</ul>
-
-<p>{{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}에서, 조금은 다르게, 각 값들은 다음에 해당된다:</p>
-
-<ul>
- <li><code>alpha</code>: 화면(또는 데스크탑의 키보드)에 수직인 축을 따른 회전율을 의미한다</li>
- <li><code>beta</code>: 화면(또는 데스크탑의 키보드)의 평면의 왼쪽에서 오른쪽으로 나타나는 축을 따른 회전율을 의미한다</li>
- <li><code>gamma</code>: 화면(또는 데스크탑의 키보드)의 평면의 아래에서 위쪽으로 나타나는 축을 따른 회전율을 의미한다</li>
-</ul>
-
-<p>마지막으로, {{domxref("DeviceMotionEvent.interval","interval")}}은 기기에서 데이터를 얻을 수 있는 시간 간격(단위는 밀리초)을 의미한다.</p>
-
-<h2 id="스펙">스펙</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('Device Orientation')}}</td>
-   <td>{{Spec2('Device Orientation')}}</td>
-   <td>Initial specification.</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>{{domxref("DeviceOrientationEvent")}}</td>
-   <td>7.0</td>
-   <td>3.6<sup>[1]</sup><br>
-    6</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("DeviceMotionEvent")}}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>6</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatUnknown() }}</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>{{domxref("DeviceOrientationEvent")}}</td>
-   <td>3.0</td>
-   <td>3.6<sup>[1]</sup><br>
-    6</td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>4.2</td>
-  </tr>
-  <tr>
-   <td>{{domxref("DeviceMotionEvent")}}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>6</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td><span style="font-size: 12px; line-height: 18px;">4.2</span></td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h3 id="Gecko_구현_참고_사항">Gecko 구현 참고 사항</h3>
-
-<ol>
- <li>Firefox 3.6, 4, 5는 표준인 {{domxref("DeviceOrientationEvent")}} 이벤트가 아닌 <a href="/en-US/DOM/MozOrientation" title="MozOrientation">mozOrientation </a>을 지원한다</li>
-</ol>
-
-<h2 id="참고_자료">참고 자료</h2>
-
-<ul>
- <li>{{domxref("DeviceOrientationEvent")}}</li>
- <li>{{domxref("DeviceMotionEvent")}}</li>
- <li>The legacy <code><a href="/en-US/DOM/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a></code> event.</li>
- <li><a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li>
- <li><a href="/en-US/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li>
-</ul>
diff --git a/files/ko/web/api/document_object_model/events/index.html b/files/ko/web/api/document_object_model/events/index.html
deleted file mode 100644
index 2974c9d435..0000000000
--- a/files/ko/web/api/document_object_model/events/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: Events and the DOM
-slug: Web/API/Document_Object_Model/Events
-translation_of: Web/API/Document_Object_Model/Events
----
-<div>{{DefaultAPISidebar("DOM")}}</div>
-
-<h2 id="Introduction" name="Introduction">소개</h2>
-
-<p>이 장에서는 DOM 이벤트 모델을 설명한다.  <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a> 인터페이스는 DOM의 노드에서 이벤트 등록 및  <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">event listeners</a>를 위한 인터페이스와 더불어 다양한 이벤트 인터페이스가 서로 어떻게 관련되는지 보여주는 몇 가지 더 긴 예와 함께 설명된다.</p>
-
-<p>There is an excellent diagram that clearly explains the three phases of event flow through the DOM in the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events draft</a>.</p>
-
-<p>Also see <a href="/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Example 5: Event Propagation</a> in the Examples chapter for a more detailed example of how events move through the DOM.</p>
-
-<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Event listener등록</h2>
-
-<p>DOM 요소에 대한 이벤트 핸들러를 등록하는 방법에는 3가지가 있다.</p>
-
-<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener">{{domxref("EventTarget.addEventListener")}}</h3>
-
-<pre class="brush: js notranslate">// Assuming myButton is a button element
-myButton.addEventListener('click', greet, false)
-function greet(event){
-    // print and have a look at the event object
-    // always print arguments in case of overlooking any other arguments
-    console.log('greet:', arguments)
-    alert('hello world')
-}
-</pre>
-
-<p>이 방식은 근대의 웹페이지에서 사용해야하는 방법이다.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note:</strong> Internet Explorer 6–8 didn't support this method, offering a similar {{domxref("EventTarget.attachEvent")}} API instead. For cross-browser compatibility, use one of the many JavaScript libraries available.</p>
-</div>
-
-<p>더 자세한 내용은{{domxref("EventTarget.addEventListener")}}를 참조하세요.</p>
-
-<h3 id="HTML_attribute" name="HTML_attribute"><a href="/en-US/docs/Web/Guide/HTML/Event_attributes">HTML </a>속성</h3>
-
-<pre class="brush: html notranslate">&lt;button onclick="alert('Hello world!')"&gt;
-</pre>
-
-<p>속성에서 JavaScript 코드는 이벤트 매개변수를 통해 이벤트 객체를 통과합니다. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">반환 값은 HTML 사양에 설명된 특별한 방법으로 처리됩니다.</a></p>
-
-<div class="blockIndicator warning">
-<p><strong>경고:</strong> 이 방법은 피해야 합니다! 그것은 마크업을 부풀리고, 읽기 어렵게 만듭니다. 내용/구조와 행동에 대한 우려는 잘 분리되어 있지 않아 버그를 찾기가 더 어려워집니다.</p>
-</div>
-
-<h3 id="DOM_element_properties" name="DOM_element_properties">DOM 요소 특성</h3>
-
-<pre class="brush: js notranslate">// Assuming myButton is a button element
-myButton.onclick = function(event){alert('Hello world')}
-</pre>
-
-<p>The function can be defined to take an <code>event</code> parameter. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">The return value is treated in a special way, described in the HTML specification</a>.</p>
-
-<p>The problem with this method is that only one handler can be set per element and per event.</p>
-
-<h2 id="Accessing_Event_interfaces">Accessing Event interfaces</h2>
-
-<p>Event handlers may be attached to various objects (including DOM elements, document, the {{domxref("window")}} object, etc.). When an event occurs, an event object is created and passed sequentially to the event listeners.</p>
-
-<p>The {{domxref("Event")}} interface is accessible from within the handler function, via the event object passed as the first argument. The following simple example shows how an event object is passed to the event handler function, and can be used from within one such function.</p>
-
-<pre class="brush: js notranslate">function print(evt) {
-  // the evt parameter is automatically assigned the event object
-  // take care of the differences between console.log &amp; alert
-  console.log('print:', evt)
-  alert(evt)
-}
-// any function should have an appropriate name, that's what called semantic
-table_el.onclick = print
-</pre>
-
-<h2 id="Subnav">Subnav</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
- <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
- <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
- <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
-</ul>
diff --git a/files/ko/web/guide/events/index.html b/files/ko/web/guide/events/index.html
deleted file mode 100644
index e952840d8e..0000000000
--- a/files/ko/web/guide/events/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: Event developer guide
-slug: Web/Guide/Events
-tags:
-  - DOM
-  - Event
-  - Guide
-  - NeedsUpdate
-  - events
-translation_of: Web/Guide/Events
----
-<p>{{draft()}}</p>
-
-<p>Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.</p>
-
-<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">overview page</a> provides an introduction to the design pattern and a summary of the types of incidents which are defined and reacted to by modern web browsers.</p>
-
-<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">custom events page</a> describes how the event code design pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code.</p>
-
-<p>The remaining pages describe how to use events of different kinds defined by web browsers. Unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers.</p>
-
-<p>The <strong>device</strong> on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> and the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. That is different, but similar, to the change in device vertical orientation. </p>
-
-<p>The <strong>window</strong> in which the browser is displayed which might trigger events, for example, change size if the user maximizes the window or otherwise changes it.</p>
-
-<p>The <strong>process</strong> loading of a web page might trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user.</p>
-
-<p>The <strong>user interaction</strong> with the web page contents might trigger events. The events triggered by user interaction evolved during the early years of browser design and include a complicated system defining the sequence in which events will be called and the manner in which that sequence can be controlled. The different types of user interaction driven events include:</p>
-
-<ul>
- <li>the original 'click' event,</li>
- <li>mouse events,</li>
- <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">mouse gesture events</a>, and</li>
- <li>both <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a> and the earlier, but deprecated, <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">mozilla experimental touch events</a>.</li>
-</ul>
-
-<p>The <strong>modification of the web page</strong> in structure or content might trigger some events, as is explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a>, but the use of these events has been deprecated in favour of the lighter <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> approach.</p>
-
-<p>The <strong>media streams</strong> embedded in the HTML documents might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a> page.</p>
-
-<p>The <strong>network requests</strong> made by a web page might trigger some events.</p>
-
-<p>There are many other sources of events defined by web browsers for which pages are not yet available in this guide.</p>
-
-<div class="note">
-<p>Note: This Event Developer Guide needs substantial work. The structure needs to be reorganized and the pages rewritten. Our hope is that everything you need to know about events will go under here.</p>
-</div>
-
-<h2 id="Docs">Docs</h2>
-
-<p>{{LandingPageListSubpages}}</p>
diff --git a/files/ko/web/guide/events/overview_of_events_and_handlers/index.html b/files/ko/web/guide/events/overview_of_events_and_handlers/index.html
deleted file mode 100644
index c3f1a9205a..0000000000
--- a/files/ko/web/guide/events/overview_of_events_and_handlers/index.html
+++ /dev/null
@@ -1,142 +0,0 @@
----
-title: Overview of Events and Handlers
-slug: Web/Guide/Events/Overview_of_Events_and_Handlers
-translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers
----
-<div class="summary">
-<p> 이 글은 이벤트 및 이벤트 핸들링(event handling)에 대한 개요로서, 웹 페이지가 열려있는 동안 일어나는 사건(incident)에 대해 반응할 수 있도록 하는 코드 설계 패턴에 대해 설명하고, 현 세대의 웹 브라우저에서 핸들링할 수 있는 사건의 종류에 대해 요약한다.</p>
-</div>
-
-<p> 이벤트와 이벤트 핸들링은 웹 페이지가 사용자에 의해 열린 상태를 유지하는 동안 일어나는 사건에 대한 반응을 구현하기 위한 자바스크립트의 핵심적인 기술이다. 이러한 사건에는 페이지가 전시(display)되기 위한 준비과정 중 일어나는 사건, 웹 페이지상의 컨텐츠와 사용자의 상호작용에 의한 사건, 브라우저가 실행되는 기반 장치와 관련된 사건, 매체 스트림(media stream) 재생이나 애니메이션 시간 간격 등 기타 요인에 의한 사건 등이 있다.</p>
-
-<p> 이벤트와 이벤트 핸들링은 자바스크립트가 처음 도입된 시점부터 중심적인 역할을 했으며, 이와 함께 브라우저의 렌더링 아키텍처 역시 단일 처리경로(single pass) 페이지 렌더링으로부터 리플로우(reflow) 기반, 이벤트 구동식(driven) 페이지 렌더링 개념으로 바뀌었다.</p>
-
-<p> 최초에는 브라우저는 페이지의 모든 부분에 대한 문법분석(parse), 처리(process), 그리기(draw) 및 사용자에게 표현(present)까지의 모든 과정이 끝날 때까지 대기하고, 페이지 작업이 끝나면 그 상태로 바뀌지 않고 새 페이지 요청이 있어서 가져오기(fetch)작업이 일어나기 전까지는 그대로의 모습을 유지했다. </p>
-
-<p> 리플로우 기반 이벤트 구동식 페이지 렌더링 개념으로 바뀐 뒤에는 브라우저는 처리, 그리기, 컨텐츠 표현(present), 반복순환작업을 다시 개시하도록 하는 이벤트 트리거에 대한 대기 등의 작업을 반복순환(loop)하여 수행한다. 이 이벤트 트리거라는 것은 이벤트를 발생하게 하는 사건을 이르는 것으로서, 네트워크상의 자원 로드 완료( 예 : 이미지가 다운로드되어 화면상에 그릴 수 있게 됨), 브라우저에 의한 자원의 문법분석 완료( 예 : HTML페이지 처리가 끝남) 페이지의 컨텐츠와 사용자와의 상호작용(예 : 버튼을 클릭한다) 등이 이러한 사건이 될 수 있다.</p>
-
-<p> 더글라스 크록포드는 <em>An inconvenient API : The theory of the DOM(불편한 API : DOM의 이론)</em>이라는 제목의 강연에서 이러한 변화를 여러 단원에 걸쳐 설명하였는데, 본래의 작업 흐름에서 이벤트 구동식 브라우저의 작업 흐름으로 바뀌는 것을 다음과 같이 보여주었다.</p>
-
-<div style="margin: 0 auto; width: 68%;"><img alt="A comparison of the sequential and event-driven browser load sequences." src="https://mdn.mozillademos.org/files/6641/Browser_sequence_comparitive.svg" style="height: 454px; width: 1857px;"></div>
-
-<p> 두 번째 그림에 보이는 처리방식은 마지막 단계의 작업흐름을 변화시킴으로써 첫 번째 그림의 단일 경로 처리흐름에서 반복순환 흐름으로 바뀐 것을 보여준다. 두 번째 그림은 Paint작업이 끝나면 새로운 이벤트 발생에 대한 처리(이벤트 핸들링)를 하기 위해 이벤트를 기다리게 된다. 이 혁신적인 개념을 이용하면 자원을 다 획득하지 않았더라도 페이지를 부분적으로 렌더링하는 것이 가능하며, 최초에는 자바스크립트에 의해 발전된 이벤트 구동에 의한 동작 효과적으로 구현할 수 있다. (이 강의는 <a href="http://www.youtube.com/watch?v=Y2Y0U-2qJMs">여기</a>를 포함한 다양한 경로로 볼 수 있다) 현재 모든 자바스크립트 코드 실행 환경에서는 이벤트와 이벤트 핸들링을 사용한다.</p>
-
-<h2 id="이벤트_설계_패턴">이벤트 설계 패턴</h2>
-
-<p>이벤트 시스템은 근본적으로는 단순한 프로그래밍 설계 패턴이다. 이 패턴는 기본적으로 이벤트의 종류와 다음 사항에 대해 합의된 약속을 기반으로 한다.</p>
-
-<ul>
- <li>각 이벤트를 가리키는 이벤트명 문자열</li>
- <li>각 이벤트의 핵심 프로퍼티를 나타내기 위한 자료구조의 형식</li>
- <li>각 이벤트를 발동할 자바스크립트 객체</li>
-</ul>
-
-<p>패턴을 구현하기 위해서는 다음이 필요하다.</p>
-
-<ul>
- <li>위에서 약속된 자료구조를 인수로 받는 자바스크립트 함수를 정의한다.</li>
- <li>이벤트를 발동할 객체에 약속된 해당 이벤트의 이벤트명을 사용하여 위의 함수를 등록한다.</li>
-</ul>
-
-<p>이 함수는 리스너(listener) 또는 핸들러(handler)라는 혼용된 명칭으로 불린다. 이 패턴은 <a href="/ko/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">커스텀 이벤트에 관한 글</a>에서 설명한 대로의 완전한 커스텀 이벤트를 사용하여 쉽게 구현할 수 있다. 이 패턴은 사용자 입력, 브라우저 활동 등에 의해 발동되는 다양한 이벤트를 정의하는 최신 웹 브라우저에서도 많이 사용한다.</p>
-
-<p> 최신 웹 브라우저는 이 이벤트 패턴을 표준화된 방식으로 구현한다. 브라우저는 어떤 이벤트의 프로퍼티를 나타내는 자료 구조로서  <code>EventPrototype</code> 객체를 원천으로 하는 어떤 객체를 사용한다. 또한 이러한 자료구조를 핸들링할 함수에 대한 등록 메소드로서 <code>addEventListener </code>메소드를 사용하는데 이것은 인수로서 이벤트명과 핸들러 함수를 받는다<code>.</code> 마지막으로 브라우저는 이벤트 발동자(emitter)로 수많은 객체를 정의하며 또한 이 객체들에 의해 생성되는 여러 이벤트형(event type)을 정의한다.</p>
-
-<h2 id="Button_Event_Handler" name="Button_Event_Handler">버튼 이벤트 핸들러 데모</h2>
-
-<p>하나의 예시로서 브라우저 <code>button 요소(element)는 'click'이라는 이름의 이벤트를 마우스 클릭 또는 터치스크린의 경우 손가락 터치에 반응하여 발동시킨다.</code> 버튼은 HTML 페이지에서 다음과 같이 정의할 수 있다.</p>
-
-<pre class="brush: html">&lt;button id="buttonOne"&gt;Click here to emit a 'click' event&lt;/button&gt;</pre>
-
-<p>그리고 자바스크립트 코드에서 'click' 이벤트에 대한 리스너로서의 함수, 즉 핸들러로 사용할 함수를 정의한다.</p>
-
-<pre class="brush: js">var example_click_handler = function (ev){
-    var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype";
-    alert("We got a click event at " + ev.timeStamp + " with an argument object derived from: " + objKind );
-};</pre>
-
-<p>그 다음 해당 <code>Button</code> 객체와 함께 위의 함수를 등록하는데, 첫 번째 방법은 HTML 페이지의 DOM(문서 객체 모델) 표현법을 이용하여 다음과 같이 스크립트상에서 나타내는 방법이다. </p>
-
-<pre class="brush: js">var buttonDOMElement = document.querySelector('#buttonOne');
-buttonDOMElement.addEventListener('click', example_click_handler);</pre>
-
-<p>또 다른 방법은 HTML 페이지 상에서 'onclick' 애트리뷰트의 값으로 핸들러로 쓸 함수를 대입시키는 것인데, 보통 이 방식은 매우 단순한 웹 페이지에서나 쓰인다.</p>
-
-<p>{{ EmbedLiveSample('Button_Event_Handler') }}</p>
-
-<p>This code relies on the agreement that there is a kind of event called <code>'click'</code> which will call any listener (or 'handler') function with an <code>Event</code> object argument (actually, in this case a derivative <code>MouseEvent</code> object) and which will be fired by HTML <code>button</code> elements after user interaction. The code has no visible effect until a user interacts with the button either by placing the mouse pointer over the HTML button and clicking on the left mouse button or by placing a finger or stylus of some kind on the screen above the HTML button; when that happens, the <code>buttonDOMElement</code> Javascript object would call the <code>example_click_handler</code> function with an <code>Event</code> object as an argument. The function, in turn, would perform whatever action was chosen by the programmer, in this case to open an HTML alert dialog. Note that the handler has access to the <code>ev</code> object since it is passed as an argument; the object has information about the event, notably the time at which the event occurred.</p>
-
-<p>As a second example, much modern Javascript integrated into web pages is wrapped into an event function call to ensure that the code is only executed when the HTML has been processed and is available for alteration or decoration. For example, code might be attached as:</p>
-
-<pre class="brush: js">var funcInit = function(){
-    // user code goes here and can safetly address all the HTML elements from the page
-    // since the document has successfully been 'loaded'
-}
-document.addEventListener('DOMContentLoaded', funcInit);
-</pre>
-
-<p>so that this code will only be executed after the <code>document</code> object emits the <code>'DOMContentLoaded'</code> event because the HTML has been parsed and Javasript objects created representing each of the nodes of the HTML document. Note that in this example, the code does not even name the event argument to the function because the code never needs to use the data structure describing the event; rather, the code merely needs to wait to run until after then event has happened.</p>
-
-<p>The pattern is therefore easy to learn and implement. The difficulty with events comes from learning the wide variety of events which are generated in modern web browsers. There is also some subtlety in learning how to write the handler functions since such code works asynchronously and potentially will run repeatedly but in slightly different situations.</p>
-
-<h2 id="Notable_events">Notable events</h2>
-
-<p>Web browsers define a large number of events so it is not practical to list them all. The <a href="/en-US/docs/Web/Reference/Events">Event Reference</a> attempts to maintain a list of the standard Events used in modern web browsers.</p>
-
-<p>In general, we can distinguish events of different kinds based on the object emitting the event including:</p>
-
-<ul>
- <li>the <code>window</code> object, such as due to resizing the browser,</li>
- <li>the <code>window.screen</code> object, such as due to changes in device orientation,</li>
- <li>the <code>document</code> object, including the loading, modification, user interaction, and unloading of the page,</li>
- <li>the objects in the DOM (document object model) tree including user interactions or modifications,</li>
- <li>the <code>XMLHttpRequest</code> objects used for network requests, and</li>
- <li>the media objects such as <code>audio</code> and <code>video</code>, when the media stream players change state.</li>
-</ul>
-
-<p>although this list is currently incomplete.</p>
-
-<p>Some notable events are:</p>
-
-<div class="note">
-<p><strong>Note:</strong> This list of will need work to make relevant; that work is awaiting some global reorganization work on the documents. This will also need finding a good explanation of the events involved during page loading, such as discussed partially in <em><a href="http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/">this web page</a> or in <a href="http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page">this Stack Overflow question</a>. </em></p>
-</div>
-
-<ul>
- <li>the global object <a href="/en-US/docs/Web/API/Window"><code>window</code></a> emits an event called <a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)"><code>'load'</code></a> when the page has finished rendering, meaning that all resources have been downloaded and acted upon, so that the scripts have been run and the images displayed,</li>
- <li>the global object <a href="/en-US/docs/Web/API/Window"><code>window</code></a> emits an event called <a href="/en-US/docs/Web/Reference/Events/resize"><code>'resize'</code></a> when the height or the width of the browser window is changed by a user,</li>
- <li>the DOM object <a href="/en-US/docs/Web/API/Document"><code>document</code></a> representing the HTML document emits an event called<code> <a href="/en-US/docs/Web/Reference/Events/DOMContentLoaded">'DOMContentLoaded'</a></code> when the document has finished loading,</li>
- <li>the DOM node objects such as <a href="/en-US/docs/Web/HTML/Element/div"><code>div</code></a> or <a href="/en-US/docs/Web/HTML/Element/button"><code>button</code></a> emit an event called <a href="/en-US/docs/Web/Reference/Events/click"><code>'click'</code></a> when the user presses the mouse button while the mouse pointer is on top of the DOM node in the HTML page.</li>
-</ul>
-
-<p> </p>
-
-<h2 id="The_Event_object_hierarchy">The Event object hierarchy</h2>
-
-<p>The web browser defines many events of different kinds. Each definition includes, as the data structure passed to the handler function, an object which inherits from the <code>EventPrototype</code> object.</p>
-
-<p>A partial diagram of the class hierarchy of event objects is:</p>
-
-<div class="note">
-<p><strong>Note:</strong> This diagram is incomplete.</p>
-</div>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/6633/Js_Event_Object_Hierarchy.svg" style="height: 496px; width: 1417px;"></p>
-
-<p>The Web API Documentation contains <a href="/en-US/docs/Web/API/Event">a page defining the Event object</a> which also includes the known DOM event subclasses of the <code>Event</code> object.</p>
-
-<h2 id="Documents">Documents</h2>
-
-<p>Three sources on the MDN (Mozilla Developer Network) web site are particularly useful for programmers wanting to work with events:</p>
-
-<ul>
- <li>this <a href="/en-US/docs/Web/Guide/API/DOM/Events">Event Guide</a> which is part of the <a href="/en-US/docs/Web/Guide">Web Developers' Guide</a>,</li>
- <li>the <a href="/en-US/docs/Web/Reference/Events">Event Reference</a>,</li>
- <li>the Web API documentation for the <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> object.</li>
-</ul>
-
-<p> </p>
-
-<p> </p>
-
-<p> </p>