From 0d13feed6a627047449d99af02d1fb55bbfad1a9 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Wed, 7 Jul 2021 21:57:08 -0400 Subject: delete conflicting/orphaned in ko (#1423) * delete conflicting/orphaned in ko * forgot the redirects --- .../creating_and_triggering_events/index.html | 141 -------------------- files/ko/orphaned/web/guide/events/index.html | 52 -------- .../overview_of_events_and_handlers/index.html | 143 --------------------- 3 files changed, 336 deletions(-) delete mode 100644 files/ko/orphaned/web/guide/events/creating_and_triggering_events/index.html delete mode 100644 files/ko/orphaned/web/guide/events/index.html delete mode 100644 files/ko/orphaned/web/guide/events/overview_of_events_and_handlers/index.html (limited to 'files/ko/orphaned/web/guide/events') 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 ---- -

이 글은 DOM 이벤트를 생성하고 디스패치하는 방법에 대해 설명합니다. 이런 이벤트는 흔히 인공 이벤트(synthetic events)라고 불리며, 브라우저 자체에서 실행되는 이벤트와 반대입니다.

- -

커스텀 이벤트 생성하기

- -

다음과 같이 Event 생성자를 사용해 Events 를 생성할 수 있습니다.

- -
var event = new Event('build');
-
-// 이벤트 리슨.
-elem.addEventListener('build', function (e) { /* ... */ }, false);
-
-// 이벤트 디스패치.
-elem.dispatchEvent(event);
- -

위 코드 예제는 EventTarget.dispatchEvent() 메소드를 사용합니다.

- -

이 생성자는 대부분의 최신 브라우저(Internet Exploere 는 예외)에서 지원됩니다. 더 장황한 접근법(Internet Explorer 에서도 동작하는)은, 아래 옛날 방식 부분을 참고하세요.

- -

커스텀 데이터 추가 – CustomEvent()

- -

이벤트 객체에 더 많은 데이터를 추가하려면, CustomEvent 인터페이스가 존재하고 detail 프로퍼티를 통해 커스텀 데이터를 전달할 수 있습니다
- 예를 들면, 다음과 같이 이벤트가 생성될 수 있습니다.

- -
var event = new CustomEvent('build', { detail: elem.dataset.time });
- -

그럼 이벤트 리스너의 부가적인 데이터에 접근할 수 있게 됩니다.

- -
function eventHandler(e) {
-  console.log('The time is: ' + e.detail);
-}
-
- -

옛날 방식

- -

생성 이벤트로의 오래된 접근법은 Java 로부터 영감을 받은 API들을 사용합니다. 다음은 그 예시를 보여줍니다.

- -
// 이벤트 생성.
-var event = document.createEvent('Event');
-
-// 이벤트 이름을 'build' 라 정의.
-event.initEvent('build', true, true);
-
-// 이벤트 리슨.
-elem.addEventListener('build', function (e) {
-  // e.target 은 elem 과 일치
-}, false);
-
-// target 은 어떤 엘리먼트나 다른 이벤트 타켓이 될 수 있음.
-elem.dispatchEvent(event);
-
-
- -

이벤트 버블링

- -

자식 엘리먼트로부터 이벤트를 발생시키고 그 조상이 이를 캐치하도록 하는것은 종종 바람직합니다. 선택적으로 데이터도 함께합니다.

- -
<form>
-  <textarea></textarea>
-</form>
-
- -
const form = document.querySelector('form');
-const textarea = document.querySelector('textarea');
-
-// 새로운 이벤트를 생성하고, 버블링을 허용하며, "details" 프로퍼티로 전달할 데이터를 제공합니다
-const eventAwesome = new CustomEvent('awesome', {
-  bubbles: true,
-  detail: { text: () => textarea.value }
-});
-
-// form 엘리먼트는 커스텀 "awesome" 이벤트를 리슨한 후 전달된 text() 메소드의 결과를 콘솔에 출력합니다
-form.addEventListener('awesome', e => console.log(e.detail.text()));
-
-// 사용자가 입력한대로, form 내의 textarea 는 이벤트를 디스패치/트리거하여 시작점으로 사용합니다
-textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
-
- -

이벤트를 동적으로 생성하고 디스패칭하기

- -

엘리먼트는 아직 생성되지 않은 이벤트를 리슨할 수 있습니다.

- -
<form>
-  <textarea></textarea>
-</form>
-
- -
const form = document.querySelector('form');
-const textarea = document.querySelector('textarea');
-
-form.addEventListener('awesome', e => console.log(e.detail.text()));
-
-textarea.addEventListener('input', function() {
-  // 이벤트 즉시 생성 및 디스패치/트리거
-  // 노트: 선택적으로, 우리는 "함수 표현"("화살표 함수 표현" 대신)을 사용하므로 "this"는 엘리먼트를 나타냅니다
-  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } }))
-});
-
- -

