이벤트 버블링(event bubbling)
td의 부모 태그는 tr이고, tr의 부모 태그는 table이라고 할 때, td 태그에서 click 이벤트가 발생한다. 이 이벤트가 td의 부모인 tr 태그에서도 동일한 이벤트가 발생하고, table 태그에서도 발생한다. 즉, td 태그에서 발생한 click 이벤트가 table 태그까지 전달된다.
HTML에서는 이벤트가 발생할 때 부모 태그에도 순차적으로 동일한 이벤트가 발생한다. 자식 태그에서 발생한 이벤트가 부모 태그로 퍼져 나가는 현상이 물방울 모양과 비슷하다고 하여 이벤트 버블링이라는 이름이 붙었다.
이벤트 버블링 현상이 일어나면 이벤트 리스너 콜백 함수의 event,target이 이벤트가 발생한 태그로 바뀌므로 주의해야 한다. 이벤트가 발생한 태그가 아닌 이벤트를 연결한 태그에 접근하고 싶다면 event.currentTarget을 사용한다.
.stopPropagation()
이벤트 버블링 현상을 막고 싶을 때 사용
이벤트 캡처링(event capturing)
부모를 클릭했을 때 자식한테 이벤트가 가는 현상
e.g 팝업을 닫을 때 팝업 영역 외의 부분을 누르면 닫힐 때 사용
문제
버튼을 클릭할 때 'hello, event bubbling'을 alert 하게 다음 코드를 수정하라.
단, 이벤트 리스너를 button 태그에 달아서는 안된다
<header>
<div>
<button>클릭</button>
</div>
</header>
<script>
</script>정답
const $header = document.querySelector('header');
$header.addEventListener('click',()=>{
alert('hello, event bubbling')
});