DOM 이벤트

DOM event

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

DOM 이벤트의 예:

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

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

이벤트

HTML 이벤트

일반적인 사건들

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

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

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

카테고리 유형 기여하다 묘사 거품 취소 가능
마우스 딸깍하는 소리 클릭하면 포인팅 장치 단추를 요소 위에 클릭하면 실행됩니다.클릭은 동일한 화면 위치에서 마우스를 누른 후 마우스를 올리는 것으로 정의됩니다.이러한 이벤트의 순서는 다음과 같습니다.
  • 쥐를 쫓는
  • 마우스를 위로 향하게
  • 딸깍하는 소리
네. 네.
dblclick 깜박깜박 포인팅 장치 단추를 요소 위에 두 번 클릭하면 실행됩니다. 네. 네.
쥐를 쫓는 교외에 포인팅 장치 버튼을 요소 위에 누를 때 발생합니다. 네. 네.
마우스를 위로 향하게 입에 침이 마르도록 포인팅 장치 버튼이 요소 위에서 해제될 때 발생합니다. 네. 네.
마우스로 보다 마우스 오버로 포인팅 장치가 요소로 이동될 때 발생합니다. 네. 네.
마우스[7] 이동 무브먼트로 포인팅 장치가 요소 위에 있을 때 이동할 때 발생합니다. 네. 네.
쥐가 나다 외출 중인 포인팅 장치가 요소에서 멀어질 때 발생합니다. 네. 네.
드래그스타트 느릿느릿 드래그가 시작될 때 요소에 대해 실행됩니다. 네. 네.
질질 끄는 질질 끄는 이 이벤트는 드래그 작업 중 드래그 소스, 즉 드래그 시작이 시작된 요소에서 발생합니다. 네. 네.
드래그 엔터 온드러제너 끌림이 발생하는 동안 마우스를 요소 위로 처음 이동할 때 실행됩니다. 네. 네.
드래그 휴가 임시 휴가 중인 이 이벤트는 드래그가 발생하는 동안 마우스가 요소를 벗어날 때 발생합니다. 네. 아니요.
질질 끌다 질질 끄는 드래그가 발생할 때 마우스가 요소 위로 이동할 때 이 이벤트가 발생합니다. 네. 네.
떨어지다 즉석에서 드래그 작업이 끝날 때 드롭이 발생하는 요소에서 드롭 이벤트가 발생합니다. 네. 네.
드래그 엔드 서서히 드래그 소스는 드래그 작업이 완료되면 성공 여부와 상관없이 드래그 엔드 이벤트를 수신합니다. 네. 아니요.
키보드 키다운 키다운으로 키보드의 키를 누를 때 키를 누르기 전에 실행됩니다. 네. 네.
키 프레스 건반으로 키보드의 키를 눌렀을 때 키를 누른 후에 실행됩니다. 네. 네.
키를 높입니다 보조를 맞추어 키보드의 키를 놓으면 실행됩니다. 네. 네.
HTML 프레임/객체 짐을 싣다 적재 중인 사용자 에이전트가 창, 프레임, 오브젝트 및 이미지를 포함하여 문서 내의 모든 내용 로드를 완료할 때 실행됩니다.

요소의 경우 대상 요소와 모든 내용 로드가 완료되면 실행됩니다.

아니요. 아니요.
짐을 풀다 짐을 풀고 사용자 에이전트가 창 또는 프레임에서 모든 콘텐츠를 제거할 때 실행됩니다.

요소의 경우 대상 요소 또는 해당 내용이 제거될 때 실행됩니다.

