HTML DOM 이벤트

DOM 이벤트를 보내는 것은 발생한 흥미로운 사건을 코드에 알리기 위해입니다.

이벤트는 일반적으로 기능과 함께 사용되며, 이벤트가 발생하기 전에 (예: 사용자가 버튼을 클릭할 때) 해당 기능은 실행되지 않습니다.

이벤트는 기본적인 사용자 상호작용에서부터 표시 모델에서 일어나는 사건의 자동 알림까지 모든 것을 나타낼 수 있습니다.

활동 이름	설명	이벤트 유형
abort	자원 로드가 중지되었을 때 이 이벤트가 발생합니다	UiEvent, Event
afterprint	관련 문서가 인쇄나 프리뷰가 닫혔을 때 이 이벤트가 발생합니다	Event
animationend	CSS 애니메이션이 완료될 때 이벤트가 발생합니다	AnimationEvent
animationiteration	CSS 애니메이션이 반복될 때 이 이벤트가 발생합니다	AnimationEvent
animationstart	CSS 애니메이션이 시작될 때 이 이벤트가 발생합니다	AnimationEvent
beforeprint	관련 문서가 인쇄나 프리뷰를 위해 인쇄될 때 이 이벤트가 발생합니다	Event
beforeunload	윈도우, 문서 및 자원이 곧 언로드될 때 이 이벤트가 발생합니다	UiEvent, Event
blur	요소가 포커스를 잃을 때(버블되지 않음) 이 이벤트가 발생합니다	FocusEvent
canplay	브라우저가 미디어를 재생할 수 있을 때(재생을 시작할 수 있는 충분한 버퍼가 있을 때) 이 이벤트가 발생합니다	Event
canplaythrough	브라우저가 버퍼링을 중지하지 않고 미디어를 재생할 수 있을 때 이 이벤트가 발생합니다	Event
change	폼 요소, 선택 또는 선택 상태의 내용이 변경될 때(예: <input>, <select>, <textarea>), 이 이벤트가 발생합니다	Event
click	사용자가 요소를 클릭할 때 이벤트가 발생합니다	MouseEvent
contextmenu	사용자가 어떤 요소를 오른쪽 클릭하여 컨텍스트 메뉴를 엽니다	MouseEvent
copy	사용자가 요소의 내용을 복사할 때 이 이벤트가 발생합니다	ClipboardEvent
cut	사용자가 요소의 내용을 잘라내릴 때 이 이벤트가 발생합니다	ClipboardEvent
dblclick	사용자가 요소를 더블 클릭할 때 이벤트가 발생합니다	MouseEvent
drag	드래그할 때 이벤트가 발생합니다	DragEvent
dragend	사용자가 드래그된 요소를 완료할 때 이 이벤트가 발생합니다	DragEvent
dragenter	드래그된 요소가 휴지대에 들어갈 때 이벤트가 발생합니다	DragEvent
dragleave	드래그된 요소가 휴지대에서 벗어날 때 이벤트가 발생합니다	DragEvent
dragover	드래그된 요소가 휴지대 위에 있을 때 이벤트가 발생합니다	DragEvent
dragstart	사용자가 요소를 드래그 시작할 때 이 이벤트가 발생합니다	DragEvent
drop	휴지대에 드래그된 요소를 놓을 때 이벤트가 발생합니다	DragEvent
durationchange	미디어의 지속 시간을 변경할 때 이 이벤트가 발생합니다	Event
ended	미디어가 끝날 때 이 이벤트가 발생합니다(“감사합니다”와 같은 메시지에 유용)	Event
error	자원 로드 실패 시 발생합니다	ProgressEvent, UiEvent, Event
focus	요소가 포커스를 받았을 때 이벤트가 발생합니다(버블되지 않음)	FocusEvent
focusin	요소가 곧 포커스를 받을 때 이 이벤트가 발생합니다	FocusEvent
focusout	요소가 곧 포커스를 잃을 때 이 이벤트가 발생합니다	FocusEvent
fullscreenchange	요소를 전면 모드로 표시할 때 이벤트가 발생합니다	Event
fullscreenerror	요소가 전면 모드로 표시되지 않을 때 이 이벤트가 발생합니다	Event
hashchange	URL의 앵커 부분이 변경될 때 이 이벤트가 발생합니다	HashChangeEvent
input	요소가 사용자 입력을 받을 때 이벤트가 발생합니다	InputEvent, Event
invalid	요소가 유효하지 않을 때 발생합니다	Event
keydown	사용자가 어떤 키를 누를 때 이 이벤트가 발생합니다	KeyboardEvent
keypress	사용자가 키를 누를 때 이벤트가 발생합니다	KeyboardEvent
keyup	사용자가 키를 떼일 때 이 이벤트가 발생합니다.	KeyboardEvent
load	이벤트가 객체가 로드되었을 때 발생합니다.	UiEvent, Event
loadeddata	미디어 데이터를 로드할 때 이 이벤트가 발생합니다.	Event
loadedmetadata	메타데이터(예: 크기와 지속 시간)를 로드할 때 이 이벤트가 발생합니다.	Event
loadstart	브라우저가 지정된 미디어를 찾기 시작할 때 이 이벤트가 발생합니다.	ProgressEvent
message	이벤트 소스에서 메시지를 수신할 때 이벤트가 발생합니다.	Event
mousedown	사용자가 요소에서 마우스 버튼을 누를 때 이벤트가 발생합니다.	MouseEvent
mouseenter	포인터가 요소에 이동할 때 이 이벤트가 발생합니다.	MouseEvent
mouseleave	포인터가 요소에서 벗어날 때 이 이벤트가 발생합니다.	MouseEvent
mousemove	포인터가 요소 위에서 이동할 때 이 이벤트가 발생합니다.	MouseEvent
mouseover	포인터가 요소나 그 자식 요소 중 하나에 이동할 때 이 이벤트가 발생합니다.	MouseEvent
mouseout	사용자가 마우스 포인터를 요소나 그 자식 요소 중 하나에서 벗어날 때 이 이벤트가 발생합니다.	MouseEvent
mouseup	사용자가 요소에서 마우스 버튼을 떼일 때 이 이벤트가 발생합니다.	MouseEvent
mousewheel	추천하지 않습니다.wheel 이벤트를 사용하도록 권장합니다.	WheelEvent
offline	브라우저가 오프라인으로 작업을 시작할 때 이 이벤트가 발생합니다.	Event
online	브라우저가 온라인으로 작업을 시작할 때 이 이벤트가 발생합니다.	Event
open	이벤트 소스와의 연결을 열 때 이 이벤트가 발생합니다.	Event
pagehide	사용자가 웹 페이지 탐색을 떠날 때 이 이벤트가 발생합니다.	PageTransitionEvent
페이지 표시	사용자가 웹 페이지로 이동할 때 이벤트가 발생합니다.	PageTransitionEvent
paste	사용자가 어떤 내용을 요소에 붙여넣을 때 이 이벤트가 발생합니다.	ClipboardEvent
pause	사용자가 미디어를 일시 중지하거나 프로그래밍 방식으로 일시 중지할 때 이 이벤트가 발생합니다.	Event
play	미디어가 시작되거나 일시 중지되지 않을 때 이 이벤트가 발생합니다.	Event
playing	미디어를 일시 중지하거나 버퍼링을 멈춘 후 미디어를 재생할 때 이 이벤트가 발생합니다.	Event
popstate	창의 历史 기록이 변경될 때 이 이벤트가 발생합니다.	PopStateEvent
progress	브라우저가 미디어 데이터를 다운로드하는 중에 이 이벤트가 발생합니다.	Event
ratechange	미디어의 재생 속도를 변경할 때 이 이벤트가 발생합니다.	Event
resize	문서 뷰 크기를 조정할 때 이 이벤트가 발생합니다.	UiEvent, Event
reset	이 이벤트가 양식을 리셋할 때 발생합니다.	Event
scroll	스크롤 요소의 스크롤 바를 드래그할 때 이벤트가 발생합니다.	UiEvent, Event
search	사용자가 검색 필드에 내용을 입력할 때( 입력="search"), 이 이벤트가 발생합니다.	Event
seeked	사용자가 이동을 완료할 때/미디어 중 새 위치로 이동할 때 이 이벤트가 발생합니다.	Event
seeking	사용자가 시작할 때/미디어 중 새 위치로 이동할 때 이 이벤트가 발생합니다.	Event
select	사용자가 일부 텍스트( 입력 > 및 <textarea>)를 선택하면 이 이벤트가 발생합니다.	UiEvent, Event
show	<menu> 요소가 컨텍스트 메뉴로 표시될 때 이 이벤트가 발생	Event
stalled	브라우저가 미디어 데이터를 가져오려 했지만 데이터가 사용할 수 없을 때 이 이벤트가 발생	Event
storage	웹 스토리지를 업데이트할 때 이 이벤트가 발생	StorageEvent
submit	양식을 제출할 때 이 이벤트가 발생	Event
suspend	브라우저가 미디어 데이터를 가져오지 않을 때 이 이벤트가 발생	Event
timeupdate	재생 위치가 변경될 때(예: 사용자가 미디어 내 다른 위치로 빠르게 이동할 때) 이 이벤트가 발생	Event
toggle	사용자가 <details> 요소를 열거나 닫을 때 이 이벤트가 발생	Event
touchcancel	터치가 중지될 때 이 이벤트가 발생	TouchEvent
touchend	손가락이 터치 스크린에서 벗어날 때 이 이벤트가 발생	TouchEvent
touchmove	손가락이 스크린에서 드래그될 때 이벤트가 발생	TouchEvent
touchstart	손가락이 터치 스크린에 올라올 때 이벤트가 발생	TouchEvent
transitionend	CSS 전환이 완료되면 이 이벤트가 발생합니다.	TransitionEvent
unload	이 이벤트가 문서나 부속 자원이 언로드될 때 발생	UiEvent, Event
volumechange	미디어의 볼륨이 변경되었을 때(볼륨을 "음소"로 설정하는 것도 포함됨) 이 이벤트가 발생	Event
waiting	미디어가 일시 중지되었지만 다시 시작할 예정인 경우(예: 더 많은 데이터를 버퍼링하기 위해 미디어가 일시 중지됨) 이 이벤트가 발생	Event
wheel	마우스 휠이 요소 위에서 위쪽 또는 아래쪽으로滚动할 때 이 이벤트가 발생	WheelEvent

