[JS] javascript : 이벤트리스너(EventListener) 한번만 수행하도록 옵션을 주는 방법

 

 

 

이전에 addEventListener와 removeEventListener에 대해 정리를 해본 적이 있다.

 

[JS] addEventlistener와 removeEventListener ( 이벤트 리스너 ) 이동

 

이 이벤트리스너는 addEventListener를 하고나면 기본적으로 계속 수행하게 되는데 

그렇게 되면 이벤트를 더이상 수행하고 싶지 않을 때, removeEventListener를 통해 지워줘야 한다.

 

그때 사용할 수 있는 것이 once 옵션이다.

 

 

 

addEventListener의 기본문법

 

addEventListener 기본문법 및 샘플코드

//기본문법
element.addEventListener(이벤트타입, 리스터(실행할 함수/동작), 옵션);

//window 객체에 클릭이벤트를 추가하는 addEventListener
window.addEventListener('click', onceHandler, {once : true});
window.addEventListener('click', captureHandler, {capture : true});
window.addEventListener('click', passiveHandler, {passive : true});

/**
* 이런식으로 옵션값들을 한번에 줄 수도 있음
* window.addEventListener('click', passiveHandler, {
*     once : true,
*     capture : false,
*     passive : false
*  });
**/

 

 

위의 샘플코드를 보면 'click'이라는 동작을 하였을 때, 두번째 인자인 함수들을 수행하고

세번째 인자에 옵션을 주고 있다. 각 의미로는

 

once : true일시 리스너가 추가된 후 한번만 호출되어야 함을 나타내는 boolean값

capture : true일시 핸들러는 캡처링 단계에서 동작함

passive : true일시 콜백함수 내부에 preventDefault()가 있더라도 실행되지 않음

 

위의 옵션들은 기본적으로 default값이 false이다. 그래서 따로 옵션을 주지 않고

이벤트 타입, 리스터만 넣어도 정상적으로 작동이 되었다.

 

 

 

addEventListener의 once옵션을 통해 한번만 리스너가 수행되도록 하는 샘플코드

 

removeEventListener를 통해 이벤트를 제거하는 샘플코드

var myConsoleLog = () => {
    console.log('콘솔로그 입니다.');
    removeEventListener('click', myConsoleLog);
}

window.addEventListener('click', myConsoleLog);

 

once 옵션값을 주는 샘플코드

var myConsoleLog = () => {
    console.log('콘솔로그 입니다.');
}

window.addEventListener('click', myConsoleLog, {once : true});

 

위의 2개의 샘플코드는 클릭했을 때, myConsoleLog라는 함수를 호출하는 이벤트 리스너를 추가하고

단 한번만 리스너가 수행되도록 한다.

 

차이점이라면

removeEventListener를 통해 리스너를 제거하느냐, once 옵션을 주어 단 한번만 수행되도록 하는 것이냐 이다.

 

 

우선 once 옵션을 통해 한번만 수행해도 개발자도구를 통해 확인해보면

이벤트리스너가 정상적으로 지워지는 것을 확인할 수 있었다.