DOM 이벤트
DOM eventDOM(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의 분류와 정확히 동일하지 않습니다.
카테고리 | 유형 | 기여하다 | 묘사 | 거품 | 취소 가능 |
---|---|---|---|---|---|
마우스 | 딸깍하는 소리 | 클릭하면 | 포인팅 장치 단추를 요소 위에 클릭하면 실행됩니다.클릭은 동일한 화면 위치에서 마우스를 누른 후 마우스를 올리는 것으로 정의됩니다.이러한 이벤트의 순서는 다음과 같습니다.
| 네. | 네. |
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, DOMNodeRemoved 및 DOMCharacterDataModified를 지원합니다.DOMAtrModified를 제외하고 Chrome 및 Safari는 이러한 이벤트를 지원합니다.
터치 이벤트
Apple의 iOS 및 Google의 Android와 같은 터치 지원 장치에서 실행되는 웹 브라우저는 추가 [9]: §5.3 이벤트를 생성합니다.
카테고리 | 유형 | 기여하다 | 묘사 | 거품 | 취소 가능 |
---|---|---|---|---|---|
만지다 | 터치 스타트 | 터치 표면/화면에 손가락을 대면 작동합니다. | 네. | 네. | |
터치 엔드의 | 터치 표면/화면에서 손가락을 제거할 때 발생합니다. | 네. | 네. | ||
터치 무브 | 화면에 이미 배치된 손가락이 화면을 가로질러 이동할 때 실행됩니다. | 네. | 네. | ||
터치터 | 터치 포인트가 DOM 요소에 의해 정의된 대화형 영역으로 이동할 때 실행됩니다. | 네. | 네. | ||
터치 휴가 | 터치 포인트가 DOM 요소에 의해 정의된 대화형 영역 밖으로 이동할 때 발생합니다. | 네. | 네. | ||
터치 캔슬 | 사용자 에이전트는 UA 창의 범위 밖으로 이동하는 등 구현 관련 방식으로 TouchPoint가 중단된 경우 이 이벤트 유형을 발송해야 합니다.사용자가 장치나 구현체가 저장하도록 구성된 것보다 터치 표면에 더 많은 터치 포인트(예: 포인터(예: 손가락 또는 스타일러스)를 배치할 때 사용자 에이전트는 이 이벤트 유형을 파견할 수 있습니다.이 경우 TouchList에서 가장 초기의 TouchPoint 개체를 [9]: §5.9 제거해야 합니다. | 네. | 아니요. |
W3C 권고안 초안에서, a.TouchEvent
전달합니다.TouchList
의Touch
위치, 활성화된 수정자 키, aTouchList
의Touch
대상 DOM 요소 내의 위치 및TouchList
의Touch
이전 이후로 변경된 위치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(인터넷 익스플로러)에서 두 가지 주요 이벤트 유형이 추가됩니다.일부 이벤트는 다른 브라우저에서 사실상의 표준으로 구현되었습니다.
- 클립보드 이벤트.
- 데이터 바인딩 이벤트.[clarification needed]
카테고리 | 유형 | 기여하다 | 묘사 | 거품 | 취소 가능 |
---|---|---|---|---|---|
클립보드 | 인하. | 온컷의 | 선택 항목이 클립보드에 잘린 후에 실행됩니다. | 네. | 네. |
알았다. | 사본으로 | 선택 항목이 클립보드에 복사된 후에 실행됩니다. | 네. | 네. | |
풀을 먹입니다 | 계속해서 | 클립보드에서 선택한 항목을 붙여넣은 후에 실행됩니다. | 네. | 네. | |
베기 전에 | 컷 전에 | 선택 항목이 클립보드에 잘리기 전에 실행됩니다. | 네. | 네. | |
복사 전에 | 복사 전에 | 선택 항목이 클립보드에 복사되기 전에 실행됩니다. | 네. | 네. | |
전에 | 붙이기 전에 | 클립보드에서 선택한 항목을 붙여넣기 전에 발생합니다. | 네. | 네. | |
데이터 바인딩 | 업데이트 후 | 업데이트 후 | 데이터 바인딩 개체가 업데이트된 후 즉시 실행됩니다. | 네. | 아니요. |
업데이트 전 | 업데이트 전에 | 데이터 원본이 업데이트되기 전에 발생합니다. | 네. | 네. | |
세포 변화 | 한때의 변화 | 데이터 원본이 변경된 경우 실행됩니다. | 네. | 아니요. | |
이용 가능한 데이터 | 입수 가능한 자료에. | 데이터 원본에서 새 데이터를 사용할 수 있게 되면 실행됩니다. | 네. | 아니요. | |
데이터 집합이 변경됨 | 변경된 데이터 집합에서 | 데이터 원본의 콘텐츠가 변경된 경우 실행됩니다. | 네. | 아니요. | |
데이터 집합 완료 | 데이터 세트 완료 시 | 데이터 원본에서 데이터 전송이 완료되면 실행됩니다. | 네. | 아니요. | |
오류 업데이트 | 오류 업데이트 시 | 데이터 필드를 업데이트하는 동안 오류가 발생하면 실행됩니다. | 네. | 아니요. | |
행 입력 | 일렬로 | 데이터 원본의 새 데이터 행을 사용할 수 있을 때 실행됩니다. | 네. | 아니요. | |
줄 출구 | 줄 출구에서 | 데이터 원본의 데이터 행이 방금 완료되었을 때 실행됩니다. | 아니요. | 네. | |
행:삭제 | 행 삭제 시 | 데이터 원본의 데이터 행이 삭제될 때 실행됩니다. | 네. | 아니요. | |
행 삽입 | 삽입된 열에. | 데이터 원본의 데이터 행이 삽입될 때 실행됩니다. | 네. | 아니요. | |
마우스 | 상황에 맞는 메뉴 | 상황에 맞는 메뉴에 | 상황에 맞는 메뉴가 표시될 때 실행됩니다. | 네. | 네. |
질질 끄는 | 질질 끄는 | 마우스를 끌 때(이동 요소에서) 실행됩니다. | 네. | 네. | |
드래그스타트 | 느릿느릿 | 이동 요소에서 마우스 끌기가 시작될 때 실행됩니다. | 네. | 네. | |
드래그 엔터 | 온드러제너 | 대상 요소의 영역에 끌리는 물체가 있을 때 발생합니다. | 네. | 네. | |
질질 끌다 | 질질 끄는 | 드래그가 (대상 요소의) 영역 위에 있을 때 발생합니다. | 네. | 네. | |
드래그 휴가 | 임시 휴가 중인 | 대상 요소에서 영역 밖으로 끌어낼 때 발생합니다. | 네. | 네. | |
드래그 엔드 | 서서히 | 이동 요소에서 마우스 드래그가 끝날 때 실행됩니다. | 네. | 네. | |
떨어지다 | 즉석에서 | 끌 때 마우스 버튼을 유효한 대상 위로 놓으면(대상 요소에서) 실행됩니다. | 네. | 네. | |
시작 선택 | 선택된 출발시에. | 사용자가 텍스트를 선택하기 시작할 때 실행됩니다. | 네. | 네. | |
키보드 | 도와 주세요. | 도움을 받아 | 사용자가 도움말을 시작할 때 실행됩니다. | 네. | 네. |
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 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에 따르면 이벤트 대상이 트리에 참여할 때 이벤트는 세 단계를 거칩니다.
- 캡처 단계: 이벤트가 루트 이벤트 대상에서 이벤트 대상으로 이동합니다.
- 대상 단계: 이벤트가 이벤트 대상을 통과합니다.
- 버블 단계(옵션): 이벤트가 이벤트 대상에서 루트 이벤트 대상으로 다시 위로 이동합니다.버블 단계는 버블이 발생하는 이벤트에만 발생합니다(여기서).
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]현재[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에서 보다 유연한 이벤트 처리 모델을 설계했습니다.
이름. | 묘사 | 인수 유형 | 인수명 |
---|---|---|---|
이벤트 수신기 추가 | 이벤트 대상에서 이벤트 수신기를 등록할 수 있습니다. | DOM 문자열 | 유형 |
이벤트 수신기 | 청취자 | ||
부울의 | 캡처 사용 | ||
이벤트 수신기 제거 | 이벤트 대상에서 이벤트 수신기를 제거할 수 있습니다. | DOM 문자열 | 유형 |
이벤트 수신기 | 청취자 | ||
부울의 | 캡처 사용 | ||
디스패치 이벤트 | 가입한 이벤트 수신기로 이벤트를 보낼 수 있습니다. | 이벤트 | 에벳 |
알아야 할 유용한 몇 가지 사항:
- 이벤트가 거품이 되는 것을 방지하기 위해 개발자는 다음과 같이 전화해야 합니다.
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]모델에 대한 지원을 삭제합니다.
이름. | 묘사 | 인수 유형 | 인수명 |
---|---|---|---|
이벤트 첨부 | 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>
레퍼런스
- ^ "DOM Standard". dom.spec.whatwg.org. Retrieved 2021-05-25.
- ^ "JavaScript DOM Events". www.w3schools.com. Retrieved 2019-08-03.
- ^ "7.8 Drag and drop — HTML5".
- ^ "HTML Drag and Drop API".
- ^ "Progress Events".
- ^ "File API".
- ^ "Element: Mousemove event - Web APIs MDN".
- ^ "Document Object Model (DOM) Level 3 Events Specification (working draft)". W3C. Retrieved 2013-04-17.
- ^ a b c "Touch Events version 2 - W3C Editor's Draft". W3C. 14 November 2011. Retrieved 10 December 2011.
- ^ "Apple using patents to undermine open standards again". opera.com. 9 December 2011. Retrieved 9 December 2011.
- ^ "Pointer Events".
- ^ "IndieUI: Events 1.0".
- ^ "HTML Standard".
- ^ Wayback Machine에서 2010년 6월 11일 보관
- ^ "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 상태를 알 수 없음(링크) - ^ "Test Drive Redirect". Archived from the original on 2010-05-08. Retrieved 2010-05-06.
- ^ "Introduction to Events". Quirksmode.org. Retrieved 15 September 2012.
- ^ a b "Document Object Model (DOM) Level 2 Events Specification". W3C. 13 November 2000. Retrieved 15 September 2012.
- ^ "Document Object Model (DOM) Level 3 Events Specification (working draft)". W3C. Retrieved 2013-04-17.
- ^ "Early event handlers". Quirksmode.org. Retrieved 15 September 2012.
- ^ "Traditional event registration model". Quirksmode.org. Retrieved 15 September 2012.
- ^ "DOM Level 3 Events support in IE9". Microsoft. March 26, 2010. Retrieved 2010-03-28.
- ^ "Compatibility changes in IE11 Preview". Microsoft. September 9, 2013. Retrieved 2013-10-05.
진일보한 내용
- 데이텔, 하비(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/