Autor Tema: JavaScript addEventListener bubbling nodeName cómo se propagan evento CU01158E (Leído 2065 veces)

bermartinv · « **en:** 19 de Febrero 2016, 10:45 »

Adjunto mi código, para el ejercicio CU01158E del tutorial JavaScript desde cero:

Citar

Crea un documento HTML donde dentro del elemento body tengamos un div con id “principal”, dentro de principal otro div denominado “secundario”, y dentro de secundario otro div con id “terciario”. Dentro de terciario debe existir un párrafo con el texto: Ejemplo de bubbling (burbujeo). Añade eventListeners con el evento click para los párrafos y todos los elementos div, document y window, y una función de respuesta común para todos ellos que emita el mensaje de alerta <<Soy un nodo tipo NombreDelNodo y estoy burbujeando>>.

Ejemplo: al hacer click sobre el texto <<Ejemplo de bubbling (burbujeo)>> deberán empezar a aparecernos mensajes como: Soy un nodo tipo P y estoy burbujenado. Soy un nodo tipo DIV y estoy burbujeando. Soy un nodo tipo DIV y estoy burbujeando…

Tan solo comentar que el nodo window no existe por eso en el alert se nos muestra como "undefined"

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document curso aprenderaprogramar.com</title>
<script>
window.onload=function(){
    document.querySelector('p').addEventListener('click',ventana);
    document.getElementById('terciario').addEventListener('click',ventana);
    document.getElementById('secundario').addEventListener('click',ventana);
    document.getElementById('principal').addEventListener('click',ventana);
    document.addEventListener('click',ventana);
    window.addEventListener('click',ventana);
    
    function ventana(){
        alert ('Soy un nodo de tipo '+this.nodeName+' y estoy burbujeando');
    }
    
    
}    
    
</script>
</head>
<body>
    style="width:50%; height: 25%: margin:5%; padding:5%; border-style:solid;"
        <div id="secundario">
            <div id="terciario">
                <p>Ejemplo de bubbling (burbujeo). Pulsa aquí...</p>
            </div>
        </div>
    </div>
</body>
</html>

César Krall · « **Respuesta #1 en:** 21 de Febrero 2016, 17:38 »

Hola!

Todo bien, en el nodo window más que decir que no existe diríamos que queda fuera de la cadena de burbujeo que ocasiona el click al estar fuera del modelo del DOM que internamente está usando el navegador para representar el documento HTML

Podemos comprobar si existe escribiendo alert ("prueba" + window);

Saludos!

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: