DOM 이벤트

이 기사에는 여러 가지 문제가 있습니다.이를 개선하거나 토크 페이지에서 이러한 문제를 논의할 수 있도록 도와주시기 바랍니다.(이러한 템플릿 메시지를 제거하는 방법 및 시기에 대해 알아보십시오.) 이 기사는 매뉴얼이나 가이드북처럼 쓰여 있습니다. 설명적이고 중립적인 관점에서 이 기사를 다시 작성하고 조언이나 지침을 삭제할 수 있도록 도와주십시오.(2018년 7월) (이 템플릿 메시지를 제거하는 방법 및 시기에 대해 알아보기) 이 기사는 너무 기술적이어서 대부분의 독자들이 이해하기 어려울 수 있습니다. 기술적인 세부 사항을 삭제하지 않고 전문가가 아닌 사람들이 이해할 수 있도록 개선할 수 있도록 도와주시기 바랍니다.(2018년 7월) (이 템플릿 메시지를 제거하는 방법 및 시기에 대해 알아보기) (이 템플릿 메시지를 제거하는 방법 및 시기에 대해 알아보십시오.)

DOM(Document Object Model) 이벤트는 어떤 일이 발생했거나 발생하고 있다는 신호이며, 사용자 상호 작용 ^[1]또는 브라우저에 의해 트리거될 수 있습니다.JavaScript, JScript, ECMAScript, VBScript 및 Java와 같은 클라이언트 측 스크립팅 언어는 HTML, XHTML, XUL 및 SVG 문서와 같이 DOM 트리 내의 요소 노드에 다양한 이벤트 처리기 또는 수신기를 등록할 수 있습니다.

DOM 이벤트의 예:

• 사용자가 마우스를 클릭할 때
• 웹 페이지가 로드된 경우
• 이미지가 로드된 경우
• 마우스가 요소 위로 이동할 때
• 입력 필드가 변경된 경우
• HTML 양식을 제출할 때
• 사용자가 키를^[2] 누를 때

역사적으로 DOM과 마찬가지로 다양한 웹 브라우저에서 사용되는 이벤트 모델에는 호환성 문제를 일으키는 몇 가지 중요한 차이점이 있었습니다.이에 대처하기 위해 이벤트 모델은 DOM 레벨 2에서 월드 와이드 웹 컨소시엄(W3C)에 의해 표준화되었습니다.

이벤트

HTML 이벤트

일반적인 사건들

대부분의 요소 노드에서 생성할 수 있는 이벤트 모음은 매우 많습니다.

• 마우스 이벤트.^[3][4]
• 키보드 이벤트.
• HTML 프레임/객체 이벤트입니다.
• HTML 양식 이벤트.
• 사용자 인터페이스 이벤트.
• 변환 이벤트(문서 구조의 변경 사항에 대한 통지).
• 진행^[5] 이벤트(XMLHttpRequest, File API ^[6]등에서 사용).

위의 이벤트 분류는 W3C의 분류와 정확히 동일하지 않습니다.

이름이 "DOM"으로 시작하는 이벤트는 현재 잘 지원되지 않으며, 이러한 이유와 다른 성능상의 이유로 DOM 레벨 3의 W3C에서 더 이상 사용되지 않습니다.Mozilla 및 Opera는 DOMAtrModified, DOMNodeInserted, DOMNodeRemoved 및 DOMCharacterDataModified를 지원합니다.DOMAtrModified를 제외하고 Chrome 및 Safari는 이러한 이벤트를 지원합니다.

터치 이벤트

Apple의 iOS 및 Google의 Android와 같은 터치 지원 장치에서 실행되는 웹 브라우저는 추가 ^{[9]: §5.3} 이벤트를 생성합니다.

W3C 권고안 초안에서, a.TouchEvent전달합니다.TouchList의Touch위치, 활성화된 수정자 키, aTouchList의Touch대상 DOM 요소 내의 위치 및TouchList의Touch이전 이후로 변경된 위치TouchEvent.^[9]

애플은 이 워킹그룹에 참여하지 않았고, 추천 ^[10]과정에서 특허를 공개함으로써 터치 이벤트 사양의 W3C 추천을 연기했습니다.

포인터 이벤트

마우스, 터치 패널 및 펜을 비롯한 다양한 유형의 입력 장치가 있는 장치의 웹 브라우저는 통합 입력 이벤트를 생성할 수 있습니다.사용자는 스타일러스 펜을 사용할 때 어떤 유형의 입력 장치를 눌렀는지, 해당 장치에서 어떤 버튼을 눌렀는지, 얼마나 강하게 눌렀는지 확인할 수 있습니다.2013년 10월 현재 이 이벤트는 Internet Explorer 10 및 ^[11]11에서만 지원됩니다.

