JavaScript에서 이벤트 리스너를 제거하는 방법 – removeEventListener() 사용법 총정리

JavaScript에서 addEventListener() 메서드로 요소에 연결한 이벤트 핸들러를 제거하려면 removeEventListener() 메서드를 사용합니다. 이 메서드는 더 이상 필요하지 않은 이벤트 리스너를 해제하여 불필요한 동작과 메모리 누수를 방지하는 데 유용합니다.

기본 문법

element.removeEventListener(event, function);

event: 제거할 이벤트 유형 (예: "click", "mousemove")
function: 제거할 이벤트 핸들러 함수. 반드시 addEventListener()에 전달했던 것과 동일한 함수 참조여야 합니다.

예제

아래 예제에서는 마우스를 움직일 때마다 랜덤 숫자가 표시되고, "Remove" 버튼을 클릭하면 해당 이벤트 핸들러가 제거되어 더 이상 숫자가 갱신되지 않습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            background-color: gray;
            border: 2px dashed;
         }
      </style>
   </head>
   <body>
      <div id="box">Demo Text!
         <p>아래 버튼을 클릭하면 이벤트 핸들러가 제거됩니다.</p>
         <button onclick="removeEvent()" id="btnid">Remove</button>
      </div>
      <p id="pid"> </p>
      <script>
         document.getElementById("box").addEventListener("mousemove", display);
         function display() {
            document.getElementById("pid").innerHTML = Math.random();
         }
         function removeEvent() {
            document.getElementById("box").removeEventListener("mousemove", display);
         }
      </script>
   </body>
</html>

주의 사항

1. 동일한 함수 참조를 사용해야 합니다

익명 함수로 등록한 이벤트 리스너는 제거할 수 없습니다. 아래와 같이 함수를 변수에 저장한 후 사용하는 것이 안전합니다.

const handler = () => console.log("clicked!");
element.addEventListener("click", handler);
element.removeEventListener("click", handler); // 정상적으로 제거됨

2. 옵션 객체도 일치해야 합니다

addEventListener() 호출 시 capture: true와 같은 옵션을 지정했다면, removeEventListener()에서도 동일한 옵션을 전달해야 리스너가 올바르게 제거됩니다.

element.addEventListener("click", handler, { capture: true });
element.removeEventListener("click", handler, { capture: true }); // capture 옵션 일치 필요

이처럼 removeEventListener()를 활용하면 특정 상황에서 이벤트 처리를 깔끔하게 중단시킬 수 있어, 성능 최적화와 코드 관리에 큰 도움이 됩니다.