[JavaScript] Event Handler (이벤트 핸들러)와 Event Listener (이벤트 리스너)의 차이

 

 이벤트 Event 

 

이벤트란 사용자와 웹 브라우저의 상호작용 과정에서

마우스 클릭, 움직임, 스크롤, 타이핑 등의 모든 행동에 의해 발생하는 모든 칭합니다.

이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미합니다.

 

 

 이벤트 핸들러 Event Handler 

 

이벤트 핸들러는 객체의 속성을 이용하여 JavaScript가 인식할 수 있도록 하는 것입니다.

예제

// 이벤트 핸들러

const button = document.querySelector(".btn")
button.onclick = function() {
  console.log("Hello!");
};
// OR
button.onclick = () => {
  console.log("Hello!");
};

클래스를 지정 후 "onclick"이라는 이벤트 처리기를 사용해 콘솔에 "Hello!"를 출력했습니다. 이벤트 처리기는 "onclick"을 포함해 정말 다양한 종류가 존재합니다.

 

이벤트 핸들러는 위와 같이 하나의 요소에 하나의 이벤트 처리가 가능합니다. HTML 태그에 직접 설정하거나 DOM 요소 객체의 이벤트 프로퍼티에 설정이 가능합니다.

 

 

 이벤트 리스너 Event Listener 

 

이벤트 리스너는 addEventListener메서드를 이용해 이벤트 리스너를 객체에 추가하는 것입니다.

이러한 방법은 사용자 또는 브라우저에 의해 발동되는 이벤트에 대해서 광범위하게 사용할 수 있습니다.

즉 하나의 요소에 복수의 이벤트의 처리가 가능합니다.

예제

// 이벤트 리스너

const button = document.querySelector(".btn")
button.addEventListener("click", function(event) {
  console.log("Hello!");
})
// OR
button.addEventListener("click", event => {
  console.log("Hello!");
})

 

 

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

 

이벤트 핸들러와 같이 프로퍼티에 대해 이벤트 처리기를 각각 사용하는 경우 동일한 버튼에 두 개의 이벤트 핸들러를 작성한 경우 두 번째 이벤트 처리기가 첫 번째 이벤트를 덮어쓰고 해당 이벤트만 발동됩니다.

즉, 앞에서 말한 경우처럼 각각 이벤트 처리기를 달아줄 경우 이벤트 유형 당 하나의 이벤트 핸들러 만 가질 수 있지만 이벤트 리스너는 이와 달리 여러 이벤트를 하나의 요소로 다룰 수 있습니다.

 

아래의 코드는 이벤트 처리기를 각각 사용한 경우입니다.

// 이벤트 핸들러

const button = document.querySelector(".btn")
button.onclick = () => {
  console.log("Hello!");
};
button.onclick = () => {
  console.log("How are you?");
};

// "How are you?"만 출력

이러한 경우 버튼을 클릭 시 "Hello!"는 덮어 쓰여지고 콘솔에 "How are you?"만 보여지게 됩니다.

 

이에 반면 "addEventListener"를 사용한 이벤트 리스너를 사용하면 아래와 같은 결과를 볼 수 있습니다.

// 이벤트 리스너

const button = document.querySelector(".btn")
button.addEventListener("click", event => {
  console.log("Hello!");
})
button.addEventListener("click", event => {
  console.log("How are you?");
})

//"Hello!"와 "How are you?"모두 출력

이 경우에는 버튼을 클릭시 두 기능이 모두 발동되며 "Hello!"와 "How are you?"가 모두 콘솔에 보이는 것을 확인할 수 있습니다.

 

정리하자면

이벤트를 처리하는 방법은 "이벤트 핸들러", "이벤트 리스너" 이렇게 두 가지가 있으며 차이점은 핸들러의 경우 하나의 요소에 하나의 이벤트만 처리 가능하고 리스너는 addEventListner메서드를 이용해, 하나의 요소에 다양한 이벤트 처리가 가능합니다.

 

경우에 따라 선택해서 사용하지만 일반적으로 addEventListner메서드를 사용하는 것이 좋다고 합니다.