[javascript] 이벤트 추가 및 제거

자바스크립트 이벤트 추가 및 제거하기(addEventListener, removeEventListener)

 

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

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

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

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

 

이벤트 추가하기(addEventListener)

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

 

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

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

 

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

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

이벤트 제거하기(removEventListener)

! 이벤트 제거 버튼 추가하기아래는 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' 알림창이 나타나지 않는다.

 

출처: webisfree.com/2019-12-30/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%A0%9C%EA%B1%B0-removeeventlistener