- slide 1 of 23, currently active
- slide 2 of 23
- slide 3 of 23
- slide 4 of 23
- slide 5 of 23
- slide 6 of 23
- slide 7 of 23
- slide 8 of 23
- slide 9 of 23
- slide 10 of 23
- slide 11 of 23
- slide 12 of 23
- slide 13 of 23
- slide 14 of 23
- slide 15 of 23
- slide 16 of 23
- slide 17 of 23
- slide 18 of 23
- slide 19 of 23
- slide 20 of 23
- slide 21 of 23
- slide 22 of 23
- slide 23 of 23
12.7.3 this 키워드 사용하기
이벤트 함수 내부에서 this 키워드를 사용하면 이벤트가 발생한 요소 노드를 바로 가리킬 수 있습니다. 예제 코드를 보며 이해해 보겠습니다.
다음 코드를 보면 모든 p 태그에 click 이벤트를 연결하고, 이벤트 함수 내부에서 this 키워드를 콘솔창에 출력합니다.
12/07/this.html
<p>text-1</p>
<p>text-2</p>
<p>text-3</p>
<script>
const pEls = document.querySelectorAll("p");
pEls.forEach((el) => {
el.addEventListener("click", function(){
console.log(this);
});
})
</script>
그림 12-47 실행결과