[JavaScript] target과 currentTarget의 차이점

 

---

목차

1. target, currentTarget
2. target과 currentTarget의 차이
3. 퀴즈

---

 
 
 
자바스크립트에서 이벤트를 다룰 때 클릭한 요소를 가져오는 방법으로 event 객체의 target 또는 currentTarget 프로퍼티를 사용합니다.
 
 
 

1. target, currentTarget 요약

---

 
- target: 이벤트가 발생한 바로 그 요소를 직접 가리킴
- currentTarget: 이벤트 리스너를 가진 요소를 가리킴
 
 
 
 
 
 

예제

---

 
 
다음과 같은 코드가 있습니다.
 

<style>
    .upper{
      background:black;
      width:100px;
      text-align:center;
    } 
    .lower{
      background:pink;
      width:100px
    }
 </style>
 <script>
    function clicked(event){
      alert(event.Target.id+" clicked");
    }
 </script>
 <div class="upper" onClick="clicked(event)" id="div">
    <span class="lower" id="span">                  
      span
    </span>
 </div>

 
 
 
 
 

실행결과

 

 
위 결과에서 검은색은 div, 핑크색은 span입니다.
코드를 보면 onClick 이벤트는 div에 설정을 했지만 검은색, 핑크색 클릭 시 둘 다 이벤트가 발생합니다.
 
 
div에만 이벤트를 설정했는데 자식요소인 span에도 이벤트가 발생하는 이유가 무엇일까요?
그 이유는 이벤트 버블링과 이벤트 캡쳐와 관련이 있으며 아래 링크에 잘 설명되어 있으니 참고바랍니다.
 
https://choonse.com/2022/01/14/651/

이벤트 버블링과 이벤트 캡쳐, 이제는 내 것으로 만들자(자바스크립트) - WORLD IS WIDE

 
 
 
 
 

2.  target과 currentTarget의 차이

---

 
두 가지 경우로 나누어 생각해봅시다.
 
1. 핑크색 부분을 클릭했을 때
 
target - 핑크 (핑크를 눌렀으므로 핑크가 이벤트 발생 시점이 됨)
currentTarget - 검은색 (onClick 이벤트는 검은색이 갖고 있음)
 
 
2. 검은색 부분을 클릭했을 때
 
target - 검정 (검정을 눌렀으므로 검정이 이벤트 발생 시점이 됨)
currentTarget - 검은색 (onClick 이벤트는 검은색이 갖고 있음)
 
따라서 핑크색을 누르면 span clicked, 검은색을 누르면 div clicked 알림창이 띄워집니다.
 
 
만약 핑크색을 눌러도 이벤트를 가진 검은색 속성에 접근하고 싶다면 currentTarget과 getAttribute를 사용하면 됩니다.
 

<style>
    .upper{
      background:black;
      width:100px;
      text-align:center;
    } 
    .lower{
      background:pink;
      width:100px
    }
</style>
<script>
  function clicked(event){
    alert(event.currentTarget.getAttribute('id')+" clicked");
  }
</script>
<div class="upper" onClick="clicked(event)" id="div">
  <span class="lower" id="span">                  
    span
  </span>
</div>

 
위의 코드는 핑크색, 검은색 둘 다 이벤트를 가진 검은색 속성에만 접근합니다.
 
따라서 target은 누른 바로 그 것, currentTarget은 이벤트를 실행하는 바로 그 것으로 이해하면 될 것 같습니다.
 
 
 
 
 

3. 퀴즈

---

- target: 이벤트가 발생한 바로 그 요소를 직접 가리킴
- currentTarget: (      )를 가진 요소를 가리킴

 

Q. 괄호 안에 들어갈 단어는?