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 및 DOMCaracterDataModified를 지원합니다.Chrome 및 Safari는 DOMAtrModified를 제외하고 이러한 이벤트를 지원합니다.

터치 이벤트

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

W3C 초안에서는TouchEvent전달하다TouchList의Touch로케이션, 액티브했던 수식 키,TouchList의Touch대상 DOM 요소 내의 위치 및TouchList의Touch이전부터 변경된 위치TouchEvent를 클릭합니다.^[9]

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

포인터 이벤트

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

Indie UI 이벤트

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

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

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

• Windows 및 Linux에서 Control+Z를 사용할 수 있습니다.
• Mac OS X의 Command+Z.
• 일부 모바일 장치에서 이벤트를 흔듭니다.

하나의 정규화된 요청을 수신하여 이전 작업을 "실행 취소"하는 것이 더 간단합니다.

Internet Explorer 고유 이벤트

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

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

Mozilla, Safari 및 Opera는 XMLHttpRequest 객체에 대한 readystatechange 이벤트도 지원합니다.또한 Mozilla는 기존 이벤트 등록 방식(DOM 레벨 0)을 사용하여 언로드 전 이벤트를 지원합니다.Mozilla 및 Safari도 컨텍스트 메뉴를 지원하지만 Mac용 Internet Explorer는 지원하지 않습니다.

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

XUL 이벤트

일반적인(W3C) 이벤트와 더불어 Mozilla는 XUL ^{[citation needed]}요소에서만 작동하는 일련의 이벤트를 정의했습니다.

기타 이벤트

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

Opera 9는 Web Forms 2.0 이벤트 DOM Control Value Changed, invalid, 폼 입력 및 폼 변경도 지원합니다.

이벤트 흐름

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

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

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

W3C에 따르면 이벤트타깃이 트리에 참여하면 이벤트는 다음 3단계를 거칩니다.

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. 이벤트를 취소해도 이벤트가 이벤트 경로를 따라 이동하는 것은 중지되지 않습니다.

이벤트 오브젝트

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

이벤트 처리 모델

DOM 레벨 0

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

인라인 모델

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

<!doctpe html> <backet lang="en"> <head> <backet charset="utf-8"> <backet>인라인 이벤트 처리 </title> </head> </body> <h1> 인라인 이벤트 처리 </h1> <p> Hey <a href="http://www.example.com" onclick="trigger"Alert('Joe'); false를 반환한다;"> Joe!</p> <스크립트> 함수 트리거Alert(name) { 창.alert("Hey " + name"); } </script> </body> </html>

인라인 모델의 일반적인 오해^{[citation needed]} 중 하나는 이벤트핸들러를 커스텀인수로 등록할 수 있다고 믿는 것입니다.name에서triggerAlert기능.위의 예에서는 그렇게 보일 수 있지만, 실제로 일어나고 있는 일은 브라우저의 JavaScript 엔진에 의해 어나니머스 함수가 생성되고 있습니다.onclick기여하다.그onclick요소의 핸들러는 다음과 같은 어나니머스 함수에 바인드됩니다.

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

JavaScript 이벤트모델의 이러한 제한은 보통 이벤트핸들러의 함수 오브젝트에 속성을 할당하거나 클로저를 사용함으로써 해결됩니다.

종래의 모델

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

<!doctpe html> <backet lang="en"> <head> <backet charset="utf-8"> <backet>종래의 이벤트 처리</title></head><h1>종래의 이벤트 처리</h1><p>Hey Joe!</p> <script> var 트리거경고 = 기능() { 창.alert("Hey Joe"); }; // 이벤트 핸들러 문서를 할당합니다.onclick = 트리거경고; // 다른 이벤트 핸들러 window.onload = 트리거 할당Alert; // 방금 할당된 window.onload = null; </script> </body> </body> 이벤트 핸들러를 삭제합니다.

매개 변수를 추가하려면:

변화하다 이름. = '조'; 문서.클릭 = (기능. (이름.) {  돌아가다 기능. () {   경계.('이봐' + 이름. + '!');  }; }(이름.)); 

내부 함수는 해당 범위를 유지합니다.

DOM 레벨 2

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

알아야 할 유용한 정보:

• 이벤트가 거품이 끼지 않도록 개발자는stopPropagation()이벤트 객체의 메서드.
• 이벤트의 기본 액션이 호출되지 않도록 하려면 개발자는preventDefault()이벤트 객체의 메서드.

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

기존 모델에서 사용된 예제의 개서

<!doctpe html> <backet lang="en"> <head> <backet charset="utf-8"> <backet>DOM 레벨 2 </title> </head> <h1> DOM 레벨 2 </h1> <p> Hey Joe!</p> <script> var heyJoe = 함수() { 창.alert("Hey Joe!"), } // 이벤트 핸들러 문서를 추가합니다.addEventListener("클릭", heyJoe, true"); // 캡처 단계 // 추가 이벤트 핸들러 창을 추가합니다.addEventListener("load"), heyJoe, false ); // 버블 단계 // 추가된 이벤트 핸들러를 제거합니다.

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 고유 모델에서 사용된 예제의 개서

<!doctpe html> <backet lang="en"> <head> <backet charset="utf-8"> <backet>Internet Explorer 고유 모델 </title> </head> <h1>Internet Explorer 고유의 모델 </h1> <p> Hey Joe!</p> <script> var heyJoe = 함수() { 창.alert("Hey Joe!"), } // 이벤트 핸들러 문서를 추가합니다.attachEvent("onclick", heyJoe), // 다른 이벤트 핸들러 창을 추가합니다.attachEvent("onload", heyJoe), // 추가된 이벤트 핸들러를 삭제합니다.detachEvent("onload", heyJoe); </t> </body>

레퍼런스

• 디텔, 하비(2002).인터넷 및 월드 와이드 웹: 프로그램 방법 (제2판). ISBN0-13-030897-8
• Mozilla 조직.(2009).DOM 이벤트 레퍼런스2009년 8월 25일 취득.
• Quirksmode (2008년)이벤트 호환성 테이블2008년 11월 27일 취득.
• http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

외부 링크

• 문서 객체 모델(DOM) 레벨 2 이벤트 사양
• 문서 객체 모델(DOM) 레벨 3 이벤트 작업 초안
• DOM4: 이벤트 (편집자 초안)
• UI 이벤트 작업 초안
• 포인터 이벤트 W3C 후보 권장 사항
• MSDN 포인터 이벤트
• domenvents.dev - 탐색을 통해 DOM 이벤트에 대해 알아보는 비주얼라이저
• 이벤트 버블링 및 캡처용 JS 바이올린

레퍼런스