[javascript] addEventListener(), 자바스크립트 이벤트 종류

1. addEventListener()

 

지정한 유형의 이벤트를 대상이 수신할 때 마다 호출할 함수를 설정

이벤트 리스너는 항상 on + 이벤트명

 

.addEventListener('이벤트 이름', (event) => {});

document.querySelector('input').addEventListener('input', (event) => {
	console.log('글자 입력', event.target.value);
});

// event.target.value : 사용자가 input에 입력한 값이 console에 표시됨

document.querySelector('#plus').addEventListener('click', (event) => {
	alart('happy code!');
});

 

 

2. 이벤트 종류

 

UI 이벤트

이벤트	설명
load	웹 페이지의 로드가 완료되었을 때
unload	웹 페이지가 언로드 될 때(새로운 페이지를 요청한 경우)
error	브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 없는 경우
resize	브라우저의 창 크기를 조정했을 때
scroll	사용자가 페이지를 위아래로 스크롤 할 때

 

키보드 이벤트

이벤트	설명
keydown	사용자가 키를 처음 눌렀을 때
keyup	키를 땔 때
keypress	사용자가 눌렀던 키의 문자가 입력되었을 때

 

마우스 이벤트

이벤트	설명
click	사용자가 마우스 버튼을 눌렀다 땔 때
dbclick	두 번 눌렀다 땔 때
mousedown	마우스를 누르고 있을 때
mouseup	눌렀던 마우스 버튼을 땔 때
mousemove	마우스를 움직였을 때
mouseover	요소 위로 마우스를 움직였을 때
mouseout	요소 바깥으로 마우스를 움직였을 때

 

포커스(커서) 이벤트

이벤트	설명
focus	요소가 포커스를 얻었을 때
focusin
blur	요소가 포커스를 잃었을 때
focusout

 

폼 이벤트

이벤트	설명
input	<input>,<textarea>요소 값이 변경되었을 때
change	선택 상자, 체크박스, 라디오 버튼의 상태가 변경되었을 때
submit	사용자가 버튼키를 이용하여 폼을 제출할 때
reset	리셋 버튼을 클릭할 때
cut	폼 필드의 콘텐츠를 잘라내기 했을 때
copy	폼 필드의 콘텐츠를 복사했을 때
paste	폼 필드의 콘텐츠를 붙여넣을 때
select	텍스트를 선택했을 때

 

 

3. removeEventListener()

 

removeEventListener를 사용해서 이벤트를 삭제하기 위해서는

이벤트를 등록할 때, 두번째 파라미터로 전달하는 EventListener를 익명함수로 전달하면 안된다.

removeEventListener를 호출할 때 두번째 파라미터로 넣어줘야 하기 때문