내장 이벤트 트리거

- -

이 예제는 DOM 메소드를 사용해 체크박스에 클릭을 시뮬레이팅하는 것을 보여줍니다(클릭 이벤트를 프로그래밍적으로 발생시키는 것입니다). 동작하는 예제를 확인하세요.

- -
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");
-  }
-}
- -

함께 보기

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

{{draft()}}

- -

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.

- -

The overview page 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.

- -

The custom events page 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.

- -

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.

- -

The device 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 page on orientation coordinate systems and the page on the use of 3D transforms. That is different, but similar, to the change in device vertical orientation. 

- -

The window in which the browser is displayed which might trigger events, for example, change size if the user maximizes the window or otherwise changes it.

- -

The process 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.

- -

The user interaction 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:

- - - -

The modification of the web page in structure or content might trigger some events, as is explained in the mutation events page, but the use of these events has been deprecated in favour of the lighter Mutation Observer approach.

- -

The media streams embedded in the HTML documents might trigger some events, as explained in the media events page.

- -

The network requests made by a web page might trigger some events.

- -

There are many other sources of events defined by web browsers for which pages are not yet available in this guide.

- -
-

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.

-
- -

Docs

- -

{{LandingPageListSubpages}}

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

 이 글은 이벤트 및 이벤트 핸들링(event handling)에 대한 개요로서, 웹 페이지가 열려있는 동안 일어나는 사건(incident)에 대해 반응할 수 있도록 하는 코드 설계 패턴에 대해 설명하고, 현 세대의 웹 브라우저에서 핸들링할 수 있는 사건의 종류에 대해 요약한다.

-
- -

 이벤트와 이벤트 핸들링은 웹 페이지가 사용자에 의해 열린 상태를 유지하는 동안 일어나는 사건에 대한 반응을 구현하기 위한 자바스크립트의 핵심적인 기술이다. 이러한 사건에는 페이지가 전시(display)되기 위한 준비과정 중 일어나는 사건, 웹 페이지상의 컨텐츠와 사용자의 상호작용에 의한 사건, 브라우저가 실행되는 기반 장치와 관련된 사건, 매체 스트림(media stream) 재생이나 애니메이션 시간 간격 등 기타 요인에 의한 사건 등이 있다.

- -

 이벤트와 이벤트 핸들링은 자바스크립트가 처음 도입된 시점부터 중심적인 역할을 했으며, 이와 함께 브라우저의 렌더링 아키텍처 역시 단일 처리경로(single pass) 페이지 렌더링으로부터 리플로우(reflow) 기반, 이벤트 구동식(driven) 페이지 렌더링 개념으로 바뀌었다.

- -

 최초에는 브라우저는 페이지의 모든 부분에 대한 문법분석(parse), 처리(process), 그리기(draw) 및 사용자에게 표현(present)까지의 모든 과정이 끝날 때까지 대기하고, 페이지 작업이 끝나면 그 상태로 바뀌지 않고 새 페이지 요청이 있어서 가져오기(fetch)작업이 일어나기 전까지는 그대로의 모습을 유지했다. 

- -

 리플로우 기반 이벤트 구동식 페이지 렌더링 개념으로 바뀐 뒤에는 브라우저는 처리, 그리기, 컨텐츠 표현(present), 반복순환작업을 다시 개시하도록 하는 이벤트 트리거에 대한 대기 등의 작업을 반복순환(loop)하여 수행한다. 이 이벤트 트리거라는 것은 이벤트를 발생하게 하는 사건을 이르는 것으로서, 네트워크상의 자원 로드 완료( 예 : 이미지가 다운로드되어 화면상에 그릴 수 있게 됨), 브라우저에 의한 자원의 문법분석 완료( 예 : HTML페이지 처리가 끝남) 페이지의 컨텐츠와 사용자와의 상호작용(예 : 버튼을 클릭한다) 등이 이러한 사건이 될 수 있다.

- -

 더글라스 크록포드는 An inconvenient API : The theory of the DOM(불편한 API : DOM의 이론)이라는 제목의 강연에서 이러한 변화를 여러 단원에 걸쳐 설명하였는데, 본래의 작업 흐름에서 이벤트 구동식 브라우저의 작업 흐름으로 바뀌는 것을 다음과 같이 보여주었다.