인디 UI 이벤트

아직 실제로 구현되지 않은 Indie UI 작업 그룹은 웹 애플리케이션 개발자가 표준 사용자 상호 작용 이벤트를 지원할 수 있도록 지원하기를 원합니다. 이 이벤트와 ^[12]일치할 수 있는 다양한 플랫폼별 기술 이벤트를 처리할 필요가 없습니다.

사용 가능한 인터페이스를 스크립팅하는 것은 특히 사용자 인터페이스 설계 패턴이 소프트웨어 플랫폼, 하드웨어 및 로케일에 따라 다르며 이러한 상호 작용이 개인 선호도에 따라 추가로 사용자 지정될 수 있다는 점을 고려할 때 어려울 수 있습니다.개인은 자신의 시스템에서 인터페이스가 작동하는 방식에 익숙하며, 선호하는 인터페이스는 웹 응용 프로그램 작성자가 선호하는 인터페이스와 자주 다릅니다.

예를 들어 마지막 작업을 취소하려는 사용자의 의도를 가로채려는 웹 응용프로그램 작성자는 다음과 같은 모든 이벤트에 대해 "수신"해야 합니다.

• Windows 및 Linux의 경우 컨트롤+Z.
• Mac OS X에서 명령+Z.
• 일부 모바일 장치에서 이벤트를 흔듭니다.

이전 작업을 "실행 취소"하기 위해 정규화된 단일 요청을 듣는 것이 더 간단합니다.

Internet Explorer 관련 이벤트

일반(W3C) 이벤트 외에 Internet Explorer(인터넷 익스플로러)에서 두 가지 주요 이벤트 유형이 추가됩니다.일부 이벤트는 다른 브라우저에서 사실상의 표준으로 구현되었습니다.

• 클립보드 이벤트.
• 데이터 바인딩 이벤트.^{[clarification needed]}

Mozilla, Safari 및 Opera는 XMLHttpRequest 개체에 대한 준비 상태 변경 이벤트도 지원합니다.Mozilla는 또한 기존 이벤트 등록 방법(DOM 수준 0)을 사용하여 언로드 전 이벤트를 지원합니다.Mozilla 및 Safari도 상황에 맞는 메뉴를 지원하지만 Internet Explorer for Mac은 지원하지 않습니다.

Firefox 6 이상에서는 인쇄 전 이벤트와 인쇄 후 이벤트를 지원합니다.

XUL 이벤트

공통(W3C) 이벤트 외에도 Mozilla는 XUL ^{[citation needed]}요소에서만 작동하는 이벤트 집합을 정의했습니다.

기타 이벤트

Mozilla 및 Opera 9의 경우 DOM 콘텐츠가 로드될 때 발생하는 DOM ContentLoaded 및 DOM FrameContentLoaded라는 문서화되지 않은 이벤트도 있습니다.이는 관련 파일(예: 이미지)을 로드하기 전에 실행되기 때문에 "로드"와 다릅니다.그러나 DOM ContentLoaded가 HTML 5 ^[13]사양에 추가되었습니다.DOM ContentLoaded 이벤트는 Webkit 렌더링 엔진 빌드 500+^[14][15]에도 구현되었습니다.이는 모든 버전의 Google Chrome 및 Safari 3.1+와 관련이 있습니다. DOM ContentLoaded는 Internet Explorer ^[16]9에서도 구현됩니다.

Opera 9는 또한 Web Forms 2.0 이벤트 DOMControlValueChanged, invalid, 폼 입력 및 폼 변경을 지원합니다.

이벤트 흐름

두 이벤트 대상이 트리에 참여하는 상황을 고려합니다.둘 다 이벤트 수신기가 동일한 이벤트 유형에 등록되어 있습니다(예: "클릭").사용자가 내부 요소를 클릭하면 두 가지 방법으로 처리할 수 있습니다.

• 외부에서 내부로 요소를 트리거합니다(이벤트 캡처).이 모델은 Netscape Navigator에서 구현됩니다.
• 내부에서 외부로 요소를 트리거합니다(이벤트 버블링).이 모델은 Internet Explorer 및 기타 ^[17]브라우저에서 구현됩니다.

W3C는 이 ^{[18]: §1.2} 투쟁에서 중간 위치를 차지합니다.

W3C에 따르면 이벤트 대상이 트리에 참여할 때 이벤트는 세 단계를 거칩니다.

1. 캡처 단계: 이벤트가 루트 이벤트 대상에서 이벤트 대상으로 이동합니다.
2. 대상 단계: 이벤트가 이벤트 대상을 통과합니다.
3. 버블 단계(옵션): 이벤트가 이벤트 대상에서 루트 이벤트 대상으로 다시 위로 이동합니다.버블 단계는 버블이 발생하는 이벤트에만 발생합니다(여기서).event.bubbles == true)

