더북(TheBook)

이벤트 캡처링

이벤트 캡처링(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>
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.