EventTarget.removeEventListener()

구문

removeEventListener(type, listener);
removeEventListener(type, listener, options);
removeEventListener(type, listener, useCapture);

매개변수

type

이벤트 수신기를 제거할 이벤트 유형입니다.

listener

이벤트 대상에서 제거할 수신기 EventListener 함수입니다.

options Optional

제거할 이벤트 수신기의 특징을 나타내는 옵션 객체입니다.

가능한 옵션은 다음과 같습니다.

• capture: 제거할 EventListener가 캡처링 수신기로 등록됐는지에 대한 여부를 나타내는 불리언 값입니다. 기본 값은 false입니다.

useCapture Optional

제거할 EventListener가 캡처링 수신기로 등록됐는지에 대한 여부를 나타내는 불리언 값입니다. 기본 값은 false입니다.

반환 값

없음.

제거할 이벤트 수신기의 식별

addEventListener()로 이벤트 수신기를 추가했다면, 수신기를 제거해야 할 때가 오기도 합니다. 당연히 추가할 때 지정한 것과 같은 type 및 listener를 removeEventListener()의 매개변수로 지정해야 하겠지만, options나 useCapture 매개변수는 어떻게 해야 할까요?

addEventListener()는 옵션이 다르다면 이벤트 유형 하나에 같은 수신기를 여러 번 부착합니다. 그러나 removeEventListener()가 고려하는 옵션은 capture/useCapture 플래그 단 하나입니다. 따라서 capture/useCapture 값은 일치해야 하지만, 나머지 옵션은 일치하지 않아도 됩니다.

다음의 addEventListener() 호출을 예시로 보겠습니다.

element.addEventListener("mousedown", handleMouseDown, true);

이제 아래의 두 removeEventListener() 호출을 살펴보세요.

element.removeEventListener("mousedown", handleMouseDown, false); // 실패
element.removeEventListener("mousedown", handleMouseDown, true); // 성공

첫 번째 호출은 useCapture가 일치하지 않았기 때문에 실패하고, 두 번째 호출은 일치하기 때문에 성공합니다.

이제 다음 코드를 확인하세요.

element.addEventListener("mousedown", handleMouseDown, { passive: true });

위 코드에서는 passive를 true로 지정한 option 객체를 지정했습니다. 다른 옵션은 기본 값인 false가 됩니다.

아래의 removeEventListener() 호출 각각을 살펴보세요. capture나 useCapture가 true인 호출은 실패하고, 나머지는 모두 성공합니다.

removeEventListener()에 영향을 주는 옵션은 capture 뿐입니다.

element.removeEventListener("mousedown", handleMouseDown, { passive: true }); // 성공
element.removeEventListener("mousedown", handleMouseDown, { capture: false }); // 성공
element.removeEventListener("mousedown", handleMouseDown, { capture: true }); // 실패
element.removeEventListener("mousedown", handleMouseDown, { passive: false }); // 성공
element.removeEventListener("mousedown", handleMouseDown, false); // 성공
element.removeEventListener("mousedown", handleMouseDown, true); // 실패

다만 일부 브라우저 버전에서는 이 동작이 일관적이지 않으므로, 어쩔 수 없는 경우가 아니라면 addEventListener()에 지정한 옵션을 그대로 removeEventListener()에 제공하는 편이 낫습니다.

예제

이 예제는 click 이벤트 수신기를 제거하는 mouseover 이벤트 수신기를 보입니다.

const body = document.querySelector("body");
const clickTarget = document.getElementById("click-target");
const mouseOverTarget = document.getElementById("mouse-over-target");

let toggle = false;
function makeBackgroundYellow() {
  if (toggle) {
    body.style.backgroundColor = "white";
  } else {
    body.style.backgroundColor = "yellow";
  }

  toggle = !toggle;
}

clickTarget.addEventListener("click", makeBackgroundYellow, false);

mouseOverTarget.addEventListener("mouseover", function () {
  clickTarget.removeEventListener("click", makeBackgroundYellow, false);
});

명세

브라우저 호환성

같이 보기

• EventTarget.addEventListener()