Múltiples manejadores de eventos en un elemento en JavaScript
Si un elemento tiene múltiples manejadores
para un mismo evento, incluso si se detiene
el burbujeo, todos se ejecutarán. Es decir,
stopPropagation impide que el evento
avance más allá, pero en el elemento actual todos
los manejadores se ejecutarán. Mira el ejemplo:
elem1.addEventListener('click', function() {
console.log('verde');
});
elem2.addEventListener('click', function(event) {
console.log('azul claro - primer manejador');
event.stopPropagation(); // detenemos el burbujeo
});
elem2.addEventListener('click', function() {
console.log('azul claro - segundo manejador'); // se ejecutará de todos modos
});
elem3.addEventListener('click', function() {
console.log('rojo');
});
Puedes comprobarlo:
