자바스크립트 이벤트 제거, removeEventListener

Last Modified : 2020-12-01 / Created : 2019-12-30

38,712
View Count

주소 복사하기

자바스크립트에서 이벤트를 제거하는 방법을 알아봅니다.

# 자바스크립트 이벤트 제거하기, removeEventListener

자바스크립트에서 addEventListener()를 사용해 이벤트를 추가한 경우 반대로 이를 제거할 수 있으며 이 때 removeEventListener()를 사용합니다.

element.removeEventListener('이벤트타입', 이벤트 콜백 함수)

이때 추가된 이벤트를 제거하기 위해 아래와 같이 세 가지 값이 필요합니다.

1. 제거할 엘리먼트 요소
2. click, keypress 등의 이벤트 타입
3. 제거할 이벤트 콜백 함수

그럼 아래에서 간단한 이벤트를 추가해보고 다시 이를 제거하는 예제를 만들어보겠습니다.

<button id="testBtn">Hello</button>

이제 위 버튼에 클릭 할 경우 알림창을 띄우는 이벤트를 추가합니다.

var testBtn = document.getElementById('testBtn');
var clickListener = function() {
alert('Hello!');
};
testBtn.addEventListener('click', clickListener);

이제 버튼을 클릭하면? Hello라는 메시지창을 띄우게 됩니다. 다음은 클릭 이벤트를 제거할 수 있는 버튼을 만들어보겠습니다.

! 이벤트 제거 버튼 추가하기

아래는 Good bye라는 버튼을 만드려고합니다. 이 버튼을 클릭하면 기존의 Hello 버튼을 눌러도 더 이산 Hello라는 메시지를 출력하지 않을 것입니다.

<button id="testBtn">Hello</button>
<button id="testByeBtn">Good Bye</button>

기존의 버튼 아래에 새로운 GoodBye버튼을 추가했습니다. 동일하게 기존의 클릭 이벤트 스크립트 아래에 GoodBye 클릭이벤트를 추가하겠습니다. 이 버튼을 클릭하면 당연히 Hello 버튼 이벤트가 삭제되야 합니다.

var testBtn = document.getElementById('testBtn');
var clickListener = function() {
alert('Hello!');
};
testBtn.addEventListener('click', clickListener);

// 여기서부터 새로운 버튼 이벤트 GoodBye
var testByeBtn = document.getElementById('testByeBtn');
testByeBtn.addEventListener('click', function() {
testBtn.removeEventListener('click', clickListener);
});

여기까지 모든 코드 작성은 끝났습니다. 아래는 위 예제를 실제 구현해보았으며 직접 클릭해 잘 동작하는지 확인해보세요.

1. 아래 Hello 버튼을 클릭하고 'Hello' 알림창을 확인한다
2. 이번에는 GoodBye 버튼을 클릭한다.
3. 다시 Hello 버튼을 클릭하면 더 이상 'Hello' 알림창이 나타나지 않는다.

이벤트 event

아래의 글도 찾고 계시지 않나요?

자바스크립트 쿠키값 간단하게 저장 및 불러오기

[HTML5] Canvas 태그에 투명도 opacity 적용하기