[자바스크립트] 이벤트 등록, addEventListener()

이벤트란?

• 사용자(사람)와 상호 작용을 하면서 마우스(키보드, 터치, 펜 등)를 조작하면 그에 대한 반응을 하는 것
• 특정 이벤트가 발생되었을 때, 특정 함수를 실행할 수 있게 해주는 것이 addEventListener이다.

 

자바스크립트 이벤트 처리 방법 3가지

1. HTML 요소의 속성으로 등록

• 이벤트를 단 하나밖에 지정할 수 없다는 단점이 있다.
• <inout type="button" onclick="btnClick()">

2. DOM 요소의 프로퍼티로 등록

• 위와 동일 단점이 있다.
• let btn = document.getElementById("button"); btn.onclick = btnClick();

3. addEventListener 사용하여 등록

• 여러 개의 이벤트를 등록할 수 있다.

 

 

addEventListener("이벤트")

기본 문법

const title = document.querySelector("h1"); 

title.addEventListener("이벤트종류", 함수이름)

// 반대도 있다.
title.removeEventListener('이벤트종류', '함수이름');

• title이라는 변수가 가만히 있다가 click라는 이벤트가 일어났을 때 반응한다.
• 클릭이 일어났을 때 일어날 행동을 함수로 만들어줘서 두 번째 인수에다 추가해준다.

 

 

다양한 이벤트

이벤트 명	설명
mouseover	해당 객체의 영역 위에 마우스 커서가 진입하는 순간
mouseout	해당 객체의 영역 위에 마우스 커서가 빠져나가는 순간
mousedown	해당 객체의 영역 위에서 마우스 버튼을 누르는 순간
mouseup	해당 객체의 영역 위에서 마우스 버튼을 떼는 순간
mousemove	해당 객체의 영역 위에서 마우스 커서가 움직이는 순간
keydown	키를 눌렀을 때 발생
keyup	키를 뗐을 때 발생
keypress	키를 눌렀을 때 발생 (잘 안 쓰임)
click	마우스 버튼을 클릭하고 버튼에서 손가락을 떼면 발생
resize	브라우저 창의 크기를 조절할때 발생한다.
scroll	스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤 할 때 발생
change	변동이 있을 때 발생
focus	포커스를 얻었을 때 발생
load	로드가 완료 되었을 때 발생
select	option 태그 등에서 선택을 했을 때 발생
submit	submit 실행 시 발생

 

📌 참고

• 바닐라 JS로 크롬 앱 만들기 - 노마드 코더 Nomad Coders