HTML DOM의 removeEventListener() 메서드는 HTML 문서 내 특정 요소에 등록된 이벤트 핸들러를 제거하는 데 사용됩니다. addEventListener()로 추가한 이벤트 처리기를 더 이상 필요하지 않을 때 제거하여 불필요한 동작을 방지할 수 있습니다.
문법(Syntex)
element.removeEventListener(event, function, useCapture);
각 매개변수의 의미는 다음과 같습니다.
- event: 제거할 이벤트의 이름 (예: 'mouseover', 'click')
- function: 제거하려는 함수. 반드시 addEventListener()로 등록할 때 사용한 것과 동일한 함수 참조여야 합니다.
- useCapture: true 또는 false 값을 가지며, 선택적으로 생략 가능합니다.
true는 캡처링(capturing) 단계에 등록된 이벤트 핸들러를 제거하고, false는 버블링(bubbling) 단계에 등록된 이벤트 핸들러를 제거함을 의미합니다. 기본값은 false입니다.
참고: 익명 함수(anonymous function)로 등록한 이벤트 핸들러는 참조를 유지할 수 없기 때문에 removeEventListener()로 제거할 수 없습니다. 제거가 필요한 경우에는 반드시 이름 있는 함수를 사용해야 합니다.
예제(Example)
removeEventListener() 메서드의 실제 동작 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
p{
font-size:1.2rem;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
.mycolor{
background-color: #db133a;
}
</style>
</head>
<body>
<h1>DOM removeEventListener() method Demo</h1>
<button class="btn hover-btn">Hover on me</button>
<button onclick="remove()" class="btn">Remove Event Handler</button>
<script>
var hoverBtn=document.querySelector('.hover-btn');
function toggleFun(){
hoverBtn.classList.toggle("mycolor");
}
hoverBtn.addEventListener('mouseover',toggleFun);
function remove(){
hoverBtn.removeEventListener('mouseover',toggleFun);
}
</script>
</body>
</html>출력(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
먼저 "Hover on me" 버튼 위로 마우스를 올리면 버튼의 배경색이 빨간색으로 토글되는 것을 확인할 수 있습니다. 그다음 "Remove Event Handler" 버튼을 클릭하면 "Hover on me" 버튼에 등록된 mouseover 이벤트 핸들러가 제거됩니다.
이벤트 핸들러가 제거된 후에는 다시 마우스를 올리더라도 아무런 변화가 일어나지 않습니다.