이벤트
이벤트란 마우스를 오버하거나 키보드를 입력할 때 발생하는 모든 동작을 말합니다. 함수는 조건에 맞으면 실행하지만 이벤트는 이벤트 발생시 실행하는 실행문입니다.
이벤트
자바스크립트에는 다음과 같은 이벤트가 있습니다.
- 애니메이션 이벤트
- 클립보드 이벤트
- 드래그 이벤트
- 포커스 이벤트
- URL 이벤트
- 인풋 이벤트
- 키보드 이벤트
- 마우스 이벤트
- 페이지 전환 이벤트
- PopState 이벤트
- Progress 이벤트
- storage 이벤트
- 터치 이벤트
- 트랜지션 이벤트
- UI 이벤트
- 휠 이벤트
이벤트에서 쓰는 용어
- 이벤트 리스너 : 이벤트 속성에 연결된 함수를 나타냅니다.
- 디폴트 이벤트 : 요소가 가지고 있는 기본적인 이벤트를 나타냅니다.
- 이벤트 모델 : 이벤트를 연결하는 방법을 나타냅니다.
Mouse Event
종류 | 설명 |
---|---|
altKey | |
button | |
buttons | |
clientX | |
clientY | |
ctrlKey | |
getModifierState() | |
metaKey | |
movementX | |
movementY | |
offsetX | |
offsetY | |
pageX | |
pageY | |
relatedTarget | |
screenX | |
screenY | |
shiftKey | |
which |
이벤트 속성
종류 | 설명 |
---|---|
abort | 이미지 다운로드이 중단되는 경우 이벤트가 발생합니다. |
activate | 객체가 활성화될 때(태그 기능이 동작할 때) 호출 |
afterprint | 웹 페이지 인쇄가 시작되거나 인쇄 대화 상자가 닫힌 경우 이벤트가 발생합니다. |
afterupdate | 데이터 객체 내의 데이터가 업데이트 되었을 때 호출 |
animationend | 애니메이션이 완료되었을 때 이벤트가 발생합니다. |
animationiteration | 애니메이션이 반복될 때 이벤트가 발생합니다. |
animationstart | 애니메이션이 시작될 때 때 이벤트가 발생합니다. |
beforeactivate | 객체가 활성화되기 직전에 호출 |
beforecopy | 선택 영역이 클립보드로 복사되기 직전에 호출 |
beforecut | 선택 영역이 클립보드로 잘라내지기 직전에 호출 |
beforedeactivate | 웹 문서상에서 현재 객체에서 다른 객체로 activeElement가 변경될 때 호출 |
beforeeditfocus | 편집 가능한 객체 내부에 포함된 객체의 편집 모드가 활성화될 때 호출 |
beforepaste | 클립보드에서 문서로 붙여넣기를 할 때 대상 객체에서 호출 |
beforeprint | 웹 문서가 출력되기 직전에(또는 미리보기를 실행하기 직전에) 호출 |
beforeunload | 웹 문서가 업로드 되기 직전에 이벤트가 발생합니다. |
beforeupdate | 데이터 객체 내의 데이터가 업데이트 되기 직전에 호출 |
blur | 요소가 포커스를 잃었을 때 이벤트가 발생합니다. |
bounce | marquee 객체의 스크롤 영역 양쪽 끝에서 바운드 될 때 호출 |
canplay | 브라우저가 미디어 재생을 시작할 수 있을 때 이벤트가 발생합니다. |
cellchange | 데이터 객체에서 데이터가 변경될 때 호출 |
change | 폼 요소 또는 선택 영역의 내용이 변경될 때 이벤트가 발생하 니다. |
click | 요소 위에 마우스를 클릭할 때 이벤트가 발생합니다. |
contextmenu | 마우스 오른쪽 버튼을 눌러 팝업 메뉴를 띄울 때 이벤트가 발생합니다. |
controlselect | 사용자가 객체의 제어 영역을 선택할 때 호출 |
copy | 사용자가 컨텐츠의 요소를 복사할 때 이벤트가 발생합니다. |
cut | 사용자가 컨텐츠의 요소를 잘라내기 했을 때 이벤트가 발생합니다. |
dblclick | 요소를 더블클릭했을 때 이벤트가 발생합니다. |
deactivate | 웹 문서의 현재 선택된 객체에서 다른 객체로 activeDlement가 변할 때 호출 |
drag | 요소를 드래그 할 때 이벤트가 발생합니다. |
dragend | 요스를 드래그하고 끝날 때 이벤트가 발생합니다. |
dragenter | 요소를 드래그하는 동안 이벤트가 발생합니다. |
dragleave | 요소를 드래그하고 요소를 벗어났을 때 이벤트가 발생합니다. |
dragover | 드래그 가능 영역에서 드래그 할 때 이벤트가 발생합니다. |
dsragstart | 드래그 가능 영역에서 드래그를 시작할 때 이벤트가 발생합니다. |
drop | 드래그를 하다가 타겟 영역에 드롭하였을 때 이벤트가 발생합니다. |
durationchange | 미디어가 변경돼었을 때 이벤트가 발생합니다. |
ended | 미디어가 끝날 때 이벤트가 발생합니다. |
error | 웹 문서 내에서 스크립트 에러가 발생할 때 호출 |
focus | 요소에 포커스 상태가 되었을 때 이벤트가 발생합니다. |
focusin | 요소에 포커스가 되기 직전에 이벤트가 발생합니다. |
focusout | 요소에 포커스가 다른 요소로 이동할 때 이벤트가 발생합니다. |
fullscreenchange | 전체화면 모드로 표시할 수 없는 경우 이벤트가 발생합니다. |
hashchange | URL의 앵커가 변경되어 있을 때 이벤트가 발생합니다. |
help | 브라우저에서 F1 키를 눌렀을 때 이벤트가 발생합니다. |
input | 사용자가 input 요소를 눌렀을 때 이벤트가 발생합니다. |
invalid | 요소가 유효하지 않는 경우 이벤트가 발생합니다. |
keydown> | 사용자가 키를 눌렀을 때 이벤트가 발생합니다. |
keypress | 사용자가 기능 키를 제외한 키를 눌렀을 때 이벤트가 발생합니다. |
keyup | 사용자가 키를 눌렀다가 떼었을 때 이벤트가 발생합니다. |
load | 브라우저가 로딩한 다음 이벤트가 발생합니다. |
loadeddata | 미디어 데이터가 로딩될 때 이벤트가 발생합니다. |
loadedmetadata | 미디어 메타 데이터가 로딩될 때 이벤트가 발생합니다. |
loadstart | 브라우저가 미디어를 찾기 시작할 때 이벤트가 발생합니다. |
message | 이벤트 소스를 통해서 메세지를 전송할 때 이벤트가 발생합니다. |
mousedown | 요소 위에서 마우스 버튼을 클릭할 때 이벤트가 발생합니다. |
mouseenter | 요소 영역에 마우스 포인터가 들어올 때 이벤트가 발생합니다. |
mouseleave | 요소 영역 밖으로 마우스 포인터가 이동할 때 이벤트가 발생합니다. |
mousemove | 요소 영역 내에서 마우스 포인터가 움직일 때 이벤트가 발생합니다. |
mouseout | 요소 영역 밖으로 마우스 포인터가 빠져나갈 때 이벤트가 발생합니다. |
mouseover | 요소 영역으로 마우스 포인터가 들어올 때 이벤트가 발생합니다. |
mouseup | 요소 위에서 마우스 버튼을 눌렀다가 떼었을 때 이벤트가 발생합니다. |
mousewheel | 마우스 휠로 조정할 때 이벤트가 발생합니다.(없어짐) |
offline | 브라우저가 오프라인 작업을 시작하면 이벤트가 발생합니다 |
online | 브라우저가 온라인 작업을 시작하면 이벤트가 발생합니다. |
open | 이벤트 소스와 연결될 때 이벤트가 발생합니다. |
pagehide | 사용자가 웹 페이지에서 떠날 때 이벤트가 발생합니다. |
pageshow | 사용자가 웹 페이지로 새로 이동할 때 이벤트가 발생합니다. |
paste | 사용자가 요소를 붙여넣기 할 때 이벤트가 발생합니다. |
pause | 사용자가 미디어를 정지할 때 이벤트가 발생합니다. |
playing | 사용자가 미디어를 시작할 때 이벤트가 발생합니다. |
popstate | 사용자가 윈도우 창을 변경 할 때 이벤트가 발생합니다. |
progress | 브라우저가 미디어 데이터를 다운로드 중 일때 이벤트가 발생합니다. |
ratechange | 미디어의 재생 속도가 변경 될 때 이벤트가 발생합니다. |
resize | 문서의 크기가 변경될 때 이벤트가 발생합니다. |
reset | 사용자가 폼을 리셋할 때 이벤트가 발생합니다. |
resizeend | 사용자가 객체의 크기 변경을 끝낼 때 호출 |
resizestart | 사용자가 객체의 크기변경을 시작할 때 호출 |
rowenter | 데이터 소스 내에서 현재 열이 변경되거나 객체에 새로운 데이터가 추가될 때 호출 |
rowexit | 데이터 소스 컨트롤이 객체 내의 현재 열을 변경시킬 때 호출 |
rowsdelete | 현재 레코드셋에 열이 삭제될 때 호출 |
rowsinserted | 현재 레코드셋에 새로운 열리 추가될 때 호출 |
scroll | 사용자가 스크롤 할 때 이벤트가 발생합니다. |
search | 사용자가 검색 차에서 검색할 때 이벤트가 발생합니다. |
seeked | 미디어에서 이동 및 건너뛰기가 끝났을 때 이벤트가 발생합니다. |
seeking | 미디어에서 이동 및 건너뛰기가 시작할 때 이벤트가 발생합니다. |
select | 선택 영역이 변경될 때 이벤트가 발생합니다. |
show | 메뉴 요소가 표실될 때 이벤트가 발생합니다. |
stalled | 미디어 데이터를 가져오려고 시도 했지만 가져올 수 없는 경우에 이벤트가 발생합니다. |
storage | 웹 저장소의 영역이 업데이트 될 때 이벤트가 발생합니다. |
submit | 폼 양식이 전송되기 직전에 이벤트가 발생합니다. |
suspend | 브라우저가 의도적으로 미디어 데이터를 가져오지 않을 때 이벤트가 발생합니다. |
timeupdate | 재생 위치가 변경될 때 이벤트가 발생합니다. |
toggle | <details> 요소를 열거나 닫을 때 이벤트가 발생합니다. |
touchcancel | 터치가 중단되면 이벤트가 발생합니다. |
touchend | 손가락이 터치 스크린에서 제거 될 때 이벤트가 발생합니다. |
touchend | 손가락이 터치 스크린에서 제거 될 때 이벤트가 발생합니다. |
touchmove | 스크린에서 손가락을 드래그 하고 있을 때 이벤트가 발생합니다. |
touchstart | 스크린에서 손가락이 드래그 시작할 때 이벤트가 발생합니다. |
transitionend | CSS transitio이 완료되면 이벤트가 발생합니다. |
unload | 페이지가 로드되지 않으면 이벤트가 발생합니다. |
volumechange | 미디어의 볼륨이 변경되었을 때 이벤트가 발생합니다. |
waiting | 미디어의 버퍼링을 위해 일시 중지한 경우 이벤트가 발생합니다. |
wheel | 마우스 휠을 올릴거나 내일때 이벤트가 발생합니다. |