[Javascript] currentTarget vs target

쓸 때마다 잊어버려서 기억하려고 메모하는 포스팅...

 

currentTarget : 이벤트를 등록한 요소

target : 이벤트가 발생한 요소

 

 

콘솔에 target을 찍어보면 클릭이 일어난 요소가 출력되지만

// 클릭한 각각의 요소가
<img src="https://uploads.codesandbox.io/uploads/user/1ca04d5e-d300-46f8-a6e0-13c8b8a087b1/qO3C-easter-bunny-24222955.jpeg" style="width: 200px;"></img>

// 출력되는 모습
<p>Good evening !</p>

currentTarget은 이벤트가 등록된 최상단 요소 button이 출력된다

<button class="App">
<p>Good evening !</p>
<img src="https://uploads.codesandbox.io/uploads/user/1ca04d5e-d300-46f8-a6e0-13c8b8a087b1/qO3C-easter-bunny-24222955.jpeg" style="width: 200px;"></img>
</button>