4.3.4 이벤트 버블링과 캡처링

이벤트 리스너를 사용할 때 주의해야 할 두 가지가 있습니다. 이벤트 버블링과 이벤트 캡처링 현상입니다.

● 이벤트 버블링

이벤트가 발생할 때 부모 태그에도 동일한 이벤트가 발생하는 현상을 이벤트 버블링(event bubbling)이라고 합니다. 어떤 현상인지 예제로 확인해 보겠습니다.

VSCode에서 bubbling.html 파일을 새로 만들고 다음과 같이 작성합니다. 코드를 실행하면 웹 브라우저에 3칸짜리 표가 나타납니다. 여기서 첫 번째 칸을 클릭하면 콘솔에는 어떻게 출력될까요?