[JavaScript] 자바스크립트 이벤트 리스너 삭제하기

109_자바스크립트 이벤트 리스너 삭제하기

[적용]

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

---

[문법]

메소드	의미	반환
이벤트타겟.removeEventListener(이벤트명, 리스너, [옵션*])	이벤트 리스너 삭제	없음

*생략 가능

---

[내용]

removeEventListener()를 사용해 이벤트 리스너 삭제가 가능하며,

이벤트 감시 작업을 취소할 수 있다.

const box = document.querySelector('.box');
box.addEventListener('click', onClickButton);

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

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

 

removeEventListener()는 다음과 같은 주의가 필요하다.

• 함수명을 지정하여 사용한다(화살표 함수 사용 불가).
• addEventListener()와 같은 인수를 사용하여 지정한다(옵션 포함).

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김