DOM 이벤트
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
DOM 이벤트는 웹 페이지에서 사용자 상호 작용 및 기타 동작을 감지하고 대응하기 위한 기술을 의미한다. 이들은 다양한 종류로 분류되며, HTML 요소에서 발생하는 일반 이벤트, 터치 스크린 장치에서 사용되는 터치 이벤트, 마우스, 펜 등 다양한 입력 장치를 통합하는 포인터 이벤트, 웹 애플리케이션 개발자가 다양한 플랫폼에서 표준 사용자 상호 작용 이벤트를 지원하도록 돕는 Indie UI 이벤트 등이 있다.
DOM 이벤트는 이벤트 흐름, 이벤트 객체, 그리고 다양한 이벤트 처리 모델을 통해 구현된다. 이벤트 흐름은 캡처링, 타겟, 버블링 단계를 거치며, 이벤트 객체는 이벤트의 세부 정보를 제공한다. DOM Level 0, DOM Level 2, 인터넷 익스플로러 고유 모델 등 다양한 이벤트 처리 모델이 존재하며, 각 모델은 이벤트 등록, 제거, 중단 및 취소 방식에 차이를 보인다.
더 읽어볼만한 페이지
- 이벤트 (컴퓨팅) - 메시지 큐
메시지 큐는 프로세스나 스레드 간 비동기 통신을 제공하여 송신자와 수신자가 동시에 상호 작용할 필요 없이 메시지를 교환하도록 하며, 메시지는 수신자가 검색할 때까지 저장되고 시스템 장애 시 복원력을 제공하지만 보안 취약점, 특정 기업 종속성 등의 논란도 존재한다. - 이벤트 (컴퓨팅) - 비동기 입출력
비동기 입출력은 입출력 완료를 기다리지 않고 다른 작업을 처리하는 방식으로, 완료 시 콜백이나 시그널을 통해 결과를 알려주어 효율적인 자원 활용과 성능 향상을 가져다준다. - W3C 표준 - HTML
HTML은 웹 페이지 제작을 위한 표준 마크업 언어로서, 팀 버너스리가 제안하고 구현한 후 인터넷 발전과 함께 널리 사용되며, SGML에 기반하여 하이퍼텍스트 기능으로 다양한 콘텐츠를 표현하고 연결하며, W3C와 WHATWG에서 표준화를 진행하고 최신 버전은 HTML Living Standard이다. - W3C 표준 - 타임드 텍스트
타임드 텍스트는 영상이나 오디오 콘텐츠에 시간 정보를 담아 표현되는 텍스트로, 자막이나 캡션 등에 활용되며 TTML, WebVTT 등의 표준이 존재한다. - API - Tk (소프트웨어)
Tk는 Tcl 스크립팅 언어의 크로스 플랫폼 GUI 툴킷으로, 다양한 플랫폼 이식과 여러 프로그래밍 언어 바인딩을 지원하며 사용자 정의 가능한 위젯들을 제공한다. - API - ASIO
ASIO는 독일 스타인버그에서 개발한 오디오 입출력 API 규격으로, 낮은 지연 시간과 멀티 채널 I/O를 지원하며 윈도우 운영체제에서 주로 사용된다.
2. 이벤트 종류
웹 브라우저에서 발생하는 이벤트는 사용자의 행동이나 브라우저의 상태 변화에 따라 다양하게 발생한다. 이러한 이벤트들은 크게 마우스, 키보드, HTML 프레임/객체, HTML 폼, 사용자 인터페이스, 변형, 진행 이벤트 등으로 분류할 수 있다.
- 마우스 이벤트: 사용자가 마우스를 움직이거나 클릭하는 등의 행동에 따라 발생한다. 예를 들어, `click`은 요소 위에서 마우스 버튼을 클릭했을 때, `mouseover`는 마우스 포인터가 요소 위로 이동했을 때 발생한다.
- 키보드 이벤트: 사용자가 키보드를 누르거나 뗄 때 발생한다. `keydown`, `keypress`, `keyup` 등이 있다.
- HTML 프레임/객체 이벤트: 웹 페이지의 프레임이나 객체의 로딩 상태와 관련된 이벤트이다. `load`는 모든 콘텐츠 로딩이 완료되었을 때, `error`는 로딩 중 오류가 발생했을 때 발생한다.
- HTML 폼 이벤트: 사용자가 폼(form) 요소를 조작할 때 발생한다. `submit`은 폼이 제출될 때, `change`는 입력 필드의 값이 변경되었을 때 발생한다.
- 사용자 인터페이스 이벤트: `focusin`, `focusout`, `DOMActivate` 등이 있으며, 요소가 포커스를 받거나 잃을 때, 활성화될 때 발생한다.
- 변형 이벤트: DOM(Document Object Model)의 구조가 변경될 때 발생한다. 예를 들어, `DOMNodeInserted`는 새로운 노드가 추가되었을 때 발생한다.
- 진행 이벤트: `loadstart`, `progress`, `load` 등은 XMLHttpRequest 및 파일 API 등에서 데이터 로딩 진행 상황을 나타내는 데 사용된다.
W3C의 분류와 일치하지 않는 경우도 있으며, "DOM"으로 시작하는 이벤트는 현재 잘 지원되지 않아 W3C DOM 레벨 3에서 더 이상 사용되지 않는다.
모질라, 오페라는 ''DOMAttrModified'', ''DOMNodeInserted'', ''DOMNodeRemoved'' 및 ''DOMCharacterDataModified''를 지원한다. 크롬과 사파리는 ''DOMAttrModified''를 제외하고 이러한 이벤트를 지원한다.
HTML 5 사양에 추가된[13] ''DOMContentLoaded''는 이미지와 같은 관련 파일의 로딩 전에 발생하는 이벤트이다. 모질라, 오페라 9, Webkit 렌더링 엔진 빌드 500 이상[14][15], 인터넷 익스플로러 9[16] 등에서 지원하며, 구글 크롬과 사파리 3.1+의 모든 버전에서도 구현되었다.
오페라 9는 웹 폼 2.0 이벤트인 ''DOMControlValueChanged'', ''invalid'', ''forminput'', ''formchange''도 지원한다.
각 이벤트의 종류, 설명, 버블링 여부, 취소 가능 여부는 다음 표와 같다.
2. 1. HTML 이벤트
터치 스크린 장치에서 실행되는 웹 브라우저는 iOS 및 안드로이드와 같은 추가 이벤트를 생성한다.[9] 이러한 터치 이벤트는 다음과 같다.
W3C 권고안 초안에서 `TouchEvent`는 `TouchList`의 `Touch` 위치, 활성화된 수정 키, 대상 DOM 요소 내의 `Touch` 위치 목록 및 이전 `TouchEvent` 이후 변경된 `Touch` 위치 목록을 전달한다.[9] 애플은 이 작업 그룹에 참여하지 않았으며, 권고안 과정 후반부에 특허를 공개하여 터치 이벤트 사양의 W3C 권고를 지연시켰다.[10]
2. 1. 1. 일반 이벤트
대부분의 요소 노드에서 생성될 수 있는 다양한 종류의 이벤트가 있다.- 마우스 이벤트.[3][4]
- 키보드 이벤트.
- HTML 프레임/객체 이벤트.
- HTML 폼 이벤트.
- 사용자 인터페이스 이벤트.
- 변형 이벤트(문서 구조 변경 알림).
- 진행 이벤트[5](XMLHttpRequest 및 파일 API[6]에서 사용).
위의 이벤트 분류는 W3C의 분류와 정확히 일치하지 않는다.
"DOM"으로 시작하는 이벤트는 현재 잘 지원되지 않으며, 이로 인해 W3C는 DOM 레벨 3에서 다른 성능상의 이유로 이를 더 이상 사용하지 않는다. 모질라와 오페라는 ''DOMAttrModified'', ''DOMNodeInserted'', ''DOMNodeRemoved'' 및 ''DOMCharacterDataModified''를 지원한다. 크롬과 사파리는 ''DOMAttrModified''를 제외하고 이러한 이벤트를 지원한다.
터치 스크린과 같은 터치 스크린 장치에서 실행되는 웹 브라우저는 iOS (Apple) 및 안드로이드(Google)와 같은 추가 이벤트를 생성한다.[9]
W3C 권고안 초안에서 `TouchEvent`는 `TouchList`의 `Touch` 위치, 활성화된 수정 키, 대상 DOM 요소 내의 `Touch` 위치 목록 및 이전 `TouchEvent` 이후 변경된 `Touch` 위치 목록을 전달한다.[9]
애플(Apple Inc.)은 이 작업 그룹에 참여하지 않았으며, 권고안 과정 후반부에 특허를 공개하여 터치 이벤트 사양의 W3C 권고를 지연시켰다.[10]
2. 1. 2. 터치 이벤트
터치 스크린 장치에서 발생하는 이벤트는 다음과 같다. 터치 이벤트는 W3C 권고안 초안에 포함되어 있다.[11]
2. 1. 3. 포인터 이벤트
Indie UI 작업 그룹은 웹 애플리케이션 개발자가 플랫폼별 기술 이벤트 대신 표준 사용자 상호 작용 이벤트를 지원하도록 돕고 있다.[12]사용자 인터페이스 디자인 패턴은 소프트웨어 플랫폼, 하드웨어 및 로케일에 따라 다르며, 개인의 선호도에 따라 추가로 맞춤 설정될 수 있기 때문에 스크립팅은 어려울 수 있다. 개인은 자신의 시스템에서 인터페이스 작동 방식에 익숙하며, 선호하는 인터페이스는 웹 애플리케이션 작성자가 선호하는 인터페이스와 다를 수 있다.
예를 들어, 사용자가 마지막 작업을 실행 취소하려는 경우, 웹 애플리케이션 작성자는 다음 모든 이벤트를 "수신 대기"해야 한다.
- Windows 및 Linux: Control+Z
- Mac OS X: Command+Z
- 일부 모바일 장치: 흔들기 이벤트
이전 작업을 "실행 취소"하기 위한 단일 요청을 수신 대기하는 것이 더 간단하다.
2. 2. 인터넷 익스플로러 고유 이벤트
인터넷 익스플로러는 공통(W3C) 이벤트 외에 다양한 이벤트를 추가했으며, 이 중 일부는 다른 브라우저에서도 사실상 표준으로 구현되었다.
Mozilla, Safari, Opera는 XMLHttpRequest 객체에 대한 readystatechange 이벤트도 지원한다. Mozilla는 또한 전통적인 이벤트 등록 방법(DOM 레벨 0)을 사용하여 beforeunload 이벤트를 지원한다. Mozilla와 Safari는 또한 contextmenu를 지원하지만, Mac용 인터넷 익스플로러는 지원하지 않는다.
Firefox 6 이상은 beforeprint 및 afterprint 이벤트를 지원한다.
2. 3. XUL 이벤트
모질라에서 정의한 XUL 요소에서만 작동하는 일련의 이벤트들이 있다.
2. 4. 기타 이벤트
HTML 5 사양에 추가된[13] ''DOMContentLoaded''는 이미지와 같은 관련 파일의 로딩 전에 발생하는 이벤트이다. 모질라, 오페라 9, Webkit 렌더링 엔진 빌드 500 이상[14][15], 인터넷 익스플로러 9[16] 등에서 지원하며, 구글 크롬과 사파리 3.1+의 모든 버전에서도 구현되었다.오페라 9는 웹 폼 2.0 이벤트인 ''DOMControlValueChanged'', ''invalid'', ''forminput'', ''formchange''도 지원한다.
3. 이벤트 흐름
이벤트 흐름은 이벤트가 발생했을 때 이벤트 타겟을 찾아가는 과정을 말한다. 이 과정은 캡처링, 타겟, 버블링 단계로 나뉜다.
두 개의 이벤트 타겟이 https://dom.spec.whatwg.org/#trees 트리에 있고, 두 타겟 모두 "click"과 같은 동일한 이벤트 유형에 이벤트 리스너가 등록되어 있다고 가정해 보자. 사용자가 내부 요소를 클릭하면, 브라우저는 다음 두 가지 방법 중 하나로 이벤트를 처리할 수 있다.
- 이벤트 캡처링: 외부 요소에서 내부 요소 순으로 이벤트를 발생시킨다. 이 방식은 넷스케이프 내비게이터에서 사용되었다.
- 이벤트 버블링: 내부 요소에서 외부 요소 순으로 이벤트를 발생시킨다. 이 방식은 인터넷 익스플로러를 비롯한 여러 브라우저에서 사용되었다.[17]
W3C는 이 두 방식의 중간 입장을 취했다.[18] W3C에 따르면, 이벤트는 다음 세 단계를 거친다.
1. 캡처 단계: 이벤트가 루트 이벤트 타겟에서 이벤트 타겟으로 전달된다.
2. 타겟 단계: 이벤트가 이벤트 타겟에 도달한다.
3. 버블 단계 (선택 사항): 이벤트가 이벤트 타겟에서 다시 루트 이벤트 타겟으로 전달된다. 이 단계는 버블링되는 이벤트(`event.bubbles == true`)에 대해서만 발생한다.
이벤트 흐름은 [https://domevents.dev]에서 시각적으로 확인할 수 있다.
3. 1. 이벤트 중단
`event.stopPropagation()` 또는 `event.stopImmediatePropagation()` 메서드를 사용하여 이벤트가 이벤트 리스너를 통과하는 것을 중단할 수 있다.- `event.stopPropagation()`: 현재 이벤트 단계에서 현재 이벤트 대상에 연결된 모든 이벤트 리스너가 완료된 후 이벤트가 중단된다.
- `event.stopImmediatePropagation()`: 이벤트가 즉시 중단되고 더 이상 이벤트 리스너가 실행되지 않는다.
이벤트가 중단되면 더 이상 이벤트 경로를 따라 이동하지 않는다. 이벤트를 중단하는 것이 이벤트를 취소하는 것은 아니다. 구형 브라우저에서는 다음과 같은 방법을 사용한다.
- `event.cancelBubble`을 `true`로 설정 (인터넷 익스플로러)
- `event.returnValue` 속성을 `false`로 설정
3. 2. 이벤트 취소
취소 가능한 이벤트는 `event.preventDefault()`를 호출하여 취소할 수 있다. 이벤트를 취소하면 해당 이벤트에 대한 기본 브라우저 동작을 사용하지 않게 된다. 이벤트가 취소되면 `event.defaultPrevented` 속성이 `true`로 설정된다. 이벤트를 취소해도 이벤트 경로는 계속 진행된다.[1]4. 이벤트 객체
이벤트 객체는 대상 요소, 눌린 키, 눌린 마우스 버튼, 마우스 위치 등 특정 이벤트에 대한 다양한 정보를 제공한다. 이 문서에서는 W3C 이벤트 객체만 다룬다.[19]
5. 이벤트 처리 모델
DOM 이벤트 처리 모델은 웹 페이지에서 발생하는 이벤트를 처리하는 방식을 정의한다. 주요 모델로는 DOM Level 0, DOM Level 2, 그리고 인터넷 익스플로러 고유 모델이 있다.
DOM Level 0은 넷스케이프 내비게이터에 의해 도입된 초기 모델이며, 2005년까지 널리 사용되었다. 인라인 모델과 전통적인 모델 두 가지 유형이 있다.
DOM Level 2는 월드 와이드 웹 컨소시엄(W3C)에서 표준화한 모델로, 이벤트 리스너를 등록하고 제거하는 기능을 제공하여 유연한 이벤트 처리가 가능하다.[20]
인터넷 익스플로러 8 및 이전 버전에서는 W3C 표준 이벤트 모델과 다른 고유한 이벤트 모델을 사용했다. 이 모델은 `attachEvent`, `detachEvent`, `fireEvent` 메서드를 사용하여 이벤트를 처리했지만, W3C 표준 모델과 몇 가지 차이점이 있어 호환성 문제가 발생할 수 있었다.[21]
5. 1. DOM Level 0
이 이벤트 처리 모델은 넷스케이프 내비게이터에 의해 도입되었으며, 2005년까지 가장 크로스 브라우저 모델로 남아있다. 이 모델에는 인라인 모델과 전통적인 모델 두 가지 유형이 있다.5. 2. DOM Level 2
DOM Level 2에서는 이벤트 처리기가 요소의 속성으로 추가된다.[20] 다음은 그 예시이다.```html
Inline Event Handling
Hey Joe!
```
위 예제에서 하이퍼링크를 클릭하면 "Hey Joe"라는 메시지가 있는 경고 대화 상자가 나타난다. 이벤트 처리기에서 false를 반환하면 기본 클릭 동작이 취소된다.
일반적으로 인라인 모델은 사용자 지정 인수를 사용하여 이벤트 처리기를 등록할 수 있다고 오해하는 경우가 있다. 위의 `triggerAlert` 함수의 `name`이 그러한 예로 보일 수 있다. 하지만 실제로는 브라우저의 자바스크립트 엔진이 `onclick` 속성에 있는 문을 포함하는 익명 함수를 생성한다. 요소의 `onclick` 처리기는 다음과 같은 익명 함수에 바인딩된다.
```javascript
function () {
triggerAlert('Joe');
return false;
}
```
이러한 자바스크립트 이벤트 모델의 제한 사항은 일반적으로 이벤트 처리기의 함수 객체에 속성을 할당하거나 클로저를 사용하여 해결한다.
5. 3. 인터넷 익스플로러 고유 모델
인터넷 익스플로러 8 및 이전 버전에서는 W3C 표준 이벤트 모델과 다른 고유한 이벤트 모델을 사용했다. 이 모델에서는 이벤트를 처리하기 위해 다음과 같은 메서드들을 사용했다.- `attachEvent`: 이벤트 핸들러를 등록한다.
- `detachEvent`: 이벤트 핸들러를 제거한다.
- `fireEvent`: 이벤트를 발생시킨다.
이 방식은 W3C 표준 모델과 다음과 같은 차이점이 있었다.
참조
[1]
웹사이트
DOM Standard
https://dom.spec.wha[...]
2021-05-25
[2]
웹사이트
JavaScript DOM Events
https://www.w3school[...]
2019-08-03
[3]
웹사이트
7.8 Drag and drop — HTML5
http://www.w3.org/TR[...]
[4]
웹사이트
HTML Drag and Drop API
https://developer.mo[...]
2024-03-28
[5]
웹사이트
Progress Events
http://www.w3.org/TR[...]
[6]
웹사이트
File API
http://www.w3.org/TR[...]
[7]
웹사이트
Element: Mousemove event - Web APIs | MDN
https://developer.mo[...]
2023-12-22
[8]
웹사이트
Document Object Model (DOM) Level 3 Events Specification (working draft)
http://www.w3.org/TR[...]
W3C
2013-04-17
[9]
웹사이트
Touch Events version 2 - W3C Editor's Draft
http://dvcs.w3.org/h[...]
W3C
2011-11-14
[10]
웹사이트
Apple using patents to undermine open standards again
http://my.opera.com/[...]
opera.com
2011-12-09
[11]
웹사이트
Pointer Events
http://www.w3.org/TR[...]
[12]
웹사이트
IndieUI: Events 1.0
http://www.w3.org/TR[...]
[13]
웹사이트
HTML Standard
https://www.w3.org/T[...]
[14]
webarchive
https://web.archive.[...]
2010-06-11
[15]
웹사이트
Which browsers support native DOMContentLoaded event? « Perfection Labs Development Tips
http://perfectionlab[...]
2011-06-29
[16]
웹사이트
Test Drive Redirect
http://ie.microsoft.[...]
2010-05-06
[17]
웹사이트
Introduction to Events
http://www.quirksmod[...]
Quirksmode.org
2012-09-15
[18]
웹사이트
Document Object Model (DOM) Level 2 Events Specification
http://www.w3.org/TR[...]
W3C
2000-11-13
[19]
웹사이트
Document Object Model (DOM) Level 3 Events Specification (working draft)
http://www.w3.org/TR[...]
W3C
2013-04-17
[20]
웹사이트
Early event handlers
http://www.quirksmod[...]
Quirksmode.org
2012-09-15
[21]
웹사이트
Traditional event registration model
http://www.quirksmod[...]
Quirksmode.org
2012-09-15
[22]
웹사이트
DOM Level 3 Events support in IE9
http://blogs.msdn.co[...]
Microsoft
2010-03-26
[23]
웹사이트
Compatibility changes in IE11 Preview
http://msdn.microsof[...]
Microsoft
2013-09-09
[24]
웹인용
DOM Standard
https://dom.spec.wha[...]
2021-05-25
[25]
웹인용
JavaScript DOM Events
https://www.w3school[...]
2019-08-03
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com