[JavaScript] 한번만 작동하는 일회성 이벤트 핸들러 만들기

 

 

<button>버튼</button>

예를 들어, 위와 같은 버튼이 있을 경우 여러 번 클릭해도 한 번만 실행되도록 하고 싶을 경우 아래와 같은 방법들을 사용할 수 있습니다.

 

 

# removeEventListener를 사용

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

// 이벤트 핸들러를 생성
button.addEventListener('click', handleClick);

function handleClick() {
    console.log('Button clicked!');
    button.removeEventListener('click', handleClick);
}

  내부 함수 작동 후 removeEventListener를 이용하여,

  더이상 함수가 호출되지 않도록 이벤트 핸들러를 제거해 줍니다.

 

 

 

# once옵션을 true로 설정하는 방법

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

button.addEventListener('click', () => {
        console.log('Button clicked');
    }, { once: true },
);

 

  addEventListener에 once라는 옵션을 추가합니다.

 once는 불리언 값(true, false)으로 설정할 수 있으며, true로 설정하면 이벤트 리스너가 특정 이벤트에 대해 한 번만 트리거 되어야 함을 나타냅니다.