JavaScript에서 외부 함수 내부에서 이벤트 리스너를 제거하려면 removeEventListener() 메서드를 사용하면 됩니다.
여기서 중요한 점은 removeEventListener()가 정상적으로 동작하려면 제거 대상인 이벤트 핸들러 함수의 동일한 참조(reference)를 인자로 전달해야 한다는 것입니다. 따라서 익명 함수가 아닌 이름이 있는(named) 함수를 등록하고, 그 참조를 함께 넘겨주는 방식으로 구현해야 합니다.
예제
다음은 버튼 클릭 시 한 번만 실행되고, 이후 자동으로 리스너가 제거되도록 구현한 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<button id="demo">Press Me</button>
</body>
<script>
var demoId = document.getElementById('demo');
demoId.addEventListener('click', function fun() {
outerFunction(this, fun);
}, false);
function outerFunction(self, funct) {
console.log('outer function is called....');
self.removeEventListener('click', funct, false);
console.log("Listener has been removed...")
}
</script>
</html>코드 설명
- addEventListener(): 'demo' 버튼에 'click' 이벤트 리스너를 등록합니다. 이때 핸들러 함수에 fun이라는 이름을 부여하여 참조를 유지할 수 있도록 합니다.
- outerFunction(self, funct): 클릭 시 호출되는 외부 함수로, 현재 요소(this)와 핸들러 함수 참조(funct)를 인자로 받습니다.
- removeEventListener(): 전달받은 동일한 함수 참조를 사용해 클릭 리스너를 제거합니다. 세 번째 인자인 false(버블링 단계) 값도 등록 시와 일치해야 합니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(또는 index.html)로 저장한 뒤, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. VS Code 편집기를 사용 중이라면 “Open with Live Server” 옵션을 선택하면 브라우저에서 바로 확인할 수 있습니다.
출력 결과
코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
“Press Me” 버튼을 클릭하면 콘솔에 다음과 같은 메시지가 순서대로 출력되며, 이후부터는 같은 버튼을 눌러도 더 이상 이벤트가 발생하지 않습니다.
콘솔 출력:
outer function is called....
Listener has been removed...
이처럼 외부 함수 안에서 removeEventListener()를 호출하면 이벤트가 발생한 시점에 스스로 리스너를 해제할 수 있어, 버튼이 한 번만 반응하는 원샷(one-shot) 이벤트 처리에 유용하게 활용할 수 있습니다.