[JS]이벤트 핸들러와 이벤트 리스너

이벤트 핸들러와 이벤트 리스너

JavaScript에서 이벤트는 사용자와 웹 페이지간의 상호작용입니다. 예를 들어 티스토리에서 좋아요 버튼을 클릭하거나 네이버 검색 창에서 엔터 키를 누르는 행위를 이벤트가 동작했다고 말합니다.

 

JavaScript에서 이벤트가 발생했을 때, 개발자가 구현한 기능을 수행하도록 함수를 연결하는 것을 이벤트 핸들러 또는 이벤트 리스너라고 말합니다.

 

이벤트 핸들러와 이벤트 리스너는 비슷하면서도 다른 개념이며 이번 포스팅은 JavaScript에서 이벤트와 함수를 연결하는 방법 그리고 이벤트 핸들러와 이벤트 리스너의 차이점을 설명합니다.

---

이벤트 핸들러

이벤트 핸들러는 쉽게 설명하자면 addEventListener() 메서드를 사용하지 않고 이벤트와 함수를 연결하는 것입니다.

 

버튼에서 클릭 이벤트가 발생하면 콘솔에 메시지를 출력합니다.

<button id="btn">클릭</button>

const btnNode = document.getElementById("btn");

// 화살표 함수
btnNode.onclick = () => {
  console.log("버튼 클릭");
};

위 예제처럼 화살표 함수(Arrow Function)를 사용하거나 아래 예제처럼 함수 선언문 방식을 사용할 수 있습니다.

const btnNode = document.getElementById("btn");

// 함수 리터럴
btnNode.onclick = function() {
  console.log("버튼 클릭");
};

코드가 간결한 경우 함수를 구현하지 않고 HTML 문서에서 실행되어야 하는 JavaScript 코드를 작성할 수 있습니다.

<button id="btn" onclick="console.log('버튼 클릭')">
  클릭
</button>

---

이벤트 리스너

이벤트 리스너는 addEventListener() 메서드를 사용하여 이벤트와 함수를 연결합니다. 

<button id="btn">클릭</button>

const btnNode = document.getElementById("btn");

btnNode.addEventListener('click', function() {
  console.log("버튼 클릭");
});

addEventListener() 메서드는 이벤트 타입, 이벤트 핸들러 함수, 옵션이라는 세 개의 매개변수를 가집니다.

 

매개변수

이벤트 타입

- 이벤트 타입을 나타내는 문자열입니다.

- 예시) click, dbclick, change 등

 

이벤트 핸들러 함수

- 이벤트가 발생했을 때, 실행되는 함수입니다.

 

옵션

- 옵션은 생략할 수 있으며 true를 설정하는 경우 이벤트 캡처가 활성화됩니다.

- 기본 값은 false입니다.

 

반환 결과

존재하지 않습니다.

 

이벤트 리스너는 이벤트 핸들러 함수를 화살표 함수로 설정할 수 있습니다.

const btnNode = document.getElementById("btn");

btnNode.addEventListener("click", () => {
  console.log("버튼 클릭");
});

반응형

---

이벤트 리스너 제거 방법

removeEventListener() 메서드를 사용하여 이벤트 리스너를 제거할 수 있습니다.

<button id="btn" value="hi">클릭</button>

const btnNode = document.getElementById("btn");

const handleClick = function () {
  console.log("버튼 클릭");
};

btnNode.addEventListener("click", handleClick);
btnNode.removeEventListener("click", handleClick);

addEventListener() 메서드와 마찬가지로 세 개의 매개변수를 가집니다.

 

매개변수

이벤트 타입

- 이벤트 타입을 나타내는 문자열입니다.

- 예시) click, dbclick, change 등

 

이벤트 핸들러 함수

- 이벤트 리스너에서 제거하려는 이벤트 핸들러 함수입니다.

 

옵션

- 제거하려는 이벤트 리스너의 옵션입니다.

- addEventListener() 메서드에서 true가 전달된 경우 removeEventListener() 메서드에서도 true를 전달해야 합니다.

 

반환 결과

존재하지 않습니다.

 

