[JavaScript]자바스크립트 마우스, 폼, 입력, 키보드 등 이벤트 정리

자바스크립트 이벤트란 무엇인가요?

자바스크립트에서의 이벤트는 웹 페이지에서 발생하는 다양한 상황이나 사용자 행동에 대한 신호를 나타냅니다. 이벤트의 예를 들면, 버튼 클릭, 키보드 입력, 마우스 움직임 등이 해당됩니다.

 

이벤트를 사용하기 위해서는 HTML요소.addEvenetListener("이벤트 발생 방법", "함수");와 같은 코드로 작성하셔야합니다.

각각의 이벤트마다 다른 HTML요소를 요구할 수 있습니다. 

마우스 이벤트
이벤트 타입	설명	예제 코드
click	요소를 클릭했을 때 발생	element.addEventListener('click', function() { /* 코드 */ });
dblclick	요소를 더블 클릭했을 때 발생	element.addEventListener('dblclick', function() { /* 코드 */ });
mousedown	마우스 버튼을 눌렀을 때 발생	element.addEventListener('mousedown', function() { /* 코드 */ });
mouseup	마우스 버튼을 뗐을 때 발생	element.addEventListener('mouseup', function() { /* 코드 */ });
mousemove	마우스가 움직일 때 발생	element.addEventListener('mousemove', function() { /* 코드 */ });
mouseover	마우스가 요소 위로 진입했을 때 발생	element.addEventListener('mouseover', function() { /* 코드 */ });
mouseout	마우스가 요소를 벗어났을 때 발생	element.addEventListener('mouseout', function() { /* 코드 */ });
contextmenu	마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴를 열 때 발생	element.addEventListener('contextmenu', function(event) { /* 코드 */ });

 

폼/입력 이벤트
이벤트 타입	설명	예제 코드
submit	폼을 제출할 때 발생	formElement.addEventListener('submit', function(event) { /* 코드 */ });
reset	폼을 리셋할 때 발생	formElement.addEventListener('reset', function(event) { /* 코드 */ });
change	입력 요소의 값이 변경되었을 때 발생	inputElement.addEventListener('change', function(event) { /* 코드 */ });
input	입력 요소에 사용자가 입력할 때 발생	inputElement.addEventListener('input', function(event) { /* 코드 */ });
focus	입력 요소가 포커스를 받았을 때 발생	inputElement.addEventListener('focus', function(event) { /* 코드 */ });
blur	입력 요소가 포커스를 잃었을 때 발생	inputElement.addEventListener('blur', function(event) { /* 코드 */ });

 

로드, 기타 이벤트
이벤트 타입	설명	예제 코드
load	웹 페이지나 이미지 등이 로드되었을 때 발생	window.addEventListener('load', function() { /* 코드 */ });
unload	페이지를 나가거나 새로고침할 때 발생	window.addEventListener('unload', function() { /* 코드 */ });
beforeunload	페이지를 나가거나 새로고침하기 전에 발생	window.addEventListener('beforeunload', function(event) { /* 코드 */ });
resize	브라우저 창의 크기를 조절할 때 발생	window.addEventListener('resize', function() { /* 코드 */ });
scroll	스크롤할 때 발생	window.addEventListener('scroll', function() { /* 코드 */ });
online	온라인 상태로 변경될 때 발생	window.addEventListener('online', function() { /* 코드 */ });
offline	오프라인 상태로 변경될 때 발생	window.addEventListener('offline', function() { /* 코드 */ });

 

키보드 이벤트 정리
이벤트 이름	설명	주요 이벤트 프로퍼티
keydown	키보드의 키가 눌렸을 때 발생	- event.key: 눌린 키의 이름
		- event.code: 눌린 키의 물리적인 위치에 대한 코드
		- event.keyCode (deprecated): 눌린 키의 코드
		- event.ctrlKey, event.altKey, event.shiftKey: Ctrl, Alt, Shift 키 상태
		- event.preventDefault(): 기본 동작 방지
keyup	키보드의 키가 떼어졌을 때 발생	- event.key: 떼어진 키의 이름
		- event.code: 떼어진 키의 물리적인 위치에 대한 코드
		- event.keyCode (deprecated): 떼어진 키의 코드
		- event.ctrlKey, event.altKey, event.shiftKey: Ctrl, Alt, Shift 키 상태
		- event.preventDefault(): 기본 동작 방지