● 이벤트 캡처링
이벤트 캡처링(event capturing)은 이벤트가 자식 태그로 전파되어 내려가는 현상입니다. 예제 코드에서 addEventListener()의 세 번째 인수로 true를 넣으면 이벤트가 부모 태그에서 자식 태그로 전파됩니다.
bubbling.html
<script>
document.querySelector('td').addEventListener('click', (event) => {
console.log('td');
console.log(event.target);
console.log(event.currentTarget);
}, true);
document.querySelector('tr').addEventListener('click', (event) => {
console.log('tr');
console.log(event.target);
console.log(event.currentTarget);
}, true);
document.querySelector('table').addEventListener('click', (event) => {
console.log('table');
console.log(event.target);
console.log(event.currentTarget);
}, true);
</script>