TIL_event.target / event.currentTarget

event.target

이벤트가 발생한 바로 그 요소를 가리킴

<div class = 'outer'></div>
<div class = 'inner'></div>

let getOuterArea = document.querySelector('.outer');

getOuterArea.addEventListener('click', function(event){
	console.log(event.target);
}

위의 코드처럼 target메소드를 사용했을 경우, div.inner영역을 클릭하게 되면

<div class = 'inner'></div>

이벤트가 발생한 div.inner영역이 console.log로 찍히게 된다.

event.currentTarget

이벤트 리스너를 가진 요소를 가리킴

<div class = 'outer'></div>
<div class = 'inner'></div>

let getOuterArea = document.querySelector('.outer');

getOuterArea.addEventListener('click', function(event){
	console.log(event.target);
}

이번엔 currentTarget을 써 보았다.
이 때, div.inner 영역을 클릭하게 되면

<div class = 'outer'></div>

eventListener를 가진 요소 즉, div.outer 영역을 리턴하게 된다.