javascript: event.target vs event.currentTarget

html에 onclick에 event 변수를 넣어서 함수를 달아주고, event.target으로 클릭한 태그를 집어내는게 용이합니다.

그런데 경우에 따라서 onclick 에 함수를 달아준 하위 태그를 클릭하더라도 onclick을 달아준 함수를 event의 target으로 해야할 경우가 있는데

event.target은 event 함수가 달린 태그와 하위 태그에 대해서 클릭한 곳을 정확하게 집어냅니다.

정확히 클릭한 곳을 원하는게 아니라

event 함수를 달아놓은 태그를 target으로 하고 싶을 때 event.currentTarget 을 사용하면 됩니다.

 

아래 예제를 살펴보겠습니다.(보기 편하게 style attr은 지워줬습니다.)

 

HTML

<div onclick="select_address(event)" class="address-container">
  <div><span>(도로명)</span><span class="road_addr">도로1</span></div>
  <hr>
  <div><span>(지번)</span><span class="jibun_addr">지번1</span></div>
</div>

 

Javascript

function select_address(event){
    console.log("Target: ", event.target)
    console.log("Current Target: ", event.currentTarget)
    console.log("---")
}

 

순서대로 (도로명) -> 도로1 -> (지번) -> 지번2 를 클릭해보겠습니다.

위와 같이, event.target은 정말 클릭한 target을 가리키는 반면에

event.currentTarget은 event함수를 달아준 곳을 target으로 하는 것을 볼 수 있습니다.