Developer.Sang

currentTarget : 이벤트 발생 지점

같은 className을 사용 중이며 그 클래스에 동작하는 이벤트가 있을 시 실제 이벤트가 작동되는 요소를 가리킨다.

target : 가리킨 이벤트 지점

currentTarget과 target을 사실 바꿔서 사용해도 동작에 무리는 없다..... 왤까? 

target을 쓰면 tablinks를 다 잡아서 active로 할 줄 알았는데 currentTarget이나 target이나 다른 게 없이 동작한다 ㅇㅅㅇ`

HTML

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

JAVASCRIPT

function openCity(evt, cityName) {
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active"; //이곳
}
 
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();