Leí el artículo en https://javascript.info/bubbling-and-capturing sobre Bubbling.
De acuerdo con el artículo, el siguiente evento en la etiqueta del article con id="article" debería haber saltado a <p id="para"></p> , dentro del cual está anidado el artículo.
let para = document.getElementById("para"); let article = document.getElementById("article"); /* article.addEventListener("click", () => { console.log("I'm an article tag!"); }); */ para.addEventListener("click", () => { console.log("I'm ap tag!"); }); <p id="para"> <article id="article">Click Me!</article> </p> Sin embargo, absolutamente, no pasa nada. El detector de eventos en el article funciona bien (cuando no está comentado). ¿Por qué?
Su HTML no es válido. Un <article> no puede ser un elemento secundario de un <p> : consulte el HTML representado:
console.log(document.body.innerHTML); <p id="para"> <article id="article">Click Me!</article> </p> Como resultado, el navegador finaliza el <p id="para"> cuando comienza la etiqueta <article> , por lo que ya no son padre e hijo, sino hermanos.
(La etiqueta <p> solo puede contener contenido de frases , mientras que la etiqueta <article> no lo es)
Asegúrese de que su HTML pase primero la validación .
Si usó algo más válido, como un <span> , funcionaría:
let para = document.getElementById("para"); let article = document.querySelector("span"); /* article.addEventListener("click", () => { console.log("I'm an article tag!"); }); */ para.addEventListener("click", () => { console.log("I'm ap tag!"); }); <p id="para"> <span id="article">Click Me!</span> </p>