aboutsummaryrefslogtreecommitdiff
path: root/files/ko/orphaned/web/guide/events
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2021-07-07 21:57:08 -0400
committerGitHub <noreply@github.com>2021-07-08 10:57:08 +0900
commit0d13feed6a627047449d99af02d1fb55bbfad1a9 (patch)
treebb7efedc3137bfea1c69f510617b602009d58b3d /files/ko/orphaned/web/guide/events
parentff9ea0cf9f0ea6217deefa7ad0dba35bf7f6c45e (diff)
downloadtranslated-content-0d13feed6a627047449d99af02d1fb55bbfad1a9.tar.gz
translated-content-0d13feed6a627047449d99af02d1fb55bbfad1a9.tar.bz2
translated-content-0d13feed6a627047449d99af02d1fb55bbfad1a9.zip
delete conflicting/orphaned in ko (#1423)
* delete conflicting/orphaned in ko * forgot the redirects
Diffstat (limited to 'files/ko/orphaned/web/guide/events')
-rw-r--r--files/ko/orphaned/web/guide/events/creating_and_triggering_events/index.html141
-rw-r--r--files/ko/orphaned/web/guide/events/index.html52
-rw-r--r--files/ko/orphaned/web/guide/events/overview_of_events_and_handlers/index.html143
3 files changed, 0 insertions, 336 deletions
diff --git a/files/ko/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/ko/orphaned/web/guide/events/creating_and_triggering_events/index.html
deleted file mode 100644
index 836db281db..0000000000
--- a/files/ko/orphaned/web/guide/events/creating_and_triggering_events/index.html
+++ /dev/null
@@ -1,141 +0,0 @@
----
-title: 이벤트 생성 및 트리거
-slug: orphaned/Web/Guide/Events/Creating_and_triggering_events
-tags:
- - DOM
- - NeedsContent
- - 가이드
- - 고급
- - 이벤트
- - 자바스크립트
-translation_of: Web/Guide/Events/Creating_and_triggering_events
-original_slug: Web/Guide/Events/Creating_and_triggering_events
----
-<p>이 글은 DOM 이벤트를 생성하고 디스패치하는 방법에 대해 설명합니다. 이런 이벤트는 흔히 <strong>인공 이벤트(synthetic events)</strong>라고 불리며, 브라우저 자체에서 실행되는 이벤트와 반대입니다.</p>
-
-<h2 id="커스텀_이벤트_생성하기">커스텀 이벤트 생성하기</h2>
-
-<p>다음과 같이 <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> 생성자를 사용해 Events 를 생성할 수 있습니다.</p>
-
-<pre class="brush: js">var event = new Event('build');
-
-// 이벤트 리슨.
-elem.addEventListener('build', function (e) { /* ... */ }, false);
-
-// 이벤트 디스패치.
-elem.dispatchEvent(event);</pre>
-
-<p>위 코드 예제는 <a href="/ko/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a> 메소드를 사용합니다.</p>
-
-<p>이 생성자는 대부분의 최신 브라우저(Internet Exploere 는 예외)에서 지원됩니다. 더 장황한 접근법(Internet Explorer 에서도 동작하는)은, 아래 <a href="#The_old-fashioned_way" title="#The_old-fashioned_way">옛날 방식</a> 부분을 참고하세요.</p>
-
-<h3 id="커스텀_데이터_추가_–_CustomEvent()">커스텀 데이터 추가 – CustomEvent()</h3>
-
-<p>이벤트 객체에 더 많은 데이터를 추가하려면, <a href="/en-US/docs/Web/API/CustomEvent">CustomEvent</a> 인터페이스가 존재하고 <u><strong>detail</strong></u> 프로퍼티를 통해 커스텀 데이터를 전달할 수 있습니다<br>
- <span style="line-height: 1.5;">예를 들면, 다음과 같이 이벤트가 생성될 수 있습니다.</span></p>
-
-<pre class="brush: js">var event = new CustomEvent('build', { detail: elem.dataset.time });</pre>
-
-<p>그럼 이벤트 리스너의 부가적인 데이터에 접근할 수 있게 됩니다.</p>
-
-<pre class="brush: js">function eventHandler(e) {
- console.log('The time is: ' + e.detail);
-}
-</pre>
-
-<h3 id="옛날_방식">옛날 방식</h3>
-
-<p>생성 이벤트로의 오래된 접근법은 Java 로부터 영감을 받은 API들을 사용합니다. 다음은 그 예시를 보여줍니다.</p>
-
-<pre class="brush: js">// 이벤트 생성.
-var event = <a href="/en-US/docs/Web/API/Document/createEvent">document.createEvent</a>('Event');
-
-// 이벤트 이름을 'build' 라 정의.
-event.initEvent('build', true, true);
-
-// 이벤트 리슨.
-elem.addEventListener('build', function (e) {
- // e.target 은 elem 과 일치
-}, false);
-
-// target 은 어떤 엘리먼트나 다른 이벤트 타켓이 될 수 있음.
-elem.dispatchEvent(event);
-
-</pre>
-
-<h3 id="이벤트_버블링">이벤트 버블링</h3>
-
-<p>자식 엘리먼트로부터 이벤트를 발생시키고 그 조상이 이를 캐치하도록 하는것은 종종 바람직합니다. 선택적으로 데이터도 함께합니다.</p>
-
-<pre class="brush: html">&lt;form&gt;
- &lt;textarea&gt;&lt;/textarea&gt;
-&lt;/form&gt;
-</pre>
-
-<pre class="brush: js">const form = document.querySelector('form');
-const textarea = document.querySelector('textarea');
-
-// 새로운 이벤트를 생성하고, 버블링을 허용하며, "details" 프로퍼티로 전달할 데이터를 제공합니다
-const eventAwesome = new CustomEvent('awesome', {
-  bubbles: true,
-  detail: { text: () =&gt; textarea.value }
-});
-
-// form 엘리먼트는 커스텀 "awesome" 이벤트를 리슨한 후 전달된 text() 메소드의 결과를 콘솔에 출력합니다
-form.addEventListener('awesome', e =&gt; console.log(e.detail.text()));
-
-// 사용자가 입력한대로, form 내의 textarea 는 이벤트를 디스패치/트리거하여 시작점으로 사용합니다
-textarea.addEventListener('input', e =&gt; e.target.dispatchEvent(eventAwesome));
-</pre>
-
-<h3 id="이벤트를_동적으로_생성하고_디스패칭하기">이벤트를 동적으로 생성하고 디스패칭하기</h3>
-
-<p>엘리먼트는 아직 생성되지 않은 이벤트를 리슨할 수 있습니다.</p>
-
-<pre class="brush: html">&lt;form&gt;
-  &lt;textarea&gt;&lt;/textarea&gt;
-&lt;/form&gt;
-</pre>
-
-<pre class="brush: js">const form = document.querySelector('form');
-const textarea = document.querySelector('textarea');
-
-form.addEventListener('awesome', e =&gt; console.log(e.detail.text()));
-
-textarea.addEventListener('input', function() {
-  // 이벤트 즉시 생성 및 디스패치/트리거
-  // 노트: 선택적으로, 우리는 "함수 표현"("화살표 함수 표현" 대신)을 사용하므로 "this"는 엘리먼트를 나타냅니다
-  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () =&gt; textarea.value } }))
-});
-</pre>
-
-<h2 id="내장_이벤트_트리거">내장 이벤트 트리거</h2>
-
-<p>이 예제는 DOM 메소드를 사용해 체크박스에 클릭을 시뮬레이팅하는 것을 보여줍니다(클릭 이벤트를 프로그래밍적으로 발생시키는 것입니다). <a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">동작하는 예제를 확인하세요.</a></p>
-
-<pre class="brush: js">function simulateClick() {
- var event = new MouseEvent('click', {
- view: window,
- bubbles: true,
- cancelable: true
- });
- var cb = document.getElementById('checkbox');
- var cancelled = !cb.dispatchEvent(event);
- if (cancelled) {
- // 핸들러가 preventDefault 를 호출했음.
- alert("cancelled");
- } else {
- // 어떤 핸들러도 preventDefault 를 호출하지 않음.
- alert("not cancelled");
- }
-}</pre>
-
-<h2 id="함께_보기">함께 보기</h2>
-
-<ul>
- <li><a href="/ko/docs/Web/API/CustomEvent/CustomEvent">CustomEvent()</a></li>
- <li>{{domxref("document.createEvent()")}}</li>
- <li>{{domxref("Event.initEvent()")}}</li>
- <li>{{domxref("EventTarget.dispatchEvent()")}}</li>
- <li>{{domxref("EventTarget.addEventListener()")}}</li>
-</ul>
diff --git a/files/ko/orphaned/web/guide/events/index.html b/files/ko/orphaned/web/guide/events/index.html
deleted file mode 100644
index 596c7f932d..0000000000
--- a/files/ko/orphaned/web/guide/events/index.html
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: Event developer guide
-slug: orphaned/Web/Guide/Events
-tags:
- - DOM
- - Event
- - Guide
- - NeedsUpdate
- - events
-translation_of: Web/Guide/Events
-original_slug: 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/orphaned/web/guide/events/overview_of_events_and_handlers/index.html b/files/ko/orphaned/web/guide/events/overview_of_events_and_handlers/index.html
deleted file mode 100644
index 3690555d42..0000000000
--- a/files/ko/orphaned/web/guide/events/overview_of_events_and_handlers/index.html
+++ /dev/null
@@ -1,143 +0,0 @@
----
-title: Overview of Events and Handlers
-slug: orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers
-translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers
-original_slug: 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>