본문 바로가기

HTML / CSS / Java Script

[JS] 자바스크립트 이벤트종류

이벤트(event)란?

해당프로그램에서 어떤 동작이나 사건이 발생했음 알려주는 신호에요
예로보면 키보드를 눌렀다든지 마우스를 클릭했다든지 하는 동작에 대한 이벤트가 발생한다고 생각하면되요
이벤트가 발생할때 일처리를 할수 있는 함수나 객체의 메소드를 호출함으로써 동작에 반응할 수 있는 페이지를 만들수 있고 이벤트가 발생했을때 일처리를도와주는것이 이벤트핸들러(event handler)라고합니다


이벤트



어떤 이벤트가 발생했을때 일처리를 수행할 함수나 메소드를 연결하는 방법은 HTML문서의 태그를 사용하거나 Event객체를 사용하는 것이다.


< on이벤트이름="이벤트처리할 함수나 메소드">

예 : <body onLoad="start( )">


click : 마우스클릭했을때
dblclick : 더블클릭했을때
mousedown : 마우스버튼을 눌렀을때
mouseup : 마우스 눌렀다 놓았을때
dregdrop : 마우스버튼을 누른상태에서 움직일때(드래그 & 드롭했을때)
mouseover : 마우스가 영역을 위로 올라올때
mouseout : 마우스가 영역을 벗어날때
mousemove : 마우스를 움직일때
focus : 입력양식에 포커스가 생길때
blur : 입력양식에 있던 포커스가 다른곳으로 이동할때
select : 입력양식에 특정한 항목을 선택할때
change : 입력양식의 내용이 변경될때
submit : 입력양식을 서버로 보낼때
reset : 입력된 내용을 리셋시킬때
load : 웹브라우저에서 문서를 읽어올때
unload : 웹브라우저에서 문서가 사라질때
abort : 이미지읽기를 강제로 중단할때
error : 에러가 발생할때
keydown : 키보드의 키를 눌렀을때
keypress : 키보드의 키를 눌렀을때
keyup : 키보드를 눌렀다가 놓았을때
move : 윈도나 프레임을 움직일때
resize : 윈도나 프레임을 크기를 조절했을때


Event객체는 이벤트에 관한 이벤트의 종류, 대상, 발생위치 등을 제공하는 객체

altKey : 알터키를 누른 상태인지 아닌지를 true, false로 나타냄
button : 마우스왼쪽 버튼을 누르면1 오른쪽 버튼을 누르면 2번 가운데 버튼을 누르면 3번
clientX : HTML문서를 기준으로 이벤트가 발생한 X좌표
clientY : HTML문서를 기준으로 이벤트가 발생한 Y좌표
ctrlKyt : 컨트롤키를 누른상태인지 아닌지를 true, false로 나타냄
keyCode : 키보드를 눌렀을때 해당키의 코드값을 나타냄
screenX : 화면을 기준으로 이벤트가 발생한 X의 좌표
screenY : 화면을 기준으로 이벤트가 발생한 Y의 좌표