코드를 실행해서 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 실행결과