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();
