<예시>
<body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>
const divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', handleClick);
});
function handleClick(event) {
console.log(event.currentTarget.className);
}
<결과값>
<div class="three"></div>
를 클릭하면 이벤트 버블링이 발생하면서 이와 같은 결과를 나타낸다.
<예시>
const divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', handleClick, {
capture: true
});
});
function handleClick(event) {
console.log(event.currentTarget.className);
}
<결과값>
<div class="three"></div>
를 클릭하면 이벤트 캡쳐가 발생하면서 이와 같은 결과를 나타낸다.
<예시>
const one = document.querySelector('.one');
one.addEventListener('click', handleClick);
function handleClick(event) {
console.log(event.currentTarget.className);
}
위와 같이 작성하면 하위 요소에 각각 이벤트를 달지 않고서도 이벤트를 부여할 수 있다.