아래는 removeEentListener() 메서드를 사용했는데, 이벤트 리스너가 제거되지 않는 경우입니다.

 

1. 익명 함수는 제거할 수 없습니다.

addEventListener() 메서드의 두 번째 매개변수로 익명 함수가 전달된 경우 removeEventListener() 메서드로 이벤트 리스너를 제거할 수 없습니다.

const btnNode = document.getElementById("btn");

btnNode.addEventListener("click", function () {
  console.log("버튼 클릭");
});

// 이벤트 리스너가 제거되지 않음
btnNode.removeEventListener("click", function () {
  console.log("버튼 클릭");
});

 

2. 세 번째 매개변수는 동일해야 합니다.

addEventListener() 메서드의 세 번째 매개변수로 true가 전달된 경우 removeEventListener() 메서드의 세 번째 매개변수도 true를 전달해야 합니다.

 

addEventListener() 메서드의 세 번째 매개변수로 true를 전달했는데, removeEventListener() 메서드의 세 번째 매개변수를 생략하면 이벤트 리스너가 제거되지 않습니다. 반대의 경우도 마찬가지입니다.

const btnNode = document.getElementById("btn");

const handleClick = function () {
  console.log("버튼 클릭");
};

btnNode.addEventListener("click", handleClick, true);

// 이벤트 리스너가 제거되지 않음
btnNode.removeEventListener("click", handleClick);

---

이벤트 핸들러와 이벤트 리스너의 차이점

이벤트 핸들러와 이벤트 리스너는 비슷한 것처럼 보이지만 한 가지 차이점이 존재합니다.

 

이벤트 핸들러는 이벤트 유형에 대해 하나의 이벤트 핸들러만 가질 수 있습니다.

<button id="btn" value="hi">클릭</button>

const btnNode = document.getElementById("btn");

btnNode.onclick = () => {
  console.log("클릭1");
};

btnNode.onclick = () => {
  console.log("클릭2");
};

btnNode.onclick = () => {
  console.log("클릭3");
};

[실행 결과]

클릭3

버튼을 클릭하면 onclick 핸들러는 세 번째 핸들러로 재정의됩니다.

 

이벤트 리스너는 이벤트 유형에 대해 여러 이벤트 리스너를 가질 수 있습니다.

const btnNode = document.getElementById("btn");

btnNode.addEventListener("click", () => {
  console.log("클릭1");
});

btnNode.addEventListener("click", () => {
  console.log("클릭2");
});

btnNode.addEventListener("click", () => {
  console.log("클릭3");
});

[실행 결과]

클릭1
클릭2
클릭3

---

이벤트 핸들러와 이벤트 리스너의 주의사항

이벤트 핸들러와 이벤트 리스너를 사용할 때, 한 가지 주의사항이 있습니다. 일반 함수(함수 리터럴, 함수 선언문)와 화살표 함수에서 this는 다르게 동작합니다.

 

일반 함수에서 this는 이벤트를 호출한 요소를 의미하지만 화살표 함수의 this는 전역 객체를 의미합니다.

<button id="btn" value="hi">클릭</button>

[일반 함수]

const btnNode = document.getElementById("btn");

btnNode.onclick = function () {
  console.log(this.value); // hi
};

[화살표 함수]

const btnNode = document.getElementById("btn");

btnNode.onclick = () => {
  console.log(this.value); // TypeError 발생
};

---

정리

• 이벤트 핸들러는 이벤트가 발생했을 때, 실행되어야 하는 함수(혹은 실행되어야 하는 코드)를 연결하는 방법입니다.
• 이벤트 리스너는 이벤트가 발생했을 때, 실행되어야 하는 이벤트 핸들러 함수를 연결하는 방법입니다.
• 이벤트 핸들러는 이벤트 유형에 하나의 이벤트 핸들러만 가질 수 있습니다.
• 이벤트 리스너는 이벤트 유형에 여러 개의 이벤트 리스너를 가질 수 있습니다.
• 일반적으로 이벤트 리스너를 사용하는 것이 좋으나 React, Angular, Vue, Svelte와 같은 프레임워크에서는 이벤트 핸들러를 사용해야 할 수 있습니다.