클릭 이벤트 중복 실행 문제 해결 방법

문제 상황

웹 개발을 하다 보면 종종 같은 요소에 여러 번 클릭 이벤트를 등록해야 할 경우가 있습니다. 이런 상황에서 문제가 발생할 수 있는데, 바로 이전에 등록한 이벤트 리스너가 새로운 클릭으로 다시 실행되는 것입니다. StackOverflow에 게시된 질문에서도 이러한 문제가 제기되었으며, 그 문제의 이름은 “Prevent the previous event listener from triggering on a new click” 입니다.

해결책 1: 이벤트 리스너 제거하기

이 문제의 가장 간단한 해결 방법은 이전에 등록한 이벤트 리스너를 제거하는 것입니다. JavaScript에서는 removeEventListener 메서드를 사용해 이를 수행할 수 있습니다. 이 메서드를 사용하려면 제거할 이벤트 리스너의 참조(reference)가 필요하므로, 익명 함수보다 명명된 함수(named function)를 사용하는 것이 좋습니다.

const myButton = document.getElementById('myButton');
function handleClick() {
  console.log('Button clicked!');
}

// 이벤트 리스너 추가
myButton.addEventListener('click', handleClick);

// 이벤트 리스너 제거
myButton.removeEventListener('click', handleClick);

해결책 2: once 옵션 사용하기

addEventListener 메서드에서 once 옵션을 사용하면 이벤트가 한 번만 발생하도록 설정할 수 있습니다. 이 방법은 이벤트 리스너를 따로 제거할 필요가 없으므로 코드가 간결해집니다.

myButton.addEventListener('click', handleClick, { once: true });

해결책 3: 상태 변수 사용하기

상태 변수를 사용하여 이벤트 리스너 내에서 조건을 확인할 수 있습니다. 이 방법은 여러 이벤트를 동적으로 관리해야 할 때 유용합니다.

let isClicked = false;

function handleClick() {
  if (!isClicked) {
    console.log('Button clicked for the first time!');
    isClicked = true;
  }
}

정리

이벤트 리스너의 중복 실행 문제는 여러 가지 방법으로 해결할 수 있습니다. 목적과 상황에 따라 적절한 해결책을 선택하는 것이 중요합니다. 이 글에서 소개한 방법들은 다양한 상황에서 활용할 수 있으므로 참고하시기 바랍니다.