[JavaScript] addEventListener 한 번만 동작하게 만들기

안녕하세요.

addEventListener로 어떠한 타겟에 이벤트를 등록할 때 한 번만 동작하게 만드는 방법을 알아보겠습니다.

 

1. addEventListener(type, listener);
2. addEventListener(type, listener, options);

보통은 이벤트를 등록할 때 1번처럼 코드를 작성하는데, 2번과 같이 옵션을 부여할 수 있습니다.

 

document.querySelector("엘리먼트 아이디 또는 클래스명")
.addEventListener('click', (e) => {
  listener 함수 또는 실행 코드
}, { once: true });

{ once : true } 이렇게 지정하면 리스너가 발동한 후에 제거가 됩니다.

 

 

더 많은 옵션은 아래 문서에서 확인하실 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

EventTarget.addEventListener() - Web API | MDN