[Javascript] 등록된 이벤트 제거 함수 - removeEventListener() 함수

 

 

자바스크립트(Javascript)의 removeEventListener() 함수

자바스크립트(Javascript)의 removeEventListener() 함수는 등록되어 있는 이벤트 리스너를 제거하는 함수입니다. 이벤트를 제거할때에는 제거할 엘리먼트(element) 요소가 필요하고, click이나 keypress 등의 이벤트 타입이 필요하며, 제거할 이벤트 callbakc 함수가 필요로 합니다.

removeEventListener() 함수는 EventTarget에 등록되었던 이벤트 리스너를 제거하는데, 이 이벤트 리스너는 이벤트 종류와 이벤트 리스너 함수 자체의 조합으로 식별되어 제거되며, 제공되었던 다양한 옵션의 일치하는 이벤트 리스너만 제거가 가능합니다.

 

//removeEventListener() 함수 사용방법

elemet.removeEventListener( [이벤트타입], [호출함수])

 

//removeEventListener() 함수를 이용하여 생성되었던 이벤트 삭제하기

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


let testByeBtn = document.getElementById('testByeBtn');
testByeBtn.addEventListener('click', function() {
  testBtn.removeEventListener('click', clickListener);
});