이벤트 (event)

메뉴 버튼을 클릭하면 정보가 보이거나 정보를 입력하면 서버에 저장되는 등 웹사이트는 수많은 기능을 제공한다.
이런 기능을 이용하기 위해 마우스, 키보드를 조작하는 행위를 이벤트라고 한다.

이벤트가 발생하면 '그래서 이벤트가 생기면 어떻게 할건데?' 라는 의문이 생길것이다. 이때 이벤트의 발생을 감지하고 처리하는 역할을 하는 것이 이벤트 처리기 이다.

처리기에는 이벤트 핸들러 와 이벤트 리스너 가 있다.

---

📌 이벤트 핸들러 (handler)

1. HTML 태그에 설정

<button onclick="showMenu();">

• HTML과 자바스크립트가 섞여서 유지보수하기 힘들다.
• HTML 문서에 여러개의 자바스크립트 파일이 import되고 핸들러 명이 같을 경우 오류가 생길 수 있다.

2. DOM 요소 객체에 설정

let menu = document.getElementById("menu");
let btn = document.getElementById("btn");

btn.onclick = showMenu(); // btn DOM 요소를 가져와서 클릭되면 menu의 display 설정 바꾸기

function showMenu(){
	menu.style.display = "block";
}

HTML과 자바스크립트를 분리할 수 있지만 하나의 이벤트 핸들러만 등록할 수 있다.

---

📌 이벤트 리스너 (addEventListener)

target.addEventListener(type, listener, useCapture);

• 이벤트를 감지하고 싶은 요소를 target으로 설정
• 메서드 인자 : ( 이벤트 type, 이벤트를 처리할 listener, 캡처링 여부 )

예시를 살펴보자

head.addEventListener('mouseover', function(){
	head.style.color = 'cornflowerblue';
})

head.addEventListener('mouseout', function(){
	head.style.color = '#fff';
}

결과

Video edited on Kapwing

리스너는
1. 같은 요소의 같은 이벤트에 여러개의 리스너 등록 가능
2. 버블링, 캡처링 단계에서 모두 활용 가능
3. removeEventListener, stopPropagation, preventDefault 활용해서 이벤트 전파 제어 가능
4. HTML 태그를 포함한 모든 DOM 노드에 이벤트 리스너 등록 가능

다음 포스팅에서 이벤트의 전파, 위임에 대해 알아보자!

---

출처:

[javascript] 자바스크립트 에벤트 핸들러와 리스너

브라우저 이벤트 소개