[javascript] addEventListener 이벤트 중복 막기

가끔 가다보면 mousedown이라든지 이벤트를 등록할 일이 생김. 근데 구조상 어쩌다보면 이게 중복으로 들어갈때가 있는데 이를 방지하기 위해서 아래와 같은 방법을 써보자.

 

 

1. once

el.addEventListener("mousedown", down, { once: true });

간단하게 once값을 true로 넣어 한번만 이벤트가 실행되게 할 수 있는데, 코드는 이런 쉬운 방법으로 해결되어 주시지 않는다...

 

 

2. 저장해두고 불러오기

let saveFunction;
function setEvents() {
  if (saveFunction) {
    el.removeEventListener("mousedown", saveFunction);
  }
  
  saveFunction = down;
  
  el.addEventListener("mousedown", saveFunction);
}

예를들어 리엑트에서 어떤 컴포넌트가 재렌더링 될때/최초 진입때만 setEvents가 실행되고 이때 이벤트를 등록해줘야한다고 침. 그렇다면 중요한 down이라는 함수를 바깥에 있는 변수에 등록해주고 그 다음에 saveFunction의 유무에 따라 remove해주면 된다. 컴포넌트가 재랜더링되어도 외곽에 있는 변수는 고정이니까 사라지지도 않음!

 

 

만약에 나는 down이라는 함수가 인자값을 가지고 있다!고 한다면 아래와 같이 바인드된 함수 자체를 등록해주면 된다.

let saveFunction;
function setEvents() {
  if (saveFunction) {
    el.removeEventListener("mousedown", saveFunction);
  }
  
  saveFunction = down.bind(this, "1"); // bind된 함수 자체를 넣음
  
  el.addEventListener("mousedown", saveFunction);
}

 

 

3. clone

const clone = el.cloneNode(true);
el?.parentNode?.replaceChild(clone, el);
el?.addEventListener("click", clickEvent);

function clickEvent() {
  // do something
  el?.removeEventListener("click", clickEvent);
}

이런것도 보았다... 예를들어 뭔 버튼이였는데 click이벤트를 삭제해줘야할때 기존 버튼을 숨김처리하고 똑같은 버튼을 만들어서 이벤트를 넣어주고 그 안에서 삭제해버림. once 대용느낌?