Event 공부를 하다가 자주 보게된 Event.target과 Event.currentTarget의 차이점이 궁금해졌다.
둘다 이벤트가 발생하는 node를 보여주는것 같은데 무슨 차이점이 있을까?
Event.target
위와 같은 화면이 있을때 hello나 bye를 클릭하면
function hide(e) {
e.target.style.visibility = 'hidden';
console.log(e.currentTarget);
}
const ps = document.getElementsByTagName('p');
document.body.addEventListener('click', hide, false);
// currentTarget이 아니고 target이면 hello를 누르면 <p>hello </p>만 콘솔에 뜨게 돤다.
클릭된 태그를 반환시켜준다.
Event.target은 p 태그에 event가 달려있지 않고 부모 태그에 event가 달려있어도 p태그가 클릭되면 p태그를 target으로 보여준다.
하지만 currentTarget은 조금 다르다.
Event.currentTarget
function hide(e) {
e.target.style.visibility = 'hidden';
console.log(e.currentTarget);
}
const ps = document.getElementsByTagName('p');
document.body.addEventListener('click', hide, false);
// currentTarget이 아니고 target이면 hello를 누르면 <p>hello </p>만 콘솔에 뜨게 돤다.MDN에 따르면 An EventTarget representing the object to which the current event handler is attached. -> 이벤트 리스너가 부착된 객체를 반환한다. 라고 쓰여있다.
즉, hello를 누르던 bye를 누르던 event가 부착되어 있는 body 태그를 반환시켜 .. 한꺼번에 hidden 상태가 된다는 것이다.
❇️결론
Event.target은 event가 부착된 태그를 신경쓰지 않고 event가 발생된 태그를 반환하고, Event.currentTarget은 event가 부착된 부모 태그를 반환한다.
