2.7.2 this 이해하기에서 객체의 메서드 내부에서는 this가 바뀔 수 있다고 했습니다. addEventListener() 메서드가 this를 바꾸는 대표적인 메서드입니다. 이때 콜백 함수는 화살표 함수가 아닌 함수 선언문이어야 합니다.

<script>

document.addEventListener('click', function() {
  console.log(this);
});

</script>

코드를 실행하고 화면을 클릭하면 this가 document로 출력됩니다. document.addEventListener()가 this를 document로 바꾼 것입니다.

그림 4-22 함수 선언문으로 작성했을 때의 this