[JS-012]키보드/마우스 이벤트

[1] 키보드 이벤트

키보드에서 특정 키를 누를 때 발생하는 것이 키보드 이벤트 입니다.

이벤트명	발생 시점	값
keydown	키가 눌렸을 때	keyCode
keypress	키가 계속 눌린 상태일 때(연속 실행)	ASCII
keyup	키에서 손을 뗄 때	keyCode

◾ keypress 이벤트는 ASCII 표에 없는 shift, Fn, CapsLock 키는 인식하지 못함.

◾ keyCode 값 확인 사이트: https://keycode.info/

 

[2] 마우스 이벤트

마우스를 움직이거나 버튼 조작을 할 때 발생하는 이벤트 입니다.

이벤트명	발생 시점
click	HTML 요소를 마우스로 클릭(눌렀다 떼기)때 이벤트 발생
dbclick	HTML 요소를 마우스로 두 번 클릭했을 때 이벤트 발생
mousedown	HTML 요소를 마우스로 누르는 동안 이벤트 발생
mousemove	HTML 요소 위에서 마우스 포인터를 움직일 때 이벤트 발생
mouseover	HTML 요소 위로 마우스 포인터가 옮겨질 때 이벤트 발생
mouseout	HTML 요소를 마우스 포인터가 벗어날 때 이벤트 발생
mouseup	HTML 요소에서 눌렀떤 마우스를 뗄 때 이벤트 발생
contextmenu	마우스 오른쪽 버튼을 눌렀을 때 이벤트 발생

 

 

[예제1] 키보드값 확인하기

See the Pen JS_012_예제1 by wootekken (@wootekken) on CodePen.

 

 

[예제2] 마우스 이벤트 확인하기

See the Pen JS_012_예제2 by wootekken (@wootekken) on CodePen.