이 이벤트 흐름의 시각화는 https://domevents.dev에서 확인할 수 있습니다.

이벤트 중지

이벤트가 이벤트 수신기를 통해 이동하는 동안 이벤트를 중지할 수 있습니다.event.stopPropagation()또는event.stopImmediatePropagation()

• event.stopPropagation()현재 이벤트 단계에서 현재 이벤트 대상에 연결된 모든 이벤트 수신기가 완료된 후 이벤트가 중지됩니다.
• event.stopImmediatePropagation()이벤트가 즉시 중지되고 더 이상 이벤트 수신기가 실행되지 않습니다.

이벤트가 중지되면 이벤트 경로를 따라 더 이상 이동하지 않습니다.이벤트를 중지해도 이벤트는 취소되지 않습니다.

이벤트를 중지하는 레거시 메커니즘

• 설정event.cancelBubble로.true(Internet Explorer)
• 설정event.returnValue에 대한 재산.false

이벤트 취소

A cancelable이벤트는 호출을 통해 취소할 수 있습니다.event.preventDefault()이벤트를 취소하면 해당 이벤트에 대한 기본 브라우저 동작이 해제됩니다.이벤트가 취소되면,event.defaultPrevented속성이 다음으로 설정됩니다.true이벤트를 취소해도 이벤트 경로를 따라 이동하는 것이 중지되지 않습니다.

이벤트 개체

이벤트 개체는 대상 요소, 키 누름, 마우스 버튼 누름, 마우스 위치 등 특정 이벤트에 대한 많은 정보를 제공합니다.안타깝게도 이 영역에는 매우 심각한 브라우저 비호환성이 있습니다.따라서 이 문서에서는 W3C Event 개체만 설명합니다.

이벤트 처리 모델

DOM 레벨 0

이 이벤트 처리 모델은 Netscape Navigator에 의해 도입되었으며 2005년 ^{[citation needed]}현재^[update] 가장 많은 크로스 브라우저 모델로 남아 있습니다.인라인 모델과 기존 모델의 두 가지 모델 유형이 있습니다.

인라인 모델

인라인 ^[20]모델에서 이벤트 핸들러는 요소의 속성으로 추가됩니다.아래 예제에서는 하이퍼링크를 클릭하면 "Hey Joe" 메시지가 포함된 경보 대화 상자가 나타납니다.이벤트 핸들러에서 false를 반환하면 기본 클릭 작업이 취소됩니다.

<!doctype html> <http lang="en"> <head> <http charset="utf-8"> <http>인라인 이벤트 처리 </title> </head> <body> <h1> </h1> <p> 클릭="트리거에서 헤이 <a href="http://www.example.com "경고('Joe'; false 반환;""Joe</a>!</p> <script> 함수 트리거경고(이름) {창}.alert("Hey" + 이름); } </script> </body> </html>

인라인 모델에 대한 일반적인 오해^{[citation needed]} 중 하나는 이벤트 핸들러를 사용자 지정 인수로 등록할 수 있다는 것입니다.name에서triggerAlert기능.위의 예에서 그런 것처럼 보일 수 있지만, 실제로 일어나고 있는 것은 브라우저의 자바스크립트 엔진이 다음과 같은 명령문을 포함하는 익명 함수를 만드는 것입니다.onclick기여하다.그onclick요소의 핸들러는 다음과 같은 익명 함수에 바인딩됩니다.

기능. () {  트리거 알림('조');  돌아가다 거짓의; } 

JavaScript 이벤트 모델의 이러한 제한은 일반적으로 이벤트 핸들러의 함수 개체에 속성을 할당하거나 폐쇄를 사용하여 해결됩니다.

전통적 모델

기존 ^[21]모델에서는 스크립트를 통해 이벤트 핸들러를 추가하거나 제거할 수 있습니다.인라인 모델과 마찬가지로 각 이벤트는 하나의 이벤트 핸들러만 등록할 수 있습니다.처리기 이름을 요소 개체의 이벤트 속성에 할당하여 이벤트를 추가합니다.이벤트 핸들러를 제거하려면 속성을 null로 설정하기만 하면 됩니다.

<!doctype html> <http lang="en"> <head> <http charset="utf-8"> <http>전통적인 이벤트 처리 </title> </head> <body> <h1> 전통적인 이벤트 처리 </h1> <p> 헤이조!</p> <script> var 트리거경고 = 함수() { 창.alert("Hey Joe"); }; // 이벤트 핸들러 문서 할당. 클릭 = 트리거Alert; // 다른 이벤트 핸들러 창 할당.onload = 트리거Alert; // 방금 할당된 window.onload = null; </script> </body> </body> 이벤트 핸들러를 제거합니다.

매개 변수 추가하기

