이와 같은 이벤트 버블링 현상이 일어나면 이벤트 리스너 콜백 함수의 event.target은 이벤트가 처음 발생한 태그로 바뀌므로 주의해야 합니다. 이벤트가 발생한 태그가 아닌 이벤트를 연결한 태그에 접근하고 싶다면 event.currentTarget을 사용해야 합니다. 또는 함수 선언문과 this를 사용해도 됩니다.
bubbling.html
<script>
document.querySelector('td').addEventListener('click', (event) => {
console.log('td');
console.log(event.target);
console.log(event.currentTarget);
});
document.querySelector('tr').addEventListener('click', (event) => {
console.log('tr');
console.log(event.target);
console.log(event.currentTarget);
});
document.querySelector('table').addEventListener('click', (event) => {
console.log('table');
console.log(event.target);
console.log(event.currentTarget);
});
</script>