[javascript] 이벤트 리스닝 패턴

14 Dec 2023

javascript

이벤트 리스닝은 자바스크립트에서 매우 중요합니다. 웹 애플리케이션에서 사용자 상호작용에 대한 응답으로 이벤트를 다룹니다. 이 포스트에서는 자바스크립트에서 일반적인 이벤트 리스닝 패턴을 알아보고자 합니다.

이벤트 리스닝 기본
이벤트 핸들러 함수
이벤트 위임

이벤트 리스닝 기본

이벤트 리스닝은 특정 이벤트에 대한 대기 및 응답을 정의하는 프로세스입니다. 다음은 가장 간단한 방법으로 이벤트를 리스닝하는 방법입니다.

const button = document.getElementById('myButton');

button.addEventListener('click', function() {
  console.log('버튼이 클릭되었습니다.');
});

위 코드에서 addEventListener 메서드를 사용하여 ‘click’ 이벤트를 리스닝하고 이벤트가 발생할 때마다 콘솔에 메시지를 출력합니다.

이벤트 핸들러 함수

이벤트 핸들러 함수는 이벤트가 발생했을 때 호출되는 함수입니다. 이 패턴을 사용하면 코드를 재사용하고 여러 이벤트에 같은 처리를 할당할 수 있습니다.

function handleButtonClick() {
  console.log('버튼이 클릭되었습니다.');
}

button.addEventListener('click', handleButtonClick);

handleButtonClick 함수는 click 이벤트가 발생하면 호출됩니다.

이벤트 위임

이벤트 위임은 동적으로 생성된 요소에 대한 이벤트 리스닝을 관리하는 방법입니다. 부모 요소에 이벤트 리스너를 추가하여 자식 요소의 이벤트를 처리합니다.

const parentElement = document.getElementById('parentElement');

parentElement.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('리스트 아이템이 클릭되었습니다.');
  }
});

부모 요소에 이벤트 리스너를 추가하고, 클릭된 요소가 LI 요소일 때 콘솔에 메시지를 출력합니다.

위의 패턴들은 자바스크립트에서 이벤트 리스닝을 하는 방법들 중 일반적으로 사용되는 것들입니다. 이를 통해 유연하고 효율적으로 이벤트를 관리할 수 있습니다.

더 자세한 정보는 MDN 웹 문서 Event reference를 참고하세요.

Contents

이벤트 리스닝 기본

이벤트 핸들러 함수

이벤트 위임