ch5 - 2. ‘this’ 그리고 이벤트 개체

Index

Index 1. this 2. Event.currentTarget 3. Event.target

1. this

this 키워드는 특별합니다. this는 영어에서 '이것'이라는 의미로 쓰이지만 문맥에 따라 가리키는 대상이 언제든지 달라지는 것처럼, 어떻게 호출되느냐에 따라 스크립트 내에서도 '이것' 이 가리키는 대상이 달라집니다. 예를 들어봅시다.


console.log(this);

위와 같이 어떤 것에도 속하지 않은 this는 호출될 때 'window' 전역 개체를 가리킵니다. 또 다른 예를 살펴볼까요?


<button type="button" class="btn">버튼입니다</button>


const btn = document.querySelector('.btn');
function clickTest(){console.log(this)}
btn.addEventListener('click', clickTest);
/* btn 요소를 클릭했을때 반환되는 값 : "<button type='button' class='btn'>버튼입니다</button>"*/

"btn" 클래스를 가진 button 요소에 클릭 이벤트 리스너를 달았고, 클릭되면 clickTest 함수를 통해 this를 호출하도록 했습니다. 위와 같이 this 키워드가 함수를 통해 호출되었을 경우 this는 함수를 호출한 개체를 가리킵니다.

2. Event.currentTarget

currentTarget에 대해 얘기해보기 전에 event에 대해 먼저 알아봅시다. 이벤트 핸들러로 실행되는 함수에는 'event'라는 개체를 매개변수로 전달할 수 있습니다. 위에서 다룬 코드로 얘기하자면 clickTest(event){ ... } 인 셈이지요. 이 이벤트 개체에는 어떠한 정보가 담겨있는지 살펴보겠습니다. 위에서 작성한 코드를 조금만 수정해서 clickTest 함수에 event 개체를 전달했습니다.


const btn = document.querySelector('.btn');
function clickTest(event){console.log(event)}
btn.addEventListener('click', clickTest);

코드를 실행하여 버튼을 눌러보면 이벤트 개체에는 아래와 같이 발생한 이벤트에 대한 정보가 들어있다는 것을 콘솔 창을 통해 확인할 수 있습니다. 클릭 이벤트를 통해 발생한 이벤트이기 때문에 MouseEvent가 발생하였고, 모니터 화면에서의 좌표정보를 담고 있는 screenX, 브라우저의 좌표 정보인 clientX 등을 알 수 있습니다. 이러한 정보들은 이벤트를 조작할 때 매우 유용하게 사용될 수 있습니다.

이제 currentTarget 얘기를 해보겠습니다. currentTarget은 event 개체가 가진 메서드 중 하나입니다. 위에서 사용한 clickTest 코드를 다시 한번 살짝 바꿔보겠습니다.


const btn = document.querySelector('.btn');
function clickTest(event){console.log(event.currentTarget)}
btn.addEventListener('click', clickTest);

이벤트 개체 뒤에 currentTarget 메서드가 사용된 것이 보이시나요? 콘솔 창에 출력된 결과는 아래와 같습니다. currentTarget은 바로 이벤트가 등록된 요소를 가리키는 기능을 가지고 있습니다.

3. Event.target

currentTarget 이 이벤트가 등록된 요소를 가리킨다면 target 메서드는 어떤 기능을 가지고 있을까요? 위의 코드를 조금만 바꿔서 다시 사용해보겠습니다.


<div class="btns">
	<button type="button" class="btn">버튼1</button>
  <button type="button" class="btn2">버튼2</button>
  <button type="button" class="btn2">버튼3</button>
</div>

버튼 1, 버튼 2, 버튼 3 세가지 버튼을 만들고 세 버튼을 모두 감싸는 <div class="btns"> 요소가 있습니다.


const btn = document.querySelector('.btns');
function clickTest(event){console.log(event.currentTarget)}
btn.addEventListener('click', clickTest);

이벤트는 더 이상 버튼이 아닌 <div class="btns"> 요소에 등록되었습니다. 이제 버튼들을 클릭하면 콘솔에는 어떤 정보가 출력될까요? currentTarget 함수는 앞에서도 배웠듯이 이벤트가 등록된 요소를 가리킵니다. 때문에 콘솔에는 <div class="btns"> 요소가 찍히게 됩니다. 세 가지 버튼 중 어떠한 것을 클릭해도 마찬가지죠. 그렇다면 이제 currentTarget를 target으로 바꿔보겠습니다.


const btn = document.querySelector('.btns');
function clickTest(event){console.log(event.target)}
btn.addEventListener('click', clickTest);

이제 다시 버튼들을 클릭하면 무엇이 출력 되나요? 정확히 우리가 클릭한 버튼 요소들이 출력될 것입니다. 이것이 바로 target 이 currentTarget 과 다른 점입니다. 더 자세한 내용은 뒤에서 다룰 주제인 '이벤트 위임'에서 말씀드리겠습니다.