웹에서 자주쓰이는 이벤트

자주 쓰이는 이벤트

사용자가 실제 이벤트를 발생시켰을 때 그 이벤트에 대한 처리를 하는 것이. '이벤트 핸들러'이다.

'이벤트 핸들러'는 이벤트 앞에 'on'을 붙여 주고 이벤트에 대한 동작(함수)을 처리하면 된다.

다음은 자주 쓰이는 이벤트 들이다.

마우스 이벤트

click	요소에 마우스를 클릭했을 때(눌렀다가 떼는 연결된 동작을 click 이라고 한다.)
dbclick	요소에 마우스를 더블클릭했을 때
mouseover	요소에 마우스를 오버했을 때(요소위에 올라가는 순간 이후에는 반응하지 않는다.)
mouseout	요소에서 마우스가 벗어날 때
mousedown	요소에 마우스를 눌렀을 때
mouseup	요소에서 마우스를 눌렀다가 떼었을 때
mousemove	요소에 마우스를 움직였을 때(요소위에 올라가는 순간부터 나올 때까지 계속해서 반응한다)
contextmenu	마우스 오른쪽 버튼을 눌럿을 때 나오는 메뉴가 나오기 전에

 

키 이벤트

keydown	키를 눌렀을 때(모든키에 다 반응한다.)
keyup	키를 떼었을 때(모든키에 다 반응한다.)
keypress	키를 누른 상태에서(특수 한 키에는 반응하지 않는다.)

 

폼 이벤트

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

 

로드 및 기타 이벤트

load	페이지의 로딩이 완료되었을 때
abort	이미지의 로딩이 중단되었을 때
unload	페이지가 다른 곳으로 이동될 때
resize	요소에 사이즈가 변경되었을 때
scroll	스크롤바를 움직였을 때

이 글은 자바스크립트+ jQuery마스터 김광수 | 이태하 저 의 내용을 공부하며 정리한 내용입니다.