HTML DOM 이벤트

HTML DOM 이벤트

HTML DOM 이벤트는 JavaScript가 HTML 문서의 요소에 다양한 이벤트 처리기를 등록할 수 있게 합니다.

이벤트는 일반적으로 함수와 함께 사용되며, 이벤트가 발생하기 전까지 함수는 실행되지 않습니다. (예를 들어, 사용자가 버튼을 클릭할 때)

이벤트에 대한 튜토리얼을 배우려면 우리의 JavaScript 이벤트 튜토리얼。

이벤트 설명 속성
abort 미디어가 로드 중지될 때 이 이벤트가 발생합니다.
afterprint 페이지가 인쇄가 시작되거나 인쇄 대화 상자가 닫혀질 때 이 이벤트가 발생합니다. 이벤트
animationend CSS 애니메이션이 완료될 때 이 이벤트가 발생합니다. Animation이벤트
animationiteration CSS 애니메이션이 반복될 때 이 이벤트가 발생합니다. Animation이벤트
animationstart CSS 애니메이션이 시작될 때 이 이벤트가 발생합니다. Animation이벤트
beforeprint 페이지를 인쇄할 준비를 하고 있을 때 이 이벤트가 발생합니다. 이벤트
beforeunload 문서가 다운로드되기 전에 이 이벤트가 발생합니다.
blur 요소가 포커스를 잃을 때 이 이벤트가 발생합니다. Focus이벤트
canplay 브라우저가 미디어를 재생할 수 있을 때 이 이벤트가 발생합니다. 이벤트
canplaythrough 브라우저가 버퍼링을 중지하지 않고 미디어를 재생할 수 있을 때 이 이벤트가 발생합니다. 이벤트
변경 form 요소의 내용, 선택된 내용 또는 선택된 상태가 변경될 때 이 이벤트가 발생합니다. 이벤트
클릭 사용자가 요소를 클릭할 때 이 이벤트가 발생합니다。 MouseEvent
컨텍스트 메뉴 사용자가 요소를 오른쪽 클릭하여 컨텍스트 메뉴를 엽니다. 이 때 이 이벤트가 발생합니다。 MouseEvent
복사 사용자가 요소의 내용을 복사하는 동안 이 이벤트가 발생합니다。 ClipboardEvent
자르기 사용자가 요소의 내용을 잘라내는 동안 이 이벤트가 발생합니다。 ClipboardEvent
더블 클릭 사용자가 요소를 더블 클릭할 때 이 이벤트가 발생합니다。 MouseEvent
드래그 요소를 드래그하고 있을 때 이 이벤트가 발생합니다。 DragEvent
드래그엔드 dragend DragEvent
사용자가 드래그된 요소를 드래그 완료했을 때 이 이벤트가 발생합니다. dragenter DragEvent
드래그된 요소가 배치 대상에 들어갈 때 이 이벤트가 발생합니다. dragleave DragEvent
드래그된 요소가 배치 대상에서 벗어날 때 이 이벤트가 발생합니다. dragover DragEvent
드래그된 요소가 배치 대상 위에 있을 때 이 이벤트가 발생합니다. dragstart DragEvent
사용자가 요소를 드래그 시작할 때 이 이벤트가 발생합니다. drop DragEvent
드래그된 요소를 배치 대상 위에 배치할 때 이 이벤트가 발생합니다. durationchange 이벤트
미디어 지속 시간이 변경될 때 이 이벤트가 발생합니다. ended 이벤트
미디어가 끝날 때 이 이벤트가 발생합니다. error
외부 파일을 로드할 때 오류가 발생한 후 이 이벤트가 발생합니다. focus Focus이벤트
요소가 초점을 얻을 때 이 이벤트가 발생합니다. focusin Focus이벤트
요소가 초점을 얻을 준비를 하고 있을 때 이 이벤트가 발생합니다. focusout Focus이벤트
요소가 초점을 잃을 준비를 하고 있을 때 이 이벤트가 발생합니다. fullscreenchange 이벤트
요소가 전체 화면 모드로 표시될 때 이 이벤트가 발생합니다. fullscreenerror 이벤트
요소가 전체 화면 모드에서 표시되지 않을 때 이 이벤트가 발생합니다. hashchange URL의 앵커 부분이 변경될 때 이 이벤트가 발생합니다.
input 요소가 사용자 입력을 받을 때 이 이벤트가 발생합니다.
invalid 요소가 유효하지 않을 때 이 이벤트가 발생합니다. 이벤트
keydown 사용자가 키를 누르고 있는 동안 이 이벤트가 발생합니다. Keyboard이벤트
keypress 사용자가 키를 누를 때 이 이벤트가 발생합니다. Keyboard이벤트
keyup 사용자가 키를 떼었을 때 이 이벤트가 발생합니다. Keyboard이벤트
load 객체가 로드된 후 이 이벤트가 발생합니다.
loadeddata 미디어 데이터가 로드된 후 이 이벤트가 발생합니다. 이벤트
loadedmetadata 메타데이터(예: 크기와 지속 시간)를 로드할 때 이 이벤트가 발생합니다. 이벤트
loadstart 브라우저가 지정된 미디어를 찾기 시작할 때 이 이벤트가 발생합니다. Progress이벤트
message 이 이벤트 소스를 통해 메시지를 수신할 때 이 이벤트가 발생합니다. 이벤트
mousedown 사용자가 요소 위에서 마우스 버튼을 누를 때 이 이벤트가 발생합니다. MouseEvent
mouseenter 포인터가 요소 위에 이동할 때 이 이벤트가 발생합니다. MouseEvent
mouseleave 포인터가 요소 밖으로 이동할 때 이 이벤트가 발생합니다. MouseEvent
mousemove 포인터가 요소 위에서 이동할 때 이 이벤트가 발생합니다. MouseEvent
mouseout 사용자가 마우스 포인터를 요소나 그 자식 요소 밖으로 이동할 때 이 이벤트가 발생합니다. MouseEvent
mouseover 포인터가 요소나 그 자식 요소 위에 이동할 때 이 이벤트가 발생합니다. MouseEvent
mouseup 사용자가 요소 위에서 마우스 버튼을 떼었을 때 이 이벤트가 발생합니다. MouseEvent
mousewheel 추천하지 않습니다.이를 대체하십시오. wheel 이벤트 WheelEvent
offline 브라우저가 오프라인으로 작업을 시작할 때 이 이벤트가 발생합니다. 이벤트
online 브라우저가 온라인으로 작업을 시작할 때 이 이벤트가 발생합니다. 이벤트
open 이벤트 소스와의 연결을 열 때 이 이벤트가 발생합니다. 이벤트
pagehide 사용자가 특정 웹 페이지에서 이동할 때 이 이벤트가 발생합니다. PageTransitionEvent
pageshow 사용자가 특정 웹 페이지로 이동할 때 이 이벤트가 발생합니다. PageTransitionEvent
paste 사용자가 일부 내용을 요소에 붙여넣을 때 이 이벤트가 발생합니다. ClipboardEvent
pause 미디어가 사용자에 의해 중지되거나 프로그래밍 방식으로 중지되면 이 이벤트가 발생합니다. 이벤트
play 미디어가 시작되거나 중지되지 않을 때 이 이벤트가 발생합니다. 이벤트
playing 미디어가 버퍼링 후 재생되거나 중지되면 이 이벤트가 발생합니다. 이벤트
popstate 윈도우의 이력 기록이 변경될 때 이 이벤트가 발생합니다. PopState이벤트
progress 브라우저가 미디어 데이터를 가져오는 중이면 이 이벤트가 발생합니다. 이벤트
ratechange 미디어 재생 속도가 변경될 때 이 이벤트가 발생합니다. 이벤트
reset 양식을 재설정할 때 이 이벤트가 발생합니다. 이벤트
resize 문서 뷰의 크기를 조정할 때 이 이벤트가 발생합니다.
scroll 스크롤 요소의 스크롤 바를 드래그할 때 이 이벤트가 발생합니다.
search 사용자가 검색 필드에 내용을 입력할 때 이 이벤트가 발생합니다. 이벤트
seeked 사용자가 미디어 내 새 위치로 이동하거나 점프를 완료할 때 이 이벤트가 발생합니다. 이벤트
seeking 사용자가 미디어 내 새 위치로 이동하거나 점프할 때 이 이벤트가 발생합니다. 이벤트
select 사용자가 텍스트를 선택한 후 (<input>와 <textarea>) 이 이벤트가 발생합니다.
show <menu> 요소가 컨텍스트 메뉴로 표시될 때 이 이벤트가 발생합니다. 이벤트
stalled 브라우저가 미디어 데이터를 가져오려고 했지만 데이터가 사용할 수 없을 때 이 이벤트가 발생합니다. 이벤트
storage 웹 스토리지 영역이 업데이트될 때 이 이벤트가 발생합니다. Storage이벤트
submit 양식을 제출할 때 이 이벤트가 발생합니다. 이벤트
suspend 브라우저가 의도적으로 미디어 데이터를 가져오지 않을 때 이 이벤트가 발생합니다. 이벤트
timeupdate 플레이어 위치가 변경될 때 이 이벤트가 발생합니다. 이벤트
toggle 사용자가 <details> 요소를 열거나 닫을 때 이 이벤트가 발생합니다. 이벤트
touchcancel 터치가 중단되면 이 이벤트가 발생합니다. TouchEvent
touchend 손가락이 터치스크린에서 벗어나면 이 이벤트가 발생합니다. TouchEvent
touchmove 손가락이 화면에서 드래그될 때 이 이벤트가 발생합니다. TouchEvent
touchstart 손가락이 터치스크린에 올라가면 이 이벤트가 발생합니다. TouchEvent
transitionend CSS 변환 완료되면 이 이벤트가 발생합니다. Transition이벤트
unload 페이지가 로드되지 않은 후(예: <body>에 대한 경우) 이 이벤트가 발생합니다.
volumechange 미디어의 볼륨이 변경될 때 이 이벤트가 발생합니다. 이벤트
waiting 미디어가 일시 중지되었지만 다시 시작할 예정인 경우 이 이벤트가 발생합니다. 이벤트
wheel 요소에 마우스 휠이 위쪽 또는 아래쪽으로 롤링될 때 이 이벤트가 발생합니다. WheelEvent

