이벤트 핸들러 제거
addEventListener 메서드로 등록한 이벤트 핸들러를 제거할려면 EventTarget.prototype.removeEventListener() 메서드를 사용
removeEventListener 메서드에 전달할 인수는 addEventListener 메서드와 동일
단, addEventListener 메서드에 전달한 인수와 removeEventListener 메서드에 전달한 인수가 일치하지 않으면
이벤트 핸들러가 제거되지 않음.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>Click me!</button>
<script>
/*
*/
const btn = document.querySelector('button')
const handleClick = () => console.log('button click');
// 이벤트 핸들러 등록
// 참조가 동일한 이벤트 핸들러를 중복 등록하면 하나의 핸들러만 등록됨
btn.addEventListener('click', handleClick);
// 이벤트 핸들러 제거
// addEventListener 메서드에 전달한 인수와 removeEventListener 메서드에 전달한 인수가 일치하지 않으면 이벤트 핸들러가 제거되지 않음.
btn.removeEventListener('click', handleClick, true); // 실패
btn.removeEventListener('click', handleClick); // 성공
</script>
</body>
</html>