Multiple handlers on an element in JavaScript
If an element has several handlers for one event,
then even if the bubbling stops, all of them will
be executed. That is, stopPropagation
prevents the event from progressing further, but
all handlers will work on the current element.
See example:
elem1.addEventListener('click', function() {
console.log('green');
});
elem2.addEventListener('click', function(event) {
console.log('blue - the first handler');
event.stopPropagation(); // stops the bubbling
});
elem2.addEventListener('click', function() {
console.log('blue - the second handler'); // still works
});
elem3.addEventListener('click', function() {
console.log('red');
});
You can check:
