이벤트 흐름
HTML 요소에 이벤트가 발생하면 연쇄적인 반응이 일어난다.
즉 이벤트가 전파된다.
캡처링
자식요소에서 발생한 이벤트가 부모요소에서 자식요소로 전파되는 것
버블링
자식요소에서 발생한 이벤트가 자식요소에서 부모요소로 전파되는 것
이벤트가 시작되면 캡처링에서 시작해서 버블링으로 끝난다.
참고)addEventListener에서 세번째 매개변수를 true로 설정하면 캡처링으로 전파되는 이벤트를 캐치하고, false, 미설정시 버블링으로 이벤트를 캐치한다.
현업에서는 보통 캡처링보다는 버블링이 많이 쓰인다고 한다...
코드📄
<body>
<div class="outter">outter
<div class="inner">inner
<button class="btn">btn</button>
</div>
</div>
<script>
const outter =document.querySelector('.outter');
const inner =document.querySelector('.inner');
const btn =document.querySelector('.btn');
document.body.addEventListener('click', function (event) {
if(event.currentTarget!==event.target){
return;
}
console.log('Handler for body.');
});
outter.addEventListener('click', function () {
console.log('Handler for outter.');
});
inner.addEventListener('click', function () {
console.log('Handler for inner.');
});
btn.addEventListener('click',function(){
console.log('Handler for button');
})
</script>
</body>
- button 클릭시 button에서부터 발생한 이벤트가 body까지 타고 전파되는데 body는 안의 조건문을 만족하지 않기 때문에 넘어간다.
학습 기록.