코드를 실행해서 콘솔창을 열고 각 텍스트를 클릭하면 이벤트가 발생한 대상 노드를 가리키는 것을 볼 수 있습니다. 이런 this 키워드의 특징을 이용해 이벤트 발생 시점에 대상 노드를 조작할 수 있습니다.
기존 코드에서 p 태그를 클릭하면 텍스트 색상을 빨간색으로 바꾸고, 이미 빨간색이라면 다시 검은색으로 바꾸도록 코드를 변경해 봅시다.
<script>
const pEls = document.querySelectorAll("p");
pEls.forEach((el) => {
el.addEventListener("click", function(){
if(this.style.color === 'red'){
this.style.color = 'black';
}else{
this.style.color = 'red';
}
});
})
</script>
그림 12-48 실행결과