[자바스크립트] - 이벤트에서의 this

이벤트는 많이 쓰기 때문에 이벤트의 this는 알아두어야한다. 

---

이벤트의 this

앞에서 배운 이벤트 객체에는 이벤트에 대한 정보만 들어있다.

만약 이벤트가 발생한 대상에 접근하려면 이벤트 핸들러에서 this를 사용해야 한다. 

이벤트에서의 this는 '이벤트가 발생한 객체'를 가리킨다. (이벤트가 발생한 해당 요소)

 

this.style.width = '500px' -> 이벤트가 발생한 요소의 스타일 넓이 값을 500으로 바꿔라

이런 식으로 this 키워드를 이용해서 쓸 수 있다. 

 

이벤트가 발생한 해당 요소를 찝어서 기능을 실행할 수 있다. 

this 키워드가 없으면 뭘 클릭했는지 브라우저가 잘 몰라서 일단 이벤트를 실행시킨다. 

원하는 요소에 딱 이벤트를 실행시키기 위해서 this를 사용한다. 

---

예제 1) this 알아보기 

 <img src="./img/food.jpg" alt="음식" width="400" />

 

   let food = document.querySelector("img");

      food.onclick = function (event) {

        console.log(this);

        alert("클릭한 이미지 파일의 경로는?" + this.src);

      };

 

콘솔창에 this를 출력해서 선택한 요소가 뭔지 잘 확인하자