JavaScript의 DOM 이벤트는 무엇입니까?
dom
javascript
이벤트
js DOM 이벤트에는 중단, afterprint, 흐림, canplay, 변경, 클릭, 복사, 잘라내기, dblclick, 드래그, 드롭, 종료, 오류, 포커스, 열기, 로드, 재생 등이 포함됩니다.
이 튜토리얼의 운영 환경: 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 | 이 이벤트는 사용자가 텍스트( 및 |