HTML DOM 이벤트 속성

다음 표는 DOM 이벤트의 속성을 나열합니다:

속성	설명	이벤트 유형
altKey	마우스 이벤트가 발생할 때 "ALT" 키가 눌러졌는지 반환	MouseEvent
altKey	마우스 이벤트가 발생할 때 "ALT" 키가 눌러졌는지 반환	KeyboardEvent, TouchEvent
animationName	애니메이션 이름 반환	AnimationEvent
bubbles	특정 이벤트가 퍼블릭 이벤트인지 반환	Event
button	마우스 이벤트가 일어났을 때 누른 마우스 버튼을 반환합니다.	MouseEvent
buttons	마우스 이벤트가 일어났을 때 누른 마우스 버튼을 반환합니다.	MouseEvent
cancelable	이벤트가 기본 작업을 방지할 수 있는지 반환	Event
charCode	onkeypress 이벤트가 발생할 때 "ALT" 키가 눌러졌는지 반환	KeyboardEvent
changeTouches	이전 터치와 이 터치 사이에 상태가 변경된 모든 터치 객체의 목록 반환	TouchEvent
clientX	마우스 이벤트가 발생할 때 마우스 포인터가 현재 창에 비해 수평 좌표를 반환	MouseEvent, TouchEvent
clientY	마우스 이벤트가 발생할 때 마우스 포인터가 현재 창에 비해 수직 좌표를 반환	MouseEvent, TouchEvent
clipboardData	클립보드 작업에 영향을 받는 데이터를 포함한 객체를 반환	ClipboardData
code	이벤트가 발생한 키의 코드 반환	KeyboardEvent
composed	이벤트가 구성되었는지 반환	Event
ctrlKey	마우스 이벤트가 발생할 때 "CTRL" 키가 눌러졌는지 반환	MouseEvent
ctrlKey	키 이벤트가 발생할 때 "CTRL" 키가 눌러졌는지 반환합니다	KeyboardEvent, TouchEvent
currentTarget	이벤트 리스너가 이벤트를 트리거한 요소를 반환합니다	Event
data	삽입된 문자를 반환합니다	InputEvent
dataTransfer	드래그 앤 드롭을 위해 포함된 객체를 반환합니다/삽입 또는 제거된 데이터	DragEvent, InputEvent
defaultPrevented	preventDefault() 메서드가 이벤트 호출에 대해 호출되었는지 반환합니다	Event
deltaX	마우스 휠의 수평 롤링 양(가로軸)을 반환합니다	WheelEvent
deltaY	마우스 휠의 수직 롤링 양(가로軸)을 반환합니다	WheelEvent
deltaZ	Z축의 마우스 휠의 롤링 양을 반환합니다	WheelEvent
deltaMode	증가 값(픽셀, 라인 또는 페이지)의 단위를 나타내는 숫자를 반환합니다	WheelEvent
detail	마우스가 클릭된 횟수를 나타내는 숫자를 반환합니다	UiEvent
elapsedTime	애니메이션이 실행된 초 수를 반환합니다	AnimationEvent
elapsedTime	전환이 실행된 초 수를 반환합니다
eventPhase	현재 이벤트 스트림의哪个阶段를 평가 중인지 반환합니다	Event
inputType	변경된 타입을 반환합니다(즉, "추가" 또는 "삭제")	InputEvent
isComposing	이벤트가 형성 중인지 여부를 반환합니다	InputEvent, KeyboardEvent
isTrusted	이벤트가 신뢰할 수 있는지 반환합니다	Event
key	이벤트가 표시하는 키의 키 값을 반환합니다	KeyboardEvent
key	변경된 저장된 항목의 키를 반환합니다	StorageEvent
keyCode	onkeypress 이벤트를 일으키는 키의 Unicode 문자 코드 또는 onkeydown 또는 onkeyup 이벤트를 일으키는 키의 Unicode 키 코드를 반환합니다.	KeyboardEvent
location	키보드나 장치에서의 키의 위치를 반환합니다	KeyboardEvent
lengthComputable	진도의 길이가 계산될 수 있는지 반환합니다	ProgressEvent
loaded	로드된 작업량을 반환합니다	ProgressEvent
metaKey	이벤트가 발생할 때 "META" 키가 눌러졌는지 반환합니다	MouseEvent
metaKey	키 이벤트가 발생할 때 "meta" 키가 눌러졌는지 반환합니다	KeyboardEvent, TouchEvent
MovementX	이전 mousemove 이벤트에 대한 위치에 대한 마우스 포인터의 수평 좌표를 반환합니다	MouseEvent
MovementY	이전 mousemove 이벤트에 대한 위치에 대한 마우스 포인터의 수직 좌표를 반환합니다	MouseEvent
newValue	변경된 저장된 항목의 새 값을 반환합니다	StorageEvent
newURL	해시 값이 변경된 후 문서의 URL을 반환합니다	HasChangeEvent
offsetX	마우스 포인터가 대상 요소의 경계에 상대적으로 위치한 수평 좌표를 반환합니다	MouseEvent
offsetY	마우스 포인터가 대상 요소의 경계에 상대적으로 위치한 수직 좌표를 반환합니다	MouseEvent
oldValue	변경된 저장된 항목의 이전 값을 반환합니다	StorageEvent
oldURL	이전 해시 변경 전 문서의 URL을 반환합니다	HasChangeEvent
onemptied	악질적인 상황이 발생했을 때, 예를 들어 연결이 갑자기 끊어지면 이 이벤트가 발생합니다.
pageX	마우스 이벤트가 일어났을 때 마우스 포인터가 문서에 대하여의 가로 좌표를 반환합니다.	MouseEvent
pageY	마우스 이벤트가 일어났을 때 마우스 포인터가 문서에 대하여의 세로 좌표를 반환합니다.	MouseEvent
persisted	웹 페이지가 브라우저에 캐시되었는지 반환합니다.	PageTransitionEvent
propertyName	애니메이션 또는 전환과 관련된 CSS 속성 이름을 반환합니다.	AnimationEvent, TransitionEvent
pseudoElement	애니메이션 또는 전환과 관련된 가상 요소의 이름을 반환합니다.	AnimationEvent, TransitionEvent
region		MouseEvent
relatedTarget	마우스 이벤트를 일으킨 요소와 관련된 요소를 반환합니다.	MouseEvent
relatedTarget	이벤트를 일으킨 요소와 관련된 요소를 반환합니다.	FocusEvent
repeat	특정 키를 반복적으로 누른 상태인지 반환합니다.	KeyboardEvent
screenX	이벤트가 일어났을 때 마우스 포인터가 화면에 대하여의 가로 좌표를 반환합니다.	MouseEvent
screenY	이벤트가 일어났을 때 마우스 포인터가 화면에 대하여의 세로 좌표를 반환합니다.	MouseEvent
shiftKey	이벤트가 일어났을 때 'SHIFT' 키가 눌려졌는지 반환합니다.	MouseEvent
shiftKey	키 이벤트가 일어났을 때 'SHIFT' 키가 눌려졌는지 반환합니다.	KeyboardEvent, TouchEvent
state	히스토리 항목 복사본을 포함한 오브젝트를 반환합니다.	PopStateEvent
storageArea	영향을 받은 저장 오브젝트를 나타내는 오브젝트를 반환합니다.	StorageEvent
target	이벤트를 일으킨 요소를 반환합니다.	Event
targetTouches	현재 목표 요소와 동일한 목표 요소에 touchstart 이벤트가 일어난 모든 터치 객체 목록을 반환합니다.	TouchEvent
timeStamp	이벤트가 발생한 시간(기원에서의 밀리초수)을 반환합니다.	Event
total	로드될 작업의 총량을 반환합니다.	ProgressEvent
touches	현재 면에 닿고 있는 모든 터치 객체 목록을 반환합니다.	TouchEvent
transitionend	CSS 전환이 완료되면 이 이벤트가 발생합니다.	TransitionEvent
type	이벤트의 이름을 반환합니다.	Event
url	문서 URL을 변경한 항목을 반환합니다.	StorageEvent
which	마우스 이벤트가 일어났을 때 누른 마우스 버튼을 반환합니다.	MouseEvent
which	onkeypress 이벤트를 일으키는 키의 Unicode 문자 코드 또는 onkeydown 또는 onkeyup 이벤트를 일으키는 키의 Unicode 키 코드를 반환합니다.	KeyboardEvent
view	발생한 이벤트의 Window 객체에 대한 참조를 반환	UiEvent

HTML DOM 이벤트 메서드

다음 표는 DOM 이벤트 메서드를 나열합니다:

메서드	설명	이벤트 유형
createEvent()	새 이벤트를 생성	Event
getTargetRanges()	삽입을 받을 범위를 포함한 배열을 반환/삭제의 영향	InputEvent
getModifierState()	삽입을 받을 범위를 포함한 배열을 반환/삭제의 영향	MouseEvent
preventDefault()	브라우저가 선택된 요소의 기본 작업을 수행하지 않도록 방지	Event
stopImmediatePropagation()	동일 이벤트의 다른 리스너가 호출되지 않도록 방지	Event
stopPropagation()	이벤트 흐름에서 더 이상 전파되지 않도록 방지	Event

JavaScript 객체

JavaScript 참조 매뉴얼

JS DOM 참조 매뉴얼

HTML DOM 이벤트

HTML DOM 이벤트 속성

HTML DOM 이벤트 메서드

관련 참조