Event bubbling and capturing are ways of event propagation in the HTML DOM API.
Event Progagation determines which order the elements receive the event.
With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements.
With capturing, the event is first captured by the outermost element and propagated to the inner elements.
Capturing is also called "trickling", which helps remember the propagation order:
"trickle down, bubble up"
Case 1:
function logText(e) {
console.log(this.classList.value)
}
divs.forEach(div => div.addEventListener('click', logText));
result: inner box, prints 3,2,1
}));
Case 2:
function logText(e) {
console.log(this.classList.value)
e.stopPropagation();
}
divs.forEach(div => div.addEventListener('click', logText));
result: inner box, prints 3
}));
Case 3:
function logText(e) {
console.log(this.classList.value)
}
divs.forEach(div => div.addEventListener('click', logText, {
capture: true,
}));
result: inner box, prints 1,2,3
}));
Case 4:
function logText(e) {
console.log(this.classList.value)
e.stopPropagation();
}
divs.forEach(div => div.addEventListener('click', logText, {
capture: true,
}));
result: inner box, prints 1, in all cases
}));