[책] 자바스크립트 코드 레시피 278 - 101일차

이벤트 리스너 삭제하기

• 이벤트 처리를 삭제하고 싶을 때

구문

이벤트타깃.removeEventListener(이벤트명, 리스너, [옵션]);

설명

removeEventListener() 를 사용해 이벤트 리스너 삭제가 가능하며, 이벤트 감시 작업을 취소할 수 있습니다.

실습

removeEventListener() 는 주의가 필요합니다. 함수명을 지정하여 사용합니다. (화살표 함수 사용 불가) addEventListener() 와 같은 인수를 사용하여 지정합니다. (옵션 포함)

window.onload = () => {
  const btn = document.querySelector('.button');
  btn.addEventListener('click', onClickButton);

  // 3초 후 리스너의 함수를 삭제
  setTimeout(() => {
    btn.removeEventListener('click', onClickButton);
  }, 3000);

  function onClickButton() {
    console.log('box 클릭 이벤트가 실행되었습니다.');
  }
}