- -
A comparison of the sequential and event-driven browser load sequences.
- -

 두 번째 그림에 보이는 처리방식은 마지막 단계의 작업흐름을 변화시킴으로써 첫 번째 그림의 단일 경로 처리흐름에서 반복순환 흐름으로 바뀐 것을 보여준다. 두 번째 그림은 Paint작업이 끝나면 새로운 이벤트 발생에 대한 처리(이벤트 핸들링)를 하기 위해 이벤트를 기다리게 된다. 이 혁신적인 개념을 이용하면 자원을 다 획득하지 않았더라도 페이지를 부분적으로 렌더링하는 것이 가능하며, 최초에는 자바스크립트에 의해 발전된 이벤트 구동에 의한 동작 효과적으로 구현할 수 있다. (이 강의는 여기를 포함한 다양한 경로로 볼 수 있다) 현재 모든 자바스크립트 코드 실행 환경에서는 이벤트와 이벤트 핸들링을 사용한다.

- -

이벤트 설계 패턴

- -

이벤트 시스템은 근본적으로는 단순한 프로그래밍 설계 패턴이다. 이 패턴는 기본적으로 이벤트의 종류와 다음 사항에 대해 합의된 약속을 기반으로 한다.

- - - -

패턴을 구현하기 위해서는 다음이 필요하다.

- - - -

이 함수는 리스너(listener) 또는 핸들러(handler)라는 혼용된 명칭으로 불린다. 이 패턴은 커스텀 이벤트에 관한 글에서 설명한 대로의 완전한 커스텀 이벤트를 사용하여 쉽게 구현할 수 있다. 이 패턴은 사용자 입력, 브라우저 활동 등에 의해 발동되는 다양한 이벤트를 정의하는 최신 웹 브라우저에서도 많이 사용한다.

- -

 최신 웹 브라우저는 이 이벤트 패턴을 표준화된 방식으로 구현한다. 브라우저는 어떤 이벤트의 프로퍼티를 나타내는 자료 구조로서  EventPrototype 객체를 원천으로 하는 어떤 객체를 사용한다. 또한 이러한 자료구조를 핸들링할 함수에 대한 등록 메소드로서 addEventListener 메소드를 사용하는데 이것은 인수로서 이벤트명과 핸들러 함수를 받는다. 마지막으로 브라우저는 이벤트 발동자(emitter)로 수많은 객체를 정의하며 또한 이 객체들에 의해 생성되는 여러 이벤트형(event type)을 정의한다.

- -

버튼 이벤트 핸들러 데모

- -

하나의 예시로서 브라우저 button 요소(element)는 'click'이라는 이름의 이벤트를 마우스 클릭 또는 터치스크린의 경우 손가락 터치에 반응하여 발동시킨다. 버튼은 HTML 페이지에서 다음과 같이 정의할 수 있다.

- -
<button id="buttonOne">Click here to emit a 'click' event</button>
- -

그리고 자바스크립트 코드에서 'click' 이벤트에 대한 리스너로서의 함수, 즉 핸들러로 사용할 함수를 정의한다.

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

그 다음 해당 Button 객체와 함께 위의 함수를 등록하는데, 첫 번째 방법은 HTML 페이지의 DOM(문서 객체 모델) 표현법을 이용하여 다음과 같이 스크립트상에서 나타내는 방법이다. 

- -
var buttonDOMElement = document.querySelector('#buttonOne');
-buttonDOMElement.addEventListener('click', example_click_handler);
- -

또 다른 방법은 HTML 페이지 상에서 'onclick' 애트리뷰트의 값으로 핸들러로 쓸 함수를 대입시키는 것인데, 보통 이 방식은 매우 단순한 웹 페이지에서나 쓰인다.

- -

{{ EmbedLiveSample('Button_Event_Handler') }}

- -

This code relies on the agreement that there is a kind of event called 'click' which will call any listener (or 'handler') function with an Event object argument (actually, in this case a derivative MouseEvent object) and which will be fired by HTML button 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 buttonDOMElement Javascript object would call the example_click_handler function with an Event 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 ev object since it is passed as an argument; the object has information about the event, notably the time at which the event occurred.

- -

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:

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

so that this code will only be executed after the document object emits the 'DOMContentLoaded' 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.

- -

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.

- -

Notable events

- -

Web browsers define a large number of events so it is not practical to list them all. The Event Reference attempts to maintain a list of the standard Events used in modern web browsers.

- -

In general, we can distinguish events of different kinds based on the object emitting the event including:

- - - -

although this list is currently incomplete.

- -

Some notable events are:

- -
-

Note: 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 this web page or in this Stack Overflow question.

-
- - - -

 

- -

The Event object hierarchy

- -

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 EventPrototype object.

- -

A partial diagram of the class hierarchy of event objects is:

- -
-

Note: This diagram is incomplete.

-
- -

- -

The Web API Documentation contains a page defining the Event object which also includes the known DOM event subclasses of the Event object.

- -

Documents

- -

Three sources on the MDN (Mozilla Developer Network) web site are particularly useful for programmers wanting to work with events:

- - - -

 

- -

 

- -

 

-- cgit v1.2.3-54-g00ecf