찾다

집 >웹 프론트엔드 >프런트엔드 Q&A >JavaScript의 DOM 이벤트는 무엇입니까?

JavaScript의 DOM 이벤트는 무엇입니까?

青灯夜游
青灯夜游원래의
2021-11-19 18:39:222904검색

js DOM 이벤트에는 중단, afterprint, 흐림, canplay, 변경, 클릭, 복사, 잘라내기, dblclick, 드래그, 드롭, 종료, 오류, 포커스, 열기, 로드, 재생 등이 포함됩니다.

JavaScript의 DOM 이벤트는 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

HTML DOM 이벤트

HTML DOM 이벤트를 통해 JavaScript는 HTML 문서의 요소에 다양한 이벤트 핸들러를 등록할 수 있습니다.

이벤트는 이벤트가 발생할 때까지(예: 사용자가 버튼을 클릭할 때) 실행되지 않는 함수와 함께 사용되는 경우가 많습니다.

Event Description
abort 이 이벤트는 미디어 로딩이 중단될 때 발생합니다.
afterprint 이 이벤트는 페이지 인쇄가 시작되거나 인쇄 대화 상자가 닫힐 때 발생합니다.
animationend CSS 이 이벤트는 애니메이션이 완료되면 발생합니다.
animationiteration CSS 애니메이션이 반복될 때 발생합니다.
animationstart 이 이벤트는 CSS 애니메이션이 시작될 때 발생합니다.
beforeprint 이 이벤트는 페이지가 인쇄되려고 할 때 발생합니다.
beforeunload 이 이벤트는 문서가 언로드되기 직전에 발생합니다.
blur 이 이벤트는 요소가 포커스를 잃을 때 발생합니다.
canplay 이 이벤트는 브라우저가 미디어 재생을 시작할 수 있을 때 발생합니다.
canplaythrough 이 이벤트는 브라우저가 버퍼링을 중지하지 않고 미디어를 재생할 수 있을 때 발생합니다.
change 이 이벤트는 양식 요소의 콘텐츠, 선택한 콘텐츠 또는 선택한 상태가 변경될 때 발생합니다.
click 이 이벤트는 사용자가 요소를 클릭할 때 발생합니다.
contextmenu 이 이벤트는 사용자가 요소를 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴를 열 때 발생합니다.
copy 이 이벤트는 사용자가 요소의 콘텐츠를 복사할 때 발생합니다.
cut 이 이벤트는 사용자가 요소의 콘텐츠를 잘라낼 때 발생합니다.
dblclick 이 이벤트는 사용자가 요소를 두 번 클릭할 때 발생합니다.
drag 이 이벤트는 요소를 드래그할 때 발생합니다.
dragend 이 이벤트는 사용자가 요소 드래그를 마쳤을 때 발생합니다.
dragenter 이 이벤트는 드래그된 요소가 드롭 대상에 들어갈 때 발생합니다.
dragleave 이 이벤트는 드래그된 요소가 드롭 대상을 벗어날 때 발생합니다.
dragover 이 이벤트는 드래그된 요소가 드롭 대상 위에 있을 때 발생합니다.
dragstart 이 이벤트는 사용자가 요소 드래그를 시작할 때 발생합니다.
drop 이 이벤트는 드래그된 요소를 드롭 대상에 드롭할 때 발생합니다.
durationchange 이 이벤트는 미디어 지속 시간이 변경될 때 발생합니다.
ended 이 이벤트는 미디어가 끝에 도달했을 때 발생합니다.
error 이 이벤트는 외부 파일을 로드하는 동안 오류가 발생할 때 발생합니다.
focus 이 이벤트는 요소가 포커스를 받을 때 발생합니다.
focusin 이 이벤트는 요소가 포커스를 얻으려고 할 때 발생합니다.
focusout 이 이벤트는 요소가 포커스를 잃으려고 할 때 발생합니다.
fullscreenchange 이 이벤트는 요소가 전체 화면 모드로 표시될 때 발생합니다.
fullscreenerror 이 이벤트는 전체 화면 모드에서 요소를 표시할 수 없을 때 발생합니다.
hashchange 이 이벤트는 URL의 앵커 부분이 변경될 때 발생합니다.
input 이 이벤트는 요소가 사용자 입력을 받을 때 발생합니다.
invalid 이 이벤트는 요소가 유효하지 않을 때 발생합니다.
keydown 이 이벤트는 사용자가 키를 누를 때 발생합니다.
keypress 이 이벤트는 사용자가 키를 누를 때 발생합니다.
keyup 이 이벤트는 사용자가 키를 놓을 때 발생합니다.
load 이 이벤트는 개체가 로드되었을 때 발생합니다.
loadeddata 이 이벤트는 미디어 데이터가 로드된 후에 발생합니다.
loadedmetadata 이 이벤트는 메타데이터(예: 크기 및 기간)가 로드될 때 발생합니다.
loadstart 이 이벤트는 브라우저가 지정된 미디어를 찾기 시작할 때 발생합니다.
message 이 이벤트는 이 이벤트 소스를 통해 메시지가 수신될 때 발생합니다.
mousedown 이 이벤트는 사용자가 요소에서 마우스 버튼을 누를 때 발생합니다.
mouseenter 이 이벤트는 포인터가 요소 위로 이동할 때 발생합니다.
mouseleave 이 이벤트는 포인터가 요소 밖으로 이동할 때 발생합니다.
mousemove 이 이벤트는 포인터가 요소 위로 이동할 때 발생합니다.
mouseout 이 이벤트는 사용자가 요소 또는 그 안에 있는 하위 요소 밖으로 마우스 포인터를 이동할 때 발생합니다.
mouseover 이 이벤트는 포인터가 요소 또는 그 안에 있는 하위 요소 위로 이동할 때 발생합니다.
mouseup 이 이벤트는 사용자가 요소에서 마우스 버튼을 놓을 때 발생합니다.
offline 이 이벤트는 브라우저가 오프라인으로 작동하기 시작할 때 발생합니다.
online 이 이벤트는 브라우저가 온라인으로 작동하기 시작할 때 발생합니다.
open 이 이벤트는 이벤트 소스에 대한 연결이 열릴 때 발생합니다.
pagehide 이 이벤트는 사용자가 탐색을 위해 페이지를 떠날 때 발생합니다.
pageshow 이 이벤트는 사용자가 웹페이지로 이동할 때 발생합니다.
paste 이 이벤트는 사용자가 일부 콘텐츠를 요소에 붙여넣을 때 발생합니다.
pause 이 이벤트는 사용자가 미디어를 일시중지하거나 프로그래밍 방식으로 일시중지할 때 발생합니다.
play 이 이벤트는 미디어가 시작되었거나 더 이상 일시 중지되지 않을 때 발생합니다.
playing 이 이벤트는 버퍼링 후 미디어 재생을 일시 중지하거나 중지할 때 발생합니다.
popstate 이 이벤트는 창의 기록이 변경될 때 발생합니다.
progress 이 이벤트는 브라우저가 미디어 데이터를 가져오는 중일 때 발생합니다.
ratechange 이 이벤트는 미디어 재생 속도가 변경될 때 발생합니다.
reset 이 이벤트는 양식이 재설정될 때 발생합니다.
resize 이 이벤트는 문서 보기의 크기가 조정될 때 발생합니다.
scroll 이 이벤트는 스크롤 요소의 스크롤 막대가 스크롤될 때 발생합니다.
search 이 이벤트는 사용자가 검색 필드에 입력할 때 발생합니다.
seeked 이 이벤트는 사용자가 미디어에서 새로운 위치로 이동/점프를 마쳤을 때 발생합니다.
seeking 이 이벤트는 미디어에서 사용자가 새로운 위치로 이동/점프를 시작할 때 발생합니다.
select 이 이벤트는 사용자가 텍스트( 및