DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가적인 커스텀 필드 또는 함수를 가질수도 있습니다. 이벤트는 렌더링 모델에서 기본적인 사용자 인터렉션부터 발생한 것에대한 자동 알림까지 모든 것을 나타낼 수 있습니다.
이 글은 전달될 수 있는 이벤트의 목록을 제공합니다. 일부는 공식 명세에 정의된 표준 이벤트이며, 다른 일부는 특정 브라우저에서 내부적으로 사용되는 이벤트입니다. 예로, Mozilla 특정 이벤트는 부가 기능이 브라우저와 상호작용하기 위해 나열되었습니다.
가장 일반적인 카테고리
리소스 이벤트
이벤트명
발생하는 시점
cached
매니페스트에 나열된 리소스가 다운로드되었고, 애플리케이션이 캐시될 때.
error (en-US)
리소스 로드가 실패했을 때.
abort (en-US)
리소스 로딩이 중단되었을 때.
load
리소스와 그 의존 리소스의 로딩이 끝났을 때.
beforeunload (en-US)
window, document 및 그 리소스가 언로드되려고 할 때.
unload (en-US)
document 또는 의존 리소스가 언로드될 때.
네트워크 이벤트
이벤트명
발생하는 시점
online (en-US)
브라우저가 네트워크 접근을 얻었을 때.
offline (en-US)
브라우저가 네트워크 접근을 잃었을 때.
포커스 이벤트
이벤트명
발생하는 시점
focus (en-US)
엘리먼트가 포커스를 받았을 때(버블링하지 않음).
blur
엘리먼트가 포커스를 잃었을 때(버블링하지 않음).
웹 소켓 이벤트
이벤트명
발생하는 시점
open
웹소켓 연결이 수립되었을 때.
message
웹소켓을 통해 메시지를 받았을 때.
error (en-US)
웹소켓 연결이 어떤 문제로 닫혔을 때(예로, 일부 데이터가 전송되지 못했을 때).
close
웹소켓 연결이 닫혔을 때.
세션 기록 이벤트
이벤트명
발생하는 시점
pagehide (en-US)
세션 기록 항목이 사라지고 있을 때.
pageshow (en-US)
세션 기록 항목이 들어오고 있을 때.
popstate
세션 기록 항목이 이동하고 있을 때(특정 경우에서).
CSS 애니메이션 이벤트
이벤트명
발생하는 시점
animationstart (en-US)
CSS 애니메이션이 시작되었을 때.
animationend (en-US)
CSS 애니메이션이 완료되었을 때.
animationiteration (en-US)
CSS 애니메이션이 반복되었을 때.
CSS 전이 이벤트
이벤트명
발생하는 시점
transitionstart
CSS 전이가 실제로 시작되었을 때(딜레이 후에 실행되었을 때).
transitioncancel
CSS 전이가 취소되었을 때.
transitionend (en-US)
CSS 전이가 완료되었을 때.
transitionrun
CSS 전이가 실행을 시작했을 때(딜레이 시작전에 실행되었을 때).
폼 이벤트
Event Name
Fired When
reset (en-US)
리셋 버튼이 눌렸을 때
submit (en-US)
제출 버튼이 눌렸을 때
Printing Events
이벤트명
발생하는 시점
beforeprint (en-US)
프린트 대화상자가 열렸을 때
afterprint (en-US)
프린트 대화상자가 닫혔을 때
텍스트 작성 이벤트
이벤트명
발생하는 시점
compositionstart (en-US)
텍스트 입력 통로가 준비되었을 때(키보드 입력을 위한 키 다운과 유사하지만, 음성 인식과 같은 다른 입력과도 동작합니다).
compositionupdate (en-US)
작성될 텍스트 통로에 문자가 추가되었을 때.
compositionend (en-US)
텍스트 입력 통로가 완료되었거나 취소되었을 때.
뷰 이벤트
이벤트명
발생하는 시점
fullscreenchange (en-US)
엘리먼트가 전체화면 모드로 변경되었거나 일반 모드로 돌아왔을 때.
fullscreenerror (en-US)
기술적인 이유나 권한 거절을 이유로 전체화면 모드 전환이 불가능했을 때.
resize
다큐먼트 뷰가 리사이즈되었을 때.
scroll (en-US)
다큐먼트 뷰나 엘리먼트가 스크롤되었을 때.
클립보드 이벤트
이벤트명
발생하는 시점
cut (en-US)
선택이 잘라내어진 후 클립보드로 복사되었을 때
copy (en-US)
선택이 클립보드로 복사되었을 때
paste (en-US)
클립보드의 항목이 붙여너어졌을 때
키보드 이벤트
이벤트명
발생하는 시점
keydown
키가 눌렸을 때
keypress (en-US)
쉬프트, Fn, CapsLock 을 제외한 키가 눌린 상태일 때(연속적으로 실행됨.).
keyup (en-US)
키 누름이 해제될 때
마우스 이벤트
이벤트명
발생하는 시점
mouseenter (en-US)
포인팅 장치가 리스너가 등록된 엘리먼트 위로 이동했을 때.
mouseover (en-US)
포인팅 장치가 리스너가 등록된 엘리먼트나 그 자식 엘리먼트의 위로 이동했을 때.
mousemove (en-US)
포인팅 장치가 엘리먼트 위에서 이동했을 때(마우스가 이동하는동안 계속 실행됨.)
mousedown (en-US)
포인팅 장치 버튼이 엘리먼트 위에서 눌렸을 때.
mouseup (en-US)
포인팅 장치 버튼이 엘리먼트 위에서 놓였을 때.
auxclick
포인팅 장치 버튼(주가 아닌 버튼)이 엘리먼트에서 눌렸다가 놓였을 때.
click
포인팅 장치 버튼(모든 버튼; 주 버튼만 해당될 예정)이 엘리먼트에서 눌렸다가 놓였을 때.
dblclick (en-US)
포인팅 장치 버튼이 엘리먼트에서 두 번 클릭되었을 때.
contextmenu (en-US)
마우스의 오른쪽 버튼이 클릭되었을 때(컨텍스트 메뉴가 표시되기 전).
wheel (en-US)
포인팅 장치의 휠 버튼이 어떤 방향이든 회전되었을 때.
mouseleave (en-US)
포인팅 장치가 리스너가 등록된 엘리먼트 밖으로 이동했을 때.
mouseout (en-US)
포인팅 장치가 리스너가 등록된 엘리먼트 또는 그 자식 엘리먼트의 밖으로 이동했을 때.
select (en-US)
어떤 텍스트가 선택되고 있을 때.
pointerlockchange (en-US)
포인터가 잠겼거나 해제되었을 때.
pointerlockerror (en-US)
기술적인 이유나 권한 거절을 이유로 포인터 잠금이 불가했을 때.
드래그 앤 드랍 이벤트
이벤트명
발생하는 시점
dragstart (en-US)
사용자가 엘리먼트나 텍스트 선택을 드래그하기 시작할 때.
drag (en-US)
엘리먼트나 텍스트 선택이 드래그되고 있을 때(350ms 마다 연속적으로 실행됨).
dragend (en-US)
드래그 작업이 끝났을 때(마우스 버튼을 놓거나 escape 키를 눌러서).
dragenter (en-US)
드래그된 엘리먼트나 텍스트 선택이 유효한 드랍 대상에 들어왔을 때.
dragover (en-US)
엘리먼트나 텍스트 선택이 유효한 드랍 대상위로 드래그되었을 때(350ms 마다 연속적으로 실행됨.).
dragleave (en-US)
드래그된 엘리먼트나 텍스트 선택이 유효한 드랍 대상에서 나갈 때.
drop (en-US)
엘리먼트가 유효한 드랍 대상에 드랍되었을 때.
미디어 이벤트
이벤트명
발생하는 시점
durationchange (en-US)
duration 속성이 업데이트되었을 때.
loadedmetadata (en-US)
메타데이터가 로드되었을 때.
loadeddata (en-US)
미디어의 첫 번째 프레임이 로딩을 마쳤을 때.
canplay
브라우저가 미디어를 실행할 수 있지만, 컨텐츠의 버퍼링없이 중단되지 않고 미디어를 끝까지 재생하기엔 로딩된 데이터가 충분하지않다고 측정했을 때.
canplaythrough
브라우저가 컨텐츠 버퍼링 중단 없이 미디어를 끝까지 재생할 수 있다고 측정했을 때.
ended (en-US)
미디어의 끝에 도달해 재생이 멈추었을 때.
emptied (en-US)
미디어가 비었을 때. 예로, 이 이벤트는 미디어가 이미 로딩되었고(또는 부분적으로 로딩되었고), load() 메소드가 리로드를 위해 호출되었을때 전송됩니다.
stalled (en-US)
유저 애이전트가 미디어 데이터 페치를 시도했지만, 데이터가 예상치 못하게 전송되지 않을 때.
Leave a comment