En el siguiente código:
<div onClick={() => console.log('outer div')}> <div onClick={() => console.log('middle div')}> <div onClick={() => console.log('innermost div')}> Click me! </div> </div> </div> Entiendo que el objeto de evento posee una propiedad de target que contiene una referencia al nodo DOM en el que ocurrió el evento. Mi pregunta es: en las fases de captura (cuando la captura se establece en verdadero) y burbujeo, ¿el evento siempre se activará en un elemento HTML si ese elemento contiene el mismo atributo HTML (por ejemplo, onClick, onHover) que inició el ciclo de propagación? Gracias.
SÍ.
El evento siempre se activa en un elemento HTML si ese elemento contiene el mismo atributo HTML.
En el siguiente código, puede ver qué fase del evento se activa en un nodo específico.
Event.eventPhase indica qué fase del flujo de eventos se está evaluando actualmente. // true: capturing / false: bubbling const useCature = true; const phase = (e) => { const phases = ["capturing", "target", "bubbling"]; const node = `${e.currentTarget.nodeName} .${e.currentTarget.className}`; console.log(node, phases[e.eventPhase - 1]); }; document.querySelector(".outer").addEventListener("click", phase, useCature); document.querySelector(".middle").addEventListener("click", phase, useCature); document.querySelector(".inner").addEventListener("click", phase, useCature); <div class="outer"> <div class="middle"> <div class="inner"> Click me! </div> </div> </div>