[JavaScript] Onclick(this)와 이벤트 객체 (7)

자바에 클릭 이벤트를 통해서 실행문을 처리하는 방법에는 대표적으로 Onclick과 addEventListener() 방식이 있다.

 

Onclick은 태그 내에 속성으로 넣어주어 이벤트를 처리하는 방식이고,

addEventListener()는 특정 노드에 대해서 지정하여 사용한다 (노드는 document.querySelector(선택자)로 가져옴)

 

두 이벤트 처리에는 각각 함수가 들어가는데 파라미터로 this 그리고 이벤트객체를 넣어주어 클릭된 요소(노드) 에 대해서 세분화 하여 처리가 가능하도록 사용이 가능하다.

 

[this]

this는 현재 실행중인 코드에 문맥에서 참조하고 있는 값 이라고 볼 수 있다.

다시 말해서, this는 좀있다 말할 addEventListener에 들어가는 함수에 파라미터로 들어가는 이벤트 객체와 다르다고 볼 수 있다.

this 자체는 객체가 아닌 "가리키는" 키워드라고 볼 수 있다. 그리고 this는 객체를 "참조"하고 있다.

 

말이 어려울 수 있으니 아래 예시를 살펴보자

 

1. 일반 함수에서의 this (전역범위에서의 this)

function show() {
  console.log(this);
}
show(); // 브라우저에서는 `window` 객체

 

show()라는 함수가 선언되어있고, 안에는 console.log() 메서드로 this 콘솔창으로 출력하려고 한다.

해당 함수는 어떤 객체의 메서드로 호출 된 것이 아니고, 단순히 "전역에서 호출" 되었으므로 this는 window을 가르키게 된다.

 

2. 객체 메서드에서의 this

const obj = {
  name: "JS",
  greet() {
    console.log(this);
  }
};
obj.greet(); // this는 obj를 가리킴

 

다음코드에서는 obj 객체를 하나 생성해서 greet()메서드를 객체 내 메서드로 선언하였다 이때는 obj.greet() 메서드를 호출 시,

obj를 가르키게 된다.

 

3. 이벤트 핸들러에서의 this

<button onclick="console.log(this)">Click</button>

button.addEventListener("click", function() {
  console.log(this); // this는 버튼 → 객체
});

다음과 같은 코드에서는 onclick에는 console.log(this)를 통해서 this를 확인하고 addEventListener메서드에서는 button 노드에 대해서 this를 출력하려고 한다. 각각 클릭된 버튼에 대한 버튼요소를 가진다.

 

4. 화살표함수를 통한 this

const obj = {
  name: "JS",
  greet: () => {
    console.log(this);
  }
};
obj.greet(); // this는 외부 스코프의 this (보통 window)

화살표 함수에서의 this 다르다. 거의 모든 경우에 자기만에 요소객체의 this를 가지고 있었지만 화살표함수를 통한 this는 바깥 스코프에서 물려받은 값을 가지게된다. (obj 다음 범위의 window를 가르킴)

 

 

onclick을 다시 정리하자면

• this는 객체가 아닐 수 도 있지만, 대부분의 경우 객체를 참조하게 된다.
• this는 "누가 이코드를 실행했는가?" 를 기준으로 어떤 값을 참조할 지 달라지게 된다.
• this자체는 "키워드"일 뿐, 자료형이 Object인 값은 아니다. 하지만 결과적으로 객체를 참조하는 경우가 많기 때문에 객체처럼 쓸 수 있는 것이다.

 

[event object]

다음은 addEventListener() 에서 사용되는 이벤트 객체(event object)로, 상황에 맞는 클래스의 인스턴스 객체를 의미한다.

 

button.addEventListener("click", function(evt) {
  console.log(evt);            // 이벤트 객체 출력
  console.log(typeof evt);     // "object"
});

 

해당 코드를 확인해보면 기존에 addEventListener을 사용하는 방식과는 다르게 function의 파라미터로 evt가 들어가있다.

여기서 evt는 MouseEvent 객체를 가르키게 되며, 브라우저에서 제공하는 기본 내장 객체 타입을 가르킨다.

 

이벤트 객체는 상당히 유용한 정보를 담고있다. 다음 코드를 확인해보자.

button.addEventListener("click", function(evt) {
  console.log(evt.type);         // "click"
  console.log(evt.target);       // 클릭된 요소
  console.log(evt.currentTarget); // 이벤트 리스너가 붙은 요소
  console.log(evt.clientX);      // 마우스 X 좌표
});

 

현재 마우스 좌표가 어디에 위치해있는지, 이벤트 리스너에서 어떤 타입에 이벤트에 반응하고 있는지 등에 대한 정보를 가지고 있다. 2번째와 3번째에는 target과 currentTarget이 있는데 둘다 button이라는 요소가 출력될 것이다. 

차이가 있는 경우에 대해서 알아보자

 

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

const ul = document.querySelector("#list");

ul.addEventListener("click", function(event) {
  console.log("target:", event.target);         // 클릭된 실제 요소 (li)
  console.log("currentTarget:", event.currentTarget); // 이벤트 리스너가 바인딩된 요소 (ul)
});

 

html 에서 ul태그안에 li태그를 2개만들어서 item1과 item2를 만들어 두었다. 이때 각각에 아이템에 id속성을 지정하지 않고,

두 <li> 태그를 감싸고있는 <ul>태그에 대해서 id 속성을 지정해두었다.

 

이벤트리스너가 걸려있는 ul태그가 아닌 자식요소인 li태그를 클릭하게되면 target으로는 클릭했던 <li> 태그요소가 출력되고

currentTarget으로는 감싸고 있던 ul태그에 대해서 출력되게 된다.

 

출력과 동일하게 이벤트객체를 통한 .target은 이벤트리스너가 걸린 태그 범위내에서 클릭된 실제 자식요소를 담고있고

currentTarget은 이벤트 리스너가 감지하고있는 전체적인 범위 (ul태그)를 담고있다.

 

다시말해서, 한 태그 안에 내가 이벤트리스너를 바인딩해야할 요소가 여러개가 존재한다면 각 요소에 이벤트리스너를 설정해 두는것이 아니라, 감싸고 있는 요소에 대해서 이벤트리스너를 설정하고 이벤트객체를 통해서 각 클릭된 요소에 대해서 다루는 것이다.

 

ㅇ