JavaScript에서 removeEventListener() 메서드를 사용하면 addEventListener() 메서드로 등록한 이벤트 핸들러를 손쉽게 제거할 수 있습니다.
기본 문법
element.removeEventListener(event, function, useCapture);- event: 제거할 이벤트 유형입니다. 예를 들어 "mousemove", "click" 등이 있습니다.
- function: 제거할 이벤트 핸들러 함수로, 반드시
addEventListener()로 등록할 때와 동일한 함수 참조를 사용해야 합니다. - useCapture(선택): 이벤트 캡처 단계에서 처리할지 여부를 지정하는 불리언 값입니다. 등록 시 지정한 값과 일치해야 정확히 제거됩니다.
예제
아래 예제는 회색 박스 영역 위에서 마우스를 움직일 때마다 난수를 표시하는 mousemove 이벤트 핸들러를 등록합니다. "Remove" 버튼을 클릭하면 removeEventListener()가 호출되어 해당 이벤트 핸들러가 제거되고, 이후에는 마우스를 움직여도 숫자가 갱신되지 않습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
background-color: gray;
border: 2px dashed;
}
</style>
</head>
<body>
<div id="box">Demo Text!
<p>Click below to remove event handler.</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>
동작 원리
- 페이지가 로드되면
box요소에display함수가mousemove이벤트 핸들러로 등록됩니다. - 박스 위에서 마우스를 움직이면
pid요소에 0과 1 사이의 임의의 숫자가 표시됩니다. - "Remove" 버튼을 클릭하면
removeEvent()함수가 실행되어display핸들러가 제거되고, 더 이상 마우스를 움직여도 숫자가 갱신되지 않습니다.
주의: 익명 함수(anonymous function)로 등록된 이벤트 핸들러는 removeEventListener()로 제거할 수 없습니다. 나중에 제거할 가능성이 있는 핸들러라면 반드시 명명된 함수 참조를 사용해 등록해야 합니다.