JavaScript-이벤트

이벤트(event)란?

"마우스 버튼을 클릭 또는 올렸을 경우" 또는 "키보드는 누르는 경우"와 같이 어떤 특정한 사건이나 동작을 의미하며

이런 이벤트가 발생할 때마다 적당한 처리가 이루어지기 위해서는 이벤트 핸들러가 필요하다!

이벤트 헨들러는 이벤트 이름 앞에 on을 붙여 표기하며, HTML 태그의 한 속성으로 사용된다.

형식 : <태그 속성="값" ... on이벤트명="이벤트 핸들링을 위한코드">

 

*onClick이벤트로 배경색상바꿔보기*

See the Pen by jangbora (@jangboraa) on CodePen.

 

*onClick으로 글씨 색상 바꿔보기*

See the Pen js-event(change) by jangbora (@jangboraa) on CodePen.

 

*onClick으로 가격 할인 금액 계산하기

See the Pen js-event(onclick) by jangbora (@jangboraa) on CodePen.

 

 

*onClick으로 상세보기 상세닫기 

See the Pen by jangbora (@jangboraa) on CodePen.

 

 

 

주요 이벤트 

구   분	이벤트	설   명
윈도우	load	브라우저에서 웹 문서를 모두 읽어 왔을 때 발생
	unload	브라우저의웹 문서를 닫을 때 발생
커서 포커스	focus	윈도우, 폼, 구성요소, 프레임이 포커스를 받을 때 발생
	blur	포커스를 잃을 때 발생
폼	change	입력양식의 값이 변경되었을 때 발생
	reset	입력양식을 초기화시켰을 때
	select	입력양식의 내용 중 특정 내용을 선택했을 때 발생
키보드	keydown	키보드의 키를 누르는 순간 발생
	keyup	키보드의 키를 누른 뒤 발생
	keypress	키보드의 키를 눌렀다 놓는 순간 발생
마우스	click	마우스를 클릭하는 순간 발생
	dbclick	마우스를 더블클릭하는 순간 발생
	mousedown	마우스 버튼을 누르는 순간 발생
	mouseup	마우스 버튼을 클릭했다 놓는 순간 발생
	mousemove	마우스가 움직일 때마다 발생
	mouseover	마우스 커서를 링크 위에 올려놓을 때 발생