넝쿨 이름. = '조'; 문서.클릭하면 = (기능. (이름.) {  돌아가다 기능. () {   기민한(이봐 + 이름. + '!');  }; }(이름.)); 

내부 기능은 범위를 유지합니다.

DOM 레벨 2

W3C는 DOM 레벨 ^[18]2에서 보다 유연한 이벤트 처리 모델을 설계했습니다.

알아야 할 유용한 몇 가지 사항:

• 이벤트가 거품이 되는 것을 방지하기 위해 개발자는 다음과 같이 전화해야 합니다.stopPropagation()이벤트 개체의 메서드입니다.
• 호출할 이벤트의 기본 작업을 방지하려면 개발자는 다음을 호출해야 합니다.preventDefault()이벤트 개체의 메서드입니다.

기존 모델과의 주요 차이점은 동일한 이벤트에 대해 여러 이벤트 핸들러를 등록할 수 있다는 점입니다.그useCapture옵션을 사용하여 버블링 단계 대신 캡처 단계에서 핸들러를 호출해야 함을 지정할 수도 있습니다.이 모델은 Mozilla, Opera, Safari, Chrome 및 Konqueror에서 지원됩니다.

기존 모델에 사용된 예제 다시 쓰기

<!doctype html> <http lang="en"> <head> <http charset="utf-8"> <http>DOM 레벨 2 </title> </head> <body> <h1> DOM 레벨 2 </h1> <p> 헤이조!</p> <script> varheyJoe = 함수() { window.alert("Hey Joe!"); } // 이벤트 핸들러 문서를 추가합니다. addEventListener("click", hey Joe, true ); // 캡처 단계 // 다른 이벤트 핸들러 창을 추가합니다. eventListener("load", hey Joe, false); // 방금 추가한 이벤트 핸들러 창을 제거합니다,false ); </script> </body> </cisco>

Internet Explorer 관련 모델

버전 8 이전의 Microsoft Internet Explorer는 W3C 표준의 비준 전에 자체 모델이 만들어졌기 때문에 W3C 모델을 따르지 않습니다.Internet Explorer 9는 DOM 수준 3 ^[22]이벤트를 따르고 Internet Explorer 11은 Microsoft 특정 ^[23]모델에 대한 지원을 삭제합니다.

알아야 할 유용한 몇 가지 사항:

• 이벤트의 거품을 방지하기 위해 개발자는 이벤트의 값을 설정해야 합니다.cancelBubble소유물.
• 호출할 이벤트의 기본 작업을 방지하려면 개발자가 이벤트의 작업을 설정해야 합니다.returnValue소유물.
• 키워드는 글로벌 개체를 나타냅니다.

이 모델은 동일한 이벤트에 대해 여러 이벤트 핸들러를 등록할 수 있다는 점에서 기존 모델과 다릅니다.하지만, 그useCapture옵션을 사용하여 캡처 단계에서 처리기를 호출해야 함을 지정할 수 없습니다.이 모델은 Microsoft Internet Explorer 및 Trident 기반 브라우저(예: Maxthon, Avant Browser)에서 지원됩니다.

이전 Internet Explorer 관련 모델에 사용된 예제 다시 쓰기

<!doctype html> <http lang="en"> <head> <http charset="utf-8"> <http>인터넷 익스플로러 전용 모델 </title> </head> <본체> <h1>인터넷 익스플로러 전용 모델 </h1> <p> 야 조!</p> <script> varheyJoe = 함수() { window.alert("Hey Joe!"); } // 이벤트 핸들러 문서를 추가합니다. attachEvent("onclick", heyJoe); // 다른 이벤트 핸들러 창을 추가합니다. attachEvent("onload", heyJoe); // 방금 추가한 이벤트 핸들러 창을 제거합니다. detachEvent("onload, heyJoe); </> body> </html>

레퍼런스

진일보한 내용

• 데이텔, 하비(2002).인터넷과 월드 와이드 웹: 프로그래밍 방법 (Second Edition)ISBN 0-13-030897-8
• Mozilla 조직.(2009).DOM 이벤트 참조.2009년 8월 25일 검색됨.
• Quirks 모드(2008).이벤트 호환성 테이블입니다.2008년 11월 27일 검색됨.
• http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

외부 링크

• 문서 객체 모델 레벨 2 이벤트 규격
• 문서 객체 모델(DOM) 레벨 3 이벤트 작업 초안
• DOM4: 이벤트(편집자 초안)
• UI 이벤트 작업 초안
• 포인터 이벤트 W3C 후보 권장 사항
• MSDN 포인터 이벤트
• domevents.dev - 탐색을 통해 DOM 이벤트에 대해 알 수 있는 시각화 도구
• 이벤트 버블링 및 캡처를 위한 JS 피들