자바스크립트는 removeEventListener() 메서드를 사용하여 이벤트 핸들러를 제거할 수 있습니다. 이벤트는 일반적으로 addEventListener() 메서드를 통해 등록되며, removeEventListener() 메서드는 바로 이 addEventListener()로 연결된 이벤트 핸들러를 제거하는 역할을 합니다.
두 메서드를 함께 활용하면 필요할 때 이벤트 리스너를 동적으로 추가하고, 더 이상 필요하지 않을 때 제거함으로써 불필요한 이벤트 처리와 메모리 누수를 방지할 수 있습니다.
예제 코드
<html>
<body>
<h3 id="add">Hover me </h3>
<p id="remove"> </p>
<h3>Click this button to stop hovering effect </h3>
<input type ="button" id="clickIt" onclick="RespondClick()" value ="remove">
<script>
const listener = document.getElementById("add");
listener.addEventListener("mouseover", RespondMouseOver);
function RespondMouseOver() {
document.getElementById("remove").innerHTML += 1+ "</br>";
}
function RespondClick() {
listener.removeEventListener("mouseover", RespondMouseOver);
document.getElementById("remove").innerHTML += 0;
}
</script>
</body>
</html>
위 코드를 실행하면 화면에 다음과 같이 표시됩니다.
"Hover me" 텍스트 위로 마우스를 올리면 숫자 1이 출력됩니다. 마우스를 올린 횟수만큼 1이 계속 추가되는데, 예를 들어 텍스트 위로 4번 마우스를 올리면 다음과 같은 결과가 화면에 나타납니다.
실행 결과
이벤트 핸들러를 중단하려면 "remove" 버튼을 클릭해야 합니다. remove 버튼을 클릭하면 화면에 '0'이 표시되고, 그 이후에는 텍스트 위로 아무리 마우스를 올려도 더 이상 1이 생성되지 않습니다.
