더북(TheBook)

코드를 실행해서 p 태그를 클릭하면 클릭할 때마다 텍스트 색상이 빨간색과 검은색으로 번갈아 가면서 바뀌는 것을 볼 수 있습니다.

그런데 this 키워드를 사용할 때 한 가지 주의할 점이 있습니다. 이벤트 함수를 화살표 함수로 작성하면 this의 범위가 달라져서 this가 이벤트 발생 노드를 가리키지 않습니다.

12/07/this_arrow.html

<script>
  const pEls = document.querySelectorAll("p");
  pEls.forEach((el) => {
    el.addEventListener("click", () => {
      console.log(this);
    });
  })
</script>

그림 12-49 실행결과

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