자바스크립트 이벤트 Javascript Event

1. 이벤트의 종류

1) 마우스

이벤트	설명
click	요소에 마우스를 클릭했을 때 이벤트가 발생
dbclick	요소에 마우스를 더블클릭했을 때 이벤트가 발생
mouseover	요소에 마우스를 오버했을 때 이벤트가 발생
mouseout	요소에 마우스를 아웃했을 때 이벤트가 발생
mousedown	요소에 마우스를 눌렀을 때 이벤트가 발생
mouseup	요소에 마우스를 떼었을 때 이벤트가 발생
mousemove	요소에 마우스를 움직였을 때 이벤트가 발생
contextmenu	context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생

2) 키

이벤트	설명
keydown	키를 눌렀을 때 이벤트가 발생
keyup	키를 떼었을 때 이벤트가 발생
keypress	키를 누른 상태에서 이벤트가 발생

※ 키보드에서 'A'키를 누르면 keydown 이벤트가 발생한다. 그 다음 창에 'A'가 입력된다. 그 다음 keypress 이벤트가 발생한다. 그래서, 창에 입력되지 않는 Enter, Alt, Ctrl 등의 키는 눌러도 keypress 이벤트가 발생하지 않는다.

※ 키코드(ACSII Code)

2022.01.24 - [컴퓨터/언어] - 키코드 Keycode(ACSII Code)

키코드 Keycode(ACSII Code)

example

HTML

<input onckeyup="enterkey()" />

Javascript

function enterkey() {
  if(window.event.keyCode ==13) {
  	alert("엔터키 누름!");
  }
}

3) 폼

이벤트	설명
focus	요소에 포커스가 이동되었을 때 이벤트 발생
blur	요소에 포커스가 벗어났을 때 이벤트 발생
change	요소에 값이 변경 되었을 때 이벤트 발생
submit	submit 버튼을 눌렀을 때 이벤트 발생
reset	reset 버튼을 눌렀을 때 이벤트 발생
select	input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생

4) 로드 및 기타

이벤트	설명
load	페이지의 로딩이 완료되었을 때 이벤트 발생
abort	이미지의 로딩이 중단되었을 때 이벤트 발생
unload	페이지가 다른 곳으로 이동될 때 이벤트 발생
resize	요소에 사이즈가 변경되었을 때 이벤트 발생
scroll	스크롤바를 움직였을 때 이벤트 발생
ended	미디어 재생이 종료