브라우저는 이벤트가 발생하면, capturing -> bubbling 순으로 이벤트를 감지 합니다.
상위의 화면 요소란? HTML 요소는 기본적으로 트리 구조를 갖습니다.
여기서는 트리 구조상으로 한 단계 위에 있는 요소를 상위 요소라고 하며 body 태그를 최상위 요소라고 부르겠습니다.
<body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>
const one = document.querySelector(".one");
const two = document.querySelector(".two");
const three = document.querySelector(".three");
one.addEventListener("click", function () {
console.log("one");
});
two.addEventListener("click", function () {
console.log("two");
});
three.addEventListener("click", function () {
console.log("three");
});
가장 하위 태그인 three
를 클릭 했을 때 결과 입니다.
즉, 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작 합니다.
가장 최상단의 부모 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작 합니다.
부모/자식 구조에서 동일한 이벤트만 bubbling 이 됩니다.
부모에게는 mousedown
이벤트, 자식에게는 click
이벤트를 등록해두고, 자식을 클릭하면 부모의 mousedown
이벤트는 동작하지 않습니다.
<body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>
const one = document.querySelector(".one");
const two = document.querySelector(".two");
const three = document.querySelector(".three");
one.addEventListener("click", function () {
console.log("one");
},true);
two.addEventListener("click", function () {
console.log("two");
},true);
three.addEventListener("click", function () {
console.log("three");
},true);
function logEvent(event) {
event.stopPropagation();
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
const list = document.querySelectorAll('li')
list.forEach(li =>{
li.addEventListener('click',()=>{
li.classList.add('click')
})
})
const ul = document.querySelector('ul')
ul.addEventListener('click',(event)=>{
if(event.target.tagName = 'li'){
event.target.classList.add('click')
})
공통적으로 무언가를 처리해야 할 때, 일일이 이벤트 리스너를 자식에 추가하는 것 보다 효율적 입니다.
( 특히 자식요소가 많아 질 수록 )
동적인 element에 대한 이벤트 처리가 수월 합니다.
메모리 사용량이 줄어듭니다.
메모리 누수 가능성이 줄어듭니다.