[javascript] 이벤트 리스너 등록 방법 정리

14 Dec 2023

javascript

이벤트 리스너는 웹 애플리케이션에서 사용자 상호작용에 반응하여 특정 동작을 수행하도록 도와주는 중요한 요소입니다. JavaScript를 사용하여 이벤트 리스너를 등록하는 방법에 대해 알아보겠습니다.

1. HTML 요소에 직접 이벤트 리스너 등록

HTML 요소에 직접 이벤트 리스너를 등록하는 가장 기본적인 방법은 on 접두사를 사용하는 방법입니다. 아래는 button 요소에 클릭 이벤트를 처리하는 예제입니다.

<button onclick="handleClick()">Click me</button>

2. JavaScript로 이벤트 리스너 등록

JavaScript를 사용하여 이벤트 리스너를 등록할 때는 addEventListener 메서드를 활용합니다. 아래는 위와 동일한 클릭 이벤트를 처리하는 예제입니다.

const button = document.querySelector('button');

button.addEventListener('click', () => {
  // 클릭 이벤트 처리
});

3. 이벤트 위임을 활용한 방법

이벤트 위임은 상위 요소에 이벤트 리스너를 등록하여 하위 요소의 이벤트를 처리하는 방법입니다. 이를 통해 동적으로 추가되는 요소에 대한 이벤트도 처리할 수 있습니다. 아래는 상위 요소에 클릭 이벤트를 처리하는 예제입니다.

const parent = document.querySelector('.parent');

parent.addEventListener('click', (event) => {
  if (event.target.matches('button')) {
    // 클릭 이벤트 처리
  }
});

이처럼, 이벤트 리스너를 등록하는 방법은 여러 가지가 있으며, 각각의 상황에 맞게 적절한 방법을 선택하여 사용할 수 있습니다.

참고 자료

MDN web docs, “Introduction to events” https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

위와 같은 방법들을 활용하여 원하는 이벤트 처리를 할 수 있습니다.