아니요. 아니요.
중단. 도중에 로드가 완료되기 전에 객체/이미지 로드가 중지될 때 발생합니다. 네. 아니요.
오류 실수로 개체/이미지/프레임을 올바르게 로드할 수 없을 때 발생합니다. 네. 아니요.
크기를 조정합니다. 크기에 맞게 문서 보기의 크기가 조정될 때 발생합니다. 네. 아니요.
두루마리 스크롤하여 요소 또는 문서 보기가 스크롤될 때 발생합니다. 아니요, 문서의 스크롤 이벤트가 창으로[8] 버블링되어야 한다는 점을 제외하고는 아니요.
HTML 양식 선택한다. 선택하여 사용자가 입력 및 텍스트 영역을 포함하여 텍스트 필드에서 일부 텍스트를 선택할 때 실행됩니다. 네. 아니요.
바꾸다 거스름돈으로 컨트롤이 입력 포커스를 잃고 포커스를 얻은 후 값이 수정된 경우 발생합니다. 네. 아니요.
제출하다 제출하면 양식이 제출될 때 발생합니다. 네. 네.
리셋 리셋시에. 양식이 재설정될 때 발생합니다. 네. 아니요.
초점 집중해서 포인팅 장치 또는 탐색을 통해 요소가 포커스를 수신할 때 발생합니다. 아니요. 아니요.
흐림 얼떨결에 포인팅 장치를 통해 또는 탭핑 탐색을 통해 요소의 초점이 손실될 때 발생합니다. 아니요. 아니요.
사용자 인터페이스 에 초점을 맞춘. (계속) HTML 포커스 이벤트와 유사하지만 포커스 가능한 모든 요소에 적용할 수 있습니다. 네. 아니요.
초점을 맞추다 (계속) HTML 블러 이벤트와 유사하지만 모든 포커스 가능한 요소에 적용할 수 있습니다. 네. 아니요.
DOM 활성화 (계속) XUL 명령 이벤트와 유사합니다.마우스 클릭이나 키 누르기 등을 통해 요소가 활성화될 때 실행됩니다. 네. 네.
돌연변이 DOM 하위 트리 수정됨 (계속) 하위 트리가 수정될 때 실행됩니다. 네. 아니요.
DOM 노드 삽입 (계속) 노드가 다른 노드의 자식으로 추가되었을 때 실행됩니다. 네. 아니요.
DOM 노드가 제거됨 (계속) 노드가 DOM 트리에서 제거될 때 발생합니다. 네. 아니요.
문서에서 제거된 DOM 노드 (계속) 문서에서 노드가 제거될 때 발생합니다. 아니요. 아니요.
DOM 노드 삽입문서로 (계속) 문서에 노드를 삽입할 때 발생합니다. 아니요. 아니요.
DOM Attr 수정됨 (계속) 특성이 수정될 때 발생합니다. 네. 아니요.
DOM 문자 데이터 수정됨 (계속) 문자 데이터가 수정될 때 발생합니다. 네. 아니요.
진보. 로드 스타트 (계속) 진행이 시작되었습니다. 아니요. 아니요.
진보. (계속) 진행 중입니다.로드 스타트가 발송된 후. 아니요. 아니요.
오류 (계속) 진행하지 못했습니다.마지막 진행 상황이 발송된 후 또는 진행 상황이 발송되지 않은 경우 로드 시작이 발송된 후. 아니요. 아니요.
중단. (계속) 진행이 종료되었습니다.마지막 진행 상황이 발송된 후 또는 진행 상황이 발송되지 않은 경우 로드 시작이 발송된 후. 아니요. 아니요.
짐을 싣다 (계속) 진행이 성공했습니다.마지막 진행 상황이 발송된 후 또는 진행 상황이 발송되지 않은 경우 로드 시작이 발송된 후. 아니요. 아니요.
로드 엔드 (계속) 진행이 중지되었습니다.오류, 중단 또는 로드 중 하나가 발생한 후 발송됩니다. 아니요. 아니요.

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

터치 이벤트

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

