더북(TheBook)

버튼을 클릭해도 아무 일도 일어나지 않습니다. 즉, 이벤트 리스너가 실행되지 않습니다. 그런데 여기서 많이 하는 실수가 있습니다. 이벤트 리스너를 다음과 같이 제거하려고 시도하는 경우입니다.

const $button = document.querySelector('button');
$button.addEventListener('click', () => { 
  console.log('버튼 클릭');
});
$button.removeEventListener('click', () => { 
  console.log('버튼 클릭');
});

이렇게 작성하면 버튼의 click 이벤트 리스너가 제거되지 않습니다. addEventListener()removeEventListener()에 같은 함수를 넣은 것처럼 보이지만 직접 비교해 보면 다르다는 것을 알 수 있습니다. 콘솔에 다음 코드를 입력하고 실행해 보세요. 화살표 함수끼리 비교하려면 각 함수를 소괄호로 감싸야 합니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.