HTML DOM 이벤트 속성 및 메서드

속성/메서드 설명 속성
altKey 마우스 이벤트가 발생할 때 "ALT" 키가 눌렸는지 여부를 반환합니다. MouseEvent
altKey 키 이벤트가 발생할 때 "ALT" 키가 눌렸는지 여부를 반환합니다.
animationName 애니메이션의 이름을 반환합니다. Animation이벤트
bubbles 특정 이벤트가 버블 이벤트인지 여부를 반환합니다. 이벤트
button 마우스 이벤트가 일어났을 때 누른 마우스 버튼을 반환합니다. MouseEvent
buttons 마우스 이벤트가 일어났을 때 누른 마우스 버튼을 반환합니다. MouseEvent
cancelBubble 이벤트가 상위 레벨로 전파되어야 하는지 설정하거나 반환합니다.
cancelable 이벤트가 기본 작업을 방지할 수 있는지 여부를 반환합니다. 이벤트
changeTouches 이전 터치와 현재 터치 사이에 상태가 변경된 모든 터치 객체의 목록을 반환합니다. TouchEvent
charCode onkeypress 이벤트가 발생할 때 누른 키의 Unicode 문자 코드를 반환합니다. Keyboard이벤트
clientX 마우스 이벤트가 발생할 때 마우스 포인터가 현재 창에 대한 가로 좌표를 반환합니다.
clientY 마우스 이벤트가 발생할 때 마우스 포인터가 현재 창에 대한 세로 좌표를 반환합니다.
clipboardData 클립보드 작업에 영향을 받은 데이터를 포함하는 객체를 반환합니다. ClipboardData
code 이벤트를 발생시킨 키의 코드를 반환합니다. Keyboard이벤트
composed 이 이벤트가 Shadow DOM에서 일반 DOM으로 전달될 수 있는지 여부를 나타냅니다. 이벤트
composedPath() 이벤트의 경로를 반환합니다.
createEvent() 새 이벤트를 생성합니다. 이벤트
ctrlKey 마우스 이벤트가 발생할 때 "CTRL" 키가 눌렸는지 여부를 반환합니다. MouseEvent
ctrlKey 키 마우스 이벤트에서 "CTRL" 키가 눌렸는지 여부를 반환합니다.
currentTarget 이벤트 리스너가 이벤트를 발생시킨 요소를 반환합니다. 이벤트
data 삽입된 문자를 반환합니다. InputEvent
dataTransfer 이동하거나 삽입/삭제된 데이터를 포함하는 객체를 반환합니다.
defaultPrevented preventDefault() 메서드를 호출했는지 여부를 반환합니다. 이벤트
deltaX 마우스 휠의 가로 롤링 양(세로축)을 반환합니다. WheelEvent
deltaY 마우스 휠의 세로 롤링 양(가로축)을 반환합니다. WheelEvent
deltaZ 마우스 휠의 Z축 롤링 양을 반환합니다. WheelEvent
deltaMode 증가 값(픽셀, 라인 또는 페이지)의 단위를 나타내는 숫자를 반환합니다. WheelEvent
detail 마우스가 클릭된 횟수를 나타내는 숫자를 반환합니다. Ui이벤트
elapsedTime 애니메이션이 실행된 초 수를 반환합니다. Animation이벤트
elapsedTime 전환이 실행된 초 수를 반환합니다. 　
eventPhase 이벤트 스트림이 현재 어느 단계에 있는지 반환합니다. 이벤트
getModifierState() 목표 범위를 포함하는 배열을 반환합니다. 이 범위는 삽입/삭제에 영향을 받습니다. MouseEvent
getTargetRanges() 목표 범위를 포함하는 배열을 반환합니다. 이 범위는 삽입/삭제에 영향을 받습니다. InputEvent
inputType 변경된 유형(즉 "inserting" 또는 "deleting")을 반환합니다. InputEvent
isComposing 이벤트의 상태가 형성 중인지 반환합니다.
isTrusted 이벤트가 신뢰할 수 있는지 반환합니다. 이벤트
key 이벤트가 표현하는 키의 값을 반환합니다. Keyboard이벤트
key 변경된 저장 항목의 키를 반환합니다. Storage이벤트
keyCode onkeypress, onkeydown 또는 onkeyup 이벤트가 발생할 때 키의 Unicode 문자 코드를 반환합니다. Keyboard이벤트
location 키보드나 장치에 있는 키의 위치를 반환합니다. Keyboard이벤트
lengthComputable 진도의 길이가 계산될 수 있는지 반환합니다. Progress이벤트
loaded 로드된 작업량을 반환합니다. Progress이벤트
metaKey 이벤트가 발생할 때 "META" 키가 눌렸는지 반환합니다. MouseEvent
metaKey 키 이벤트가 발생할 때 "META" 키가 눌렸는지 반환합니다.
MovementX 이전 mousemove 이벤트에 대한 위치에 대한 마우스 포인터의 수평 좌표를 반환합니다. MouseEvent
MovementY 이전 mousemove 이벤트에 대한 위치에 대한 마우스 포인터의 수직 좌표를 반환합니다. MouseEvent
newURL 변경된 해시 후의 문서 URL을 반환합니다. HasChangeEvent
newValue 변경된 저장 항목의 새로운 값을 반환합니다. Storage이벤트
offsetX 마우스 포인터가 목표 요소의 가장자리에 대한 수평 좌표를 반환합니다. MouseEvent
offsetY 마우스 포인터가 목표 요소의 가장자리에 대한 수직 좌표를 반환합니다. MouseEvent
oldURL 변경된 해시 전의 문서 URL을 반환합니다. HasChangeEvent
oldValue 변경된 저장 항목의 이전 값을 반환합니다. Storage이벤트
onemptied 악질적인 상황이 발생하고 미디어 파일이 갑자기 사용할 수 없어지면 이 이벤트가 발생합니다. 　
pageX 마우스 이벤트가 발생할 때 마우스 포인터가 문서에 대한 수평 좌표를 반환합니다. MouseEvent
pageY 마우스 이벤트가 발생할 때 마우스 포인터가 문서에 대한 수직 좌표를 반환합니다. MouseEvent
persisted 웹 페이지가 브라우저 캐시에 저장되었는지 반환합니다. PageTransitionEvent
preventDefault() 이벤트가 취소될 수 있으면 취소하고, 이벤트에 대한 기본 작업을 수행하지 않습니다. 이벤트
propertyName 어댑티브 또는 전환과 관련된 CSS 속성 이름을 반환합니다.
pseudoElement 어댑티브 요소의 이름을 반환합니다.
region MouseEvent
relatedTarget 마우스 이벤트를 일으킨 요소와 관련된 요소를 반환합니다. MouseEvent
relatedTarget 이벤트를 일으킨 요소와 관련된 요소를 반환합니다. Focus이벤트
repeat 특정 키를 반복적으로 누른 여부를 반환합니다. Keyboard이벤트
screenX 화면에 대한 창/마우스 포인터의 수평 좌표를 반환합니다. MouseEvent
screenY 화면에 대한 창/마우스 포인터의 수직 좌표를 반환합니다. MouseEvent
shiftKey 이벤트가 일어났을 때 "SHIFT" 키가 눌러졌는지 반환합니다. MouseEvent
shiftKey 키 이벤트가 일어났을 때 "SHIFT" 키가 눌러졌는지 반환합니다.
state 히스토리 항목 복사본을 포함하는 객체를 반환합니다. PopState이벤트
stopImme...() 같은 이벤트의 다른 리스너가 호출되지 않도록 합니다. 이벤트
stopPropagation() 이벤트를 이벤트 스트림에서 더 이상 전파하지 않도록 합니다. 이벤트
storageArea 영향을 받은 저장 객체를 대표하는 객체를 반환합니다. Storage이벤트
target 이벤트를 일으킨 요소를 반환합니다. 이벤트
targetTouches 전체 터치 면에 여전히 접촉하고 있는 모든 터치 포인트를 포함하는 Touch 객체의 TouchList 목록을 반환합니다. TouchEvent
timeStamp 이벤트가 생성된 시간(기원으로부터의 밀리초 수)을 반환합니다. 이벤트
total 로드될 작업의 총량을 반환합니다. Progress이벤트
touches 현재 표면에 접촉하고 있는 모든 touch 객체의 목록을 반환합니다. TouchEvent
type 이벤트 이름을 반환합니다. 이벤트
url 변경된 항목이 있는 문서의 URL을 반환합니다. Storage이벤트
which 마우스 이벤트가 일어났을 때 누른 마우스 버튼을 반환합니다. MouseEvent
which onkeypress 이벤트를 일으킨 키의 Unicode 문자 코드 또는 onkeydown 또는 onkeyup 이벤트를 일으킨 키의 Unicode 키 코드를 반환합니다. Keyboard이벤트
view 이벤트가 발생한 Window 객체에 대한 참조를 반환합니다. Ui이벤트