카테고리 유형 기여하다 묘사 거품 취소 가능
만지다 터치 스타트 터치 표면/화면에 손가락을 대면 작동합니다. 네. 네.
터치 엔드의 터치 표면/화면에서 손가락을 제거할 때 발생합니다. 네. 네.
터치 무브 화면에 이미 배치된 손가락이 화면을 가로질러 이동할 때 실행됩니다. 네. 네.
터치터 터치 포인트가 DOM 요소에 의해 정의된 대화형 영역으로 이동할 때 실행됩니다. 네. 네.
터치 휴가 터치 포인트가 DOM 요소에 의해 정의된 대화형 영역 밖으로 이동할 때 발생합니다. 네. 네.
터치 캔슬 사용자 에이전트는 UA 창의 범위 밖으로 이동하는 등 구현 관련 방식으로 TouchPoint가 중단된 경우 이 이벤트 유형을 발송해야 합니다.사용자가 장치나 구현체가 저장하도록 구성된 것보다 터치 표면에 더 많은 터치 포인트(예: 포인터(예: 손가락 또는 스타일러스)를 배치할 때 사용자 에이전트는 이 이벤트 유형을 파견할 수 있습니다.이 경우 TouchList에서 가장 초기의 TouchPoint 개체를 [9]: §5.9 제거해야 합니다. 네. 아니요.

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

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

포인터 이벤트

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

카테고리 유형 기여하다 묘사 거품 취소 가능
포인터 포인터를 아래로 향하게 하는 핀터 다운으로 포인팅 장치 버튼이 활성화되거나 요소 위에 눌렸을 때 실행됩니다. 네. 네.
포인터를 위로 향하게 하다 핀터업으로 포인팅 장치 버튼이 요소 위에서 해제될 때 발생합니다. 네. 네.
포인터 취소 온포인트 캔슬 포인팅 장치가 포인터 다운 이벤트 후 이동/확대에 사용되기 때문에 포인팅 장치가 이벤트를 계속 생성할 가능성이 낮은 경우 발생합니다. 네. 네.
뾰족한 수 아슬아슬한 움직임으로 포인팅 장치가 요소 위에 있을 때 이동할 때 발생합니다. 네. 네.
에 대한 지침. 에 대하여. 포인팅 장치가 요소로 이동될 때 발생합니다. 네. 네.
손가락으로 가리키기 지적 아웃으로 포인팅 장치가 요소에서 멀어질 때 실행됩니다.또한 호버링 없이 포인팅 장치에 의한 포인터 업 후 또는 그 후에 발생합니다. 네. 네.
점쟁이 정확한 입장에서. 포인팅 장치를 요소로 이동하거나 호버링을 지원하지 않는 포인팅 장치의 버튼을 하위 요소 중 하나에서 누르면 실행됩니다. 아니요. 네.
포인터 탈퇴 포인터 휴가 중에. 포인팅 디바이스가 요소에서 멀어지거나 호버링을 지원하지 않는 포인팅 디바이스의 버튼이 하위 요소 위로 해제될 때 발생합니다. 아니요. 네.
포인터 캡처 온포인터 캡처 setPointerCapture 메서드에서 포인터를 캡처할 때 실행됩니다. 네. 아니요.
잃어버린 포인터 캡처 로스트 포인터 캡처 시 releasePointerCapture 메서드에 의해 포인터가 해제될 때 실행됩니다. 네. 아니요.

인디 UI 이벤트

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

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

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

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

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

카테고리 유형 묘사 거품 취소 가능
부탁한다 불청객 사용자가 이전 작업을 "실행 취소"할 것임을 나타냅니다.(실행 취소 관리자 인터페이스로 대체될 수 있습니다.) 네. 네.
재요청 사용자가 이전에 "실행 취소" 작업을 "재실행"할 것임을 나타냅니다.(실행 취소 관리자 인터페이스로 대체될 수 있습니다.) 네. 아니요.
확장 요청 계층 구조의 축소된 섹션(예: 공개 위젯) 또는 분기 노드(예: 트리 보기)에서 정보를 표시하려는 사용자를 나타냅니다. 네. 네.
축소 요청 확장된 섹션(예: 노출 위젯) 또는 계층 구조의 분기 노드(예: 트리 보기)에서 정보를 숨기거나 축소하려는 사용자를 나타냅니다. 네. 네.
요청을 기각합니다. 사용자가 현재 보기를 "해제"(예: 대화 상자 취소 또는 팝업 메뉴 닫기)할 것임을 나타냅니다. 네. 네.
삭제 요청 표시된 요소 또는 현재 보기에서 "삭제" 작업을 시작할 것임을 나타냅니다. 네. 네.
포커스 요청 방향 초점 요청 사용자 에이전트가 "방향 포커스" 요청을 웹 응용프로그램으로 보낼 때 시작됩니다.웹 작성자는 표준 브라우저 포커스 및 흐림 이벤트가 충분할 때 방향 포커스 요청 이벤트를 사용하거나 등록해서는 안 됩니다.이러한 이벤트를 불필요하게 사용하면 성능이 저하되거나 사용자 환경이 저하될 수 있습니다. 네. 네.
선형 포커스 요청 사용자 에이전트가 웹 응용프로그램에 "선형 포커스" 요청을 보낼 때 시작됩니다.웹 작성자는 표준 브라우저 포커스 및 흐림 이벤트가 충분할 때 선형 포커스 요청 이벤트를 사용하거나 등록해서는 안 됩니다.이 이벤트 유형은 논리적 다음 요소가 초점을 맞출 수 없는 데이터 그리드 또는 요청할 때까지 DOM에서조차 특수한 제어 유형에만 필요합니다.이러한 이벤트를 불필요하게 사용하면 성능이 저하되거나 사용자 환경이 저하될 수 있습니다. 네. 네.
팔레트 포커스 요청 사용자 에이전트가 "팔레트 포커스" 요청을 웹 응용프로그램으로 보낼 때 시작됩니다.이 이벤트를 수신하는 웹 앱 작성자는 웹 응용 프로그램의 첫 번째 팔레트로 포커스를 이동하거나 사용 가능한 모든 팔레트 간에 포커스를 순환해야 합니다.참고: 팔레트는 비모달 대화 상자 또는 검사자 창이라고도 합니다. 네. 네.
도구 모음 포커스 요청 사용자 에이전트가 "도구 모음 포커스" 요청을 웹 응용프로그램으로 보낼 때 시작됩니다.이 이벤트를 수신하는 웹 앱 작성자는 웹 응용 프로그램의 기본 도구 모음으로 포커스를 이동하거나 사용 가능한 모든 도구 모음 간에 포커스를 순환해야 합니다. 네. 네.
조작 요청 이동 요청 사용자 에이전트가 x/y 델타 값과 함께 이동 요청을 웹 응용 프로그램으로 보낼 때 시작됩니다.예를 들어 레이아웃 캔버스의 새 위치로 개체를 이동할 때 사용됩니다. 네. 네.
팬 리퀘스트 사용자 에이전트가 x/y 델타 값과 함께 이동 요청을 웹 응용 프로그램으로 보낼 때 시작됩니다.예를 들어 지도나 다른 사용자 정의 이미지 뷰어를 이동하는 동안 중앙점을 변경할 때 사용됩니다. 네. 네.
회전 요청 사용자 에이전트가 원본 x/y 값과 함께 회전 요청을 웹 응용 프로그램에 보낼 때 시작됩니다. 네. 네.
확대/축소 요청 사용자 에이전트가 원점 x/y 값 및 확대/축소 배율과 함께 확대/축소 요청을 웹 응용 프로그램으로 보낼 때 시작됩니다. 네. 네.
스크롤 요청 스크롤 요청 사용자 에이전트가 x/y 델타 값 또는 정의된 다른 scrollType 값 중 하나와 함께 스크롤 요청을 웹 응용 프로그램으로 보낼 때 시작됩니다.작성자는 사용자 정의 스크롤 보기와 함께 이 이벤트 및 uiaction만 사용해야 합니다. 네. 네.
값 변경 요청 값 변경 요청 사용자 에이전트가 웹 응용 프로그램에 값 변경 요청을 보낼 때 시작됩니다.슬라이더, 회전목마 등과 같은 사용자 지정 범위 컨트롤에 사용됩니다. 네. 네.

Internet Explorer 관련 이벤트

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

카테고리 유형 기여하다 묘사 거품 취소 가능
클립보드 인하. 온컷의 선택 항목이 클립보드에 잘린 후에 실행됩니다. 네. 네.
알았다. 사본으로 선택 항목이 클립보드에 복사된 후에 실행됩니다. 네. 네.
풀을 먹입니다 계속해서 클립보드에서 선택한 항목을 붙여넣은 후에 실행됩니다. 네. 네.
베기 전에 컷 전에 선택 항목이 클립보드에 잘리기 전에 실행됩니다. 네. 네.
복사 전에 복사 전에 선택 항목이 클립보드에 복사되기 전에 실행됩니다. 네. 네.
전에 붙이기 전에 클립보드에서 선택한 항목을 붙여넣기 전에 발생합니다. 네. 네.
데이터 바인딩 업데이트 후 업데이트 후 데이터 바인딩 개체가 업데이트된 후 즉시 실행됩니다. 네. 아니요.
업데이트 전 업데이트 전에 데이터 원본이 업데이트되기 전에 발생합니다. 네. 네.
세포 변화 한때의 변화 데이터 원본이 변경된 경우 실행됩니다. 네. 아니요.
이용 가능한 데이터 입수 가능한 자료에. 데이터 원본에서 새 데이터를 사용할 수 있게 되면 실행됩니다. 네. 아니요.
데이터 집합이 변경됨 변경된 데이터 집합에서 데이터 원본의 콘텐츠가 변경된 경우 실행됩니다. 네. 아니요.
데이터 집합 완료 데이터 세트 완료 시 데이터 원본에서 데이터 전송이 완료되면 실행됩니다. 네. 아니요.
오류 업데이트 오류 업데이트 시 데이터 필드를 업데이트하는 동안 오류가 발생하면 실행됩니다. 네. 아니요.
행 입력 일렬로 데이터 원본의 새 데이터 행을 사용할 수 있을 때 실행됩니다. 네. 아니요.
줄 출구 줄 출구에서 데이터 원본의 데이터 행이 방금 완료되었을 때 실행됩니다. 아니요. 네.
행:삭제 행 삭제 시 데이터 원본의 데이터 행이 삭제될 때 실행됩니다. 네. 아니요.
행 삽입 삽입된 열에. 데이터 원본의 데이터 행이 삽입될 때 실행됩니다. 네. 아니요.
마우스 상황에 맞는 메뉴 상황에 맞는 메뉴에 상황에 맞는 메뉴가 표시될 때 실행됩니다. 네. 네.
질질 끄는 질질 끄는 마우스를 끌 때(이동 요소에서) 실행됩니다. 네. 네.
드래그스타트 느릿느릿 이동 요소에서 마우스 끌기가 시작될 때 실행됩니다. 네. 네.
드래그 엔터 온드러제너 대상 요소의 영역에 끌리는 물체가 있을 때 발생합니다. 네. 네.
질질 끌다 질질 끄는 드래그가 (대상 요소의) 영역 위에 있을 때 발생합니다. 네. 네.
드래그 휴가 임시 휴가 중인 대상 요소에서 영역 밖으로 끌어낼 때 발생합니다. 네. 네.
드래그 엔드 서서히 이동 요소에서 마우스 드래그가 끝날 때 실행됩니다. 네. 네.
떨어지다 즉석에서 끌 때 마우스 버튼을 유효한 대상 위로 놓으면(대상 요소에서) 실행됩니다. 네. 네.
시작 선택 선택된 출발시에. 사용자가 텍스트를 선택하기 시작할 때 실행됩니다. 네. 네.
키보드 도와 주세요. 도움을 받아 사용자가 도움말을 시작할 때 실행됩니다. 네. 네.
HTML 프레임/객체 짐을 내리기 전에 언로드 전 온 문서를 언로드하기 전에 발생합니다. 아니요. 네.
일단멈춤 정차 중인 사용자가 개체 로드를 중지할 때 실행됩니다.(중지와 달리 중지 이벤트는 문서에 첨부할 수 있습니다) 아니요. 아니요.
HTML 양식 포커스 편집 전 포커스 편집 전에 요소가 편집할 포커스를 얻기 전에 발생합니다. 네. 네.
마르키 시작 출발시에 행렬이 새 루프를 시작할 때 실행됩니다. 아니요. 아니요.
끝내라. 마무리 중인 대기열 루프가 완료되면 실행됩니다. 아니요. 네.
바운스 즉시 스크롤 마크가 다른 방향으로 되돌아갈 때 실행됩니다. 아니요. 네.
여러가지 종류의 인쇄 전에 인쇄 전에. 문서가 인쇄되기 전에 발생하는 화재 아니요. 아니요.
애프터 프린트 인쇄 후에. 문서가 인쇄된 후 즉시 실행됩니다. 아니요. 아니요.
재산 변경 재산을 변경할 때에. 개체의 속성이 변경될 때 실행됩니다. 아니요. 아니요.
필터 변경 필터 교체 시 필터가 속성을 변경하거나 전환을 완료할 때 실행됩니다. 아니요. 아니요.
즉각적인 상태 변화 준비된 상태 변화에 따라. 요소의 readyState 속성이 변경될 때 실행됩니다. 아니요. 아니요.
노획물 포로로 잡힌 releaseCapture 메서드가 호출될 때 실행됩니다. 아니요. 아니요.

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

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

XUL 이벤트

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

카테고리 유형 기여하다 묘사 거품 취소 가능
마우스 DOM 마우스 스크롤 DOM 마우스 스크롤 마우스 휠을 이동하여 내용을 스크롤할 때 발생합니다. 네. 네.
드래그 드롭 드롭다운으로 마우스 단추를 놓으면 끌어다 놓은 개체를 놓을실행됩니다. 아니요. 아니요.
드래그 엔터 온드러제너 드래그 중에 마우스 포인터가 요소 위로 처음 이동할 때 실행됩니다.마우스 오버 이벤트와 유사하지만 끌면서 발생합니다. 아니요. 아니요.
용퇴 질질 끄는 출구에서 드래그 중에 마우스 포인터가 요소에서 멀어질 때 실행됩니다.요소의 드롭을 따서 부르기도 합니다.마우스 아웃 이벤트와 유사하지만 끌 때 발생합니다. 아니요. 아니요.
드래그 제스처 느릿느릿 사용자가 일반적으로 마우스 단추를 누르고 마우스를 이동하여 요소를 끌기 시작할 때 실행됩니다. 아니요. 아니요.
질질 끌다 질질 끄는 마우스 이동 이벤트와 관련하여 이 이벤트는 요소 위로 무언가가 끌리는 동안 발생합니다. 아니요. 아니요.
입력 확인란 상태 변경 사용자 또는 스크립트에서 확인란을 선택하거나 선택 취소할 때 실행됩니다. 아니요. 아니요.
라디오 상태 변경 사용자 또는 스크립트에서 라디오 단추를 선택할 때 실행됩니다. 아니요. 아니요.
가까운. 가까이에 창을 닫으라는 요청이 있을 때 실행됩니다. 아니요. 네.
지휘권 명령의 W3C DOM Activate 이벤트와 유사합니다.마우스 클릭이나 키 누르기 등을 통해 요소가 활성화될 때 실행됩니다. 아니요. 아니요.
입력 입력으로 사용자가 텍스트 상자에 텍스트를 입력할 때 실행됩니다. 네. 아니요.
사용자 인터페이스 DOMMenuItemActive DOMMenuItemActive 메뉴 또는 메뉴 항목을 가리키거나 강조 표시할 때 실행됩니다. 네. 아니요.
DOM 메뉴 항목활발하지 않은 DOM 메뉴 항목활발하지 않은 메뉴 또는 메뉴 항목을 더 이상 가리키지 않거나 강조 표시하지 않을 때 실행됩니다. 네. 아니요.
상황에 맞는 메뉴 상황에 맞는 메뉴에 사용자가 요소의 상황에 맞는 메뉴를 열도록 요청할 때 실행됩니다.이 작업은 플랫폼에 따라 다르지만 일반적으로 마우스 오른쪽 버튼을 클릭합니다. 아니요. 네.
넘쳐흐르는 범람하여. 전체 크기로 표시할 공간이 부족한 경우 상자 또는 기타 레이아웃 요소를 실행합니다. 아니요. 아니요.
오버플로 변경됨 물이 넘쳐서. 오버플로 상태가 변경될 때 실행됩니다. 아니요. 아니요.
물밑의 물밑에서. 전체 크기로 표시하기에 충분한 공간이 있는 경우 요소로 실행됩니다. 아니요. 아니요.
팝업 숨김 숨겨진 팝업에서 숨겨진 후 팝업으로 전환됩니다. 아니요. 아니요.
팝업 숨기기 팝업 히딩에. 숨기려고 할 때 팝업을 표시합니다. 아니요. 아니요.
팝업표시 팝업 쇼에서 팝업이 팝업되기 직전에 팝업으로 실행됩니다. 아니요. 네.
팝업 표시 팝업 표시 시 팝업이 열리면 onload 이벤트가 창으로 전송되는 것과 마찬가지로 팝업이 열린 후 팝업으로 실행됩니다. 아니요. 아니요.
명령 방송을 방송중에 관찰자 위에 놓입니다.브로드캐스트 이벤트는 청취 중인 방송사의 특성이 변경될 때 전송됩니다. 아니요. 아니요.
명령 업데이트 명령 업데이트 명령 업데이트가 발생할 때 실행됩니다. 아니요. 아니요.

기타 이벤트

Mozilla 및 Opera 9의 경우 DOM 콘텐츠가 로드될 때 발생하는 DOM ContentLoadedDOM 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 문자열 이벤트 이름(DOM 수준 2에서는 대소문자를 구분하지만 DOM 수준 3에서는 대소문자를 구분함).
표적의 이벤트 대상 이벤트가 원래 발송된 EventTarget을 나타내는 데 사용됩니다.
현재 대상 이벤트 대상 EventListeners가 현재 처리 중인 EventTarget을 나타내는 데 사용됩니다.
이벤트 단계 부호 없는 짧은 현재 평가 중인 이벤트 흐름의 단계를 나타내는 데 사용됩니다.
거품 부울의 이벤트가 버블링 이벤트인지 여부를 나타내는 데 사용됩니다.
취소할 수 있는 부울의 이벤트의 기본 작업을 차단할 수 있는지 여부를 나타내는 데 사용됩니다.
타임스탬프 DOM 타임스탬프 이벤트가 생성된 시간(에포크를 기준으로 한 밀리초)을 지정하는 데 사용됩니다.
이벤트 메서드
이름. 인수 유형 인수명 묘사
전파 중지 이벤트 흐름 중에 이벤트의 추가 전파를 방지합니다.
기본값 방지 취소 가능한 경우 이벤트를 취소합니다. 즉, 이벤트의 결과로 구현에서 일반적으로 수행하는 기본 작업이 발생하지 않습니다.
init이벤트 DOM 문자열 eventTypeArg 이벤트 유형을 지정합니다.
부울의 canBubbleArg 이벤트 버블 가능 여부를 지정합니다.
부울의 취소 가능 Arg 이벤트의 기본 작업을 차단할 수 있는지 여부를 지정합니다.

이벤트 처리 모델

DOM 레벨 0

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

인라인 모델

인라인 [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에서 보다 유연한 이벤트 처리 모델을 설계했습니다.

이름. 묘사 인수 유형 인수명
이벤트 수신기 추가 이벤트 대상에서 이벤트 수신기를 등록할 수 있습니다. DOM 문자열 유형
이벤트 수신기 청취자
부울의 캡처 사용
이벤트 수신기 제거 이벤트 대상에서 이벤트 수신기를 제거할 수 있습니다. DOM 문자열 유형
이벤트 수신기 청취자
부울의 캡처 사용
디스패치 이벤트 가입한 이벤트 수신기로 이벤트를 보낼 수 있습니다. 이벤트 에벳

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

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

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

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

<!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]모델에 대한 지원을 삭제합니다.

이름. 묘사 인수 유형 인수명
이벤트 첨부 W3C의 addEventListener 메서드와 유사합니다. s이벤트
포인터 fpNotify
이벤트 분리 W3C의 removeEventListener 메서드와 유사합니다. s이벤트
포인터 fpNotify
화재 이벤트 W3C의 dispatchEvent 메서드와 유사합니다. s이벤트
이벤트 o 이벤트 개체

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

  • 이벤트의 거품을 방지하기 위해 개발자는 이벤트의 값을 설정해야 합니다.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>

레퍼런스

  1. ^ "DOM Standard". dom.spec.whatwg.org. Retrieved 2021-05-25.
  2. ^ "JavaScript DOM Events". www.w3schools.com. Retrieved 2019-08-03.
  3. ^ "7.8 Drag and drop — HTML5".
  4. ^ "HTML Drag and Drop API".
  5. ^ "Progress Events".
  6. ^ "File API".
  7. ^ "Element: Mousemove event - Web APIs MDN".
  8. ^ "Document Object Model (DOM) Level 3 Events Specification (working draft)". W3C. Retrieved 2013-04-17.
  9. ^ a b c "Touch Events version 2 - W3C Editor's Draft". W3C. 14 November 2011. Retrieved 10 December 2011.
  10. ^ "Apple using patents to undermine open standards again". opera.com. 9 December 2011. Retrieved 9 December 2011.
  11. ^ "Pointer Events".
  12. ^ "IndieUI: Events 1.0".
  13. ^ "HTML Standard".
  14. ^ Wayback Machine에서 2010년 6월 11일 보관
  15. ^ "Which browsers support native DOMContentLoaded event? « Perfection Labs Development Tips". 29 June 2011. Archived from the original on 29 June 2011.{{cite web}}CS1 유지 관리: 봇: 원래 URL 상태를 알 수 없음(링크)
  16. ^ "Test Drive Redirect". Archived from the original on 2010-05-08. Retrieved 2010-05-06.
  17. ^ "Introduction to Events". Quirksmode.org. Retrieved 15 September 2012.
  18. ^ a b "Document Object Model (DOM) Level 2 Events Specification". W3C. 13 November 2000. Retrieved 15 September 2012.
  19. ^ "Document Object Model (DOM) Level 3 Events Specification (working draft)". W3C. Retrieved 2013-04-17.
  20. ^ "Early event handlers". Quirksmode.org. Retrieved 15 September 2012.
  21. ^ "Traditional event registration model". Quirksmode.org. Retrieved 15 September 2012.
  22. ^ "DOM Level 3 Events support in IE9". Microsoft. March 26, 2010. Retrieved 2010-03-28.
  23. ^ "Compatibility changes in IE11 Preview". Microsoft. September 9, 2013. Retrieved 2013-10-05.

진일보한 내용

외부 링크