이벤트를 딱 한번만 일어나게 하고싶을 때 - 자바스크립트 DOM 꿀팁

자바스크립트에서 콜백이벤트가 딱 한번만 일어나게 하고싶을 때 사용할 수 있는 꿀팁!

바로 이벤트리스너의 세번째 인자값으로 once 옵션을 추가해주면 된다.

 

  document.body.addEventListener('click', () => {
    console.log('I run only once! 😇');
  }, { once: true });

기본값은 false로 지정되있어, 클릭될 때마다 이벤트가 항상 일어난다.

once: true로 지정해주면 처음 이벤트가 일어났을 때에만 콜백함수가 실행된다.

 

 

혹은 이벤트가 일어났을 때 해당 이벤트를 remove해주는 함수를 만들어줄 수도 있다. 

근데 once옵션이 너무 간단하니까~ 그걸 쓸 듯?

  document.body.addEventListener('click', cb);

  function cb() {
    console.log('Hi! 👋');
    document.body.removeEventListener('click', cb);
  }

 

참고자료

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

EventTarget.addEventListener() - Web APIs | MDN