본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

[Javascript] 이벤트

이벤트

이벤트란 마우스를 오버하거나 키보드를 입력할 때 발생하는 모든 동작을 말합니다. 함수는 조건에 맞으면 실행하지만 이벤트는 이벤트 발생시 실행하는 실행문입니다.

이벤트

자바스크립트에는 다음과 같은 이벤트가 있습니다.

  • 애니메이션 이벤트
  • 클립보드 이벤트
  • 드래그 이벤트
  • 포커스 이벤트
  • 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 마우스 휠을 올릴거나 내일때 이벤트가 발생합니다.

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기