[JS] 이벤트 객체와 this

이벤트 객체란 이벤트 타입에 따라 발생하는 이벤트의 각종 정보가 들어있는 객체 집합
-> 개발자가 생성하는 것이 아니라 이벤트 발생 시 실행되는 함수의 매개변수로 같이 전달

---

이벤트 객체 사용하기

이벤트가 발생하면 실행되는 함수에는 내부적으로 이벤트 객체가 매개변수로 전달됨

<button>클릭</button>
<script>
	const btnE1 = document.querySelector("button");
    btnE1.addEventListener("click", function(event){
    	console.log(event);
    })
</script>

function() 부분에서 매개변수로 이벤트 객체를 받아도 되고, 받지 않아도됨
-> 이벤트 객체를 받으면 활용 가능

ex) 클릭 이벤트에는 PointerEvent 객체가 전달됨

이벤트 객체에는 발생한 이벤트에 대한 다양한 정보가 속성으로 포함되어 있음

PointerEvent 객체의 주요 속성

속성	설명
clientX	마우스가 클릭된 x좌표(수평 스크롤 포함 X)
clientY	마우스가 클릭된 y좌표(수평 스크롤 포함 X)
pageX	마우스가 클릭된 x좌표(수평 스크롤 포함 O)
pageY	마우스가 클릭된 Y좌표(수평 스크롤 포함 O)<
screenX	모니터의 왼쪽 위 모서리를 기준으로 마우스가 클릭된 x좌표
screenY	모니터의 왼쪽 위 모서리를 기준으로 마우스가 클릭된 y좌표

btnE1.addEventListener("click", function(event){
	console.log(`clientX:${event.clientX}`);
  	console.log(`clientY:${event.clientY}`);
  	console.log(`pageX:${event.pageX}`);
  	console.log(`pageY:${event.pageY}`);
  	console.log(`screenX:${event.screenX}`);
  	console.log(`screenY:${event.screenY}`);
}

keyboardEvent 객체 속성을 사용하면 사용자가 키보드로 어떤 키를 눌렀는지 확인 가능

KeyboardEvent 객체의 주요 속성

속성	설명
keyCode	키보드에서 눌린 키의 유니코드 값을 반환
ctrlKey	ctrl 키가 눌렸으면 true, 그렇지 않으면 false를 반환
altKey	Alt 키가 눌렸으면 true, 그렇지 않으면 false 반환
shiftkey	shift 키가 눌렸으면 true, 그렇지 않으면 false 반환

ex)

<form>
	<input type="text">
</form>
<script>
	const inputE1 = document.querySelector("input");
    inputE1.addEventListener("keydown", function(event){
    	console.log(`keyCode:${event.keyCode}`);
        console.log(`ctrlkey:${event.ctrlKey}`);
        console.log(`altkey:${event.altKey}`);
        console.log(`shiftkey:${event.shiftKey}`);
    }
</script>

---

이벤트 취소하기

HTML 태그 중 일부는 기본으로 이벤트가 적용되어 있음
-> 대표적으로 a,form 태그
-> a 태그는 생성된 요소를 클릭하면 다른 페이지로 이동하도록 클릭 이벤트 연결
-> form 태그는 폼 내부에서 버튼이 눌리면 전송되도록 전송 이벤트가 연결된 상태

preventDefault() 메서드를 사용하면 태그에 기본적으로 연결된 이벤트를 취소할 수 있음

ex)

<a href="https://www.naver.com">네이버 이동</a>
<a href="https://www.daum.net">다음 이동</a>
<script>
    const aEls = document.querySelectorAll("a");
    aEls.forEach( (el) => {
        el.addEventListener("click", function(event){
        event.preventDefault();
    
	)});
</script>

위 경우 클릭해도 페이지로 이동하지 않음

---

this 키워드 사용

이벤트 함수 내부에서 this 키워드를 사용하면 이벤트가 발생한 요소 노드를 바로 가리킬 수 있음

<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>

위 경우 각 텍스트를 클릭할때 마다 this 키워드가 이벤트가 발생한 대상 노드를 가리키는 것을 볼 수 있음
-> this를 이용해 이벤트 발생 시점에 대상 노드를 조작 가능

<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>

위 코드를 실행 후 클릭 시 마다 색상이 빨간색 검은색으로 번갈아 바뀌는 것을 확인 가능

이벤트 함수를 화살표로 작성하면 this의 범위가 달라져 이벤트 발생 노드를 가리키지 않음

ex)

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

실행결과를 보면, 화살표 함수일때는 this가 window 객체를 가리킴
-> 이럴때는 target 속성을 사용해야 함
-> target 속성이란 이벤트 발생 노드를 가리키는 이벤트 객체의 속성

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