Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Dimitar Stefanov en 18 de Marzo 2016, 20:02
-
Buenas noches.
Procedo a la exposición de la solución del ejercicio CU01158E del curso JavaScript desde cero.
EJERCICIO
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…
El código JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">
window.onload = function(){
var parrafo = document.getElementsByTagName('p');
var divTerciario = document.getElementById('terciario');
var divSecundario = document.getElementById('secundario');
var divPrincipal = document.getElementById('principal');
var body = document.getElementsByTagName('body');
var html = document.getElementsByTagName('html');
for(var i=0;i<parrafo.length;i++){
window.addEventListener("click",mensaje);
document.addEventListener("click",mensaje);
body[i].addEventListener("click",mensaje);
divPrincipal.addEventListener("click",mensaje);
divSecundario.addEventListener("click",mensaje);
divTerciario.addEventListener("click",mensaje);
parrafo[i].addEventListener("click",mensaje);
}
var contador = 1;
function mensaje(){
alert("Mensaje: "+contador+"\nSoy un nodo tipo: "+this.nodeName+" y estoy burbujeando");
contador++;
}
}
</script>
</head>
<body>
<div id="principal">
<div id="secundario">
<div id="terciario">
<p>Ejemplo de bubbling (burbujeo).</p>
</div>
</div>
</div>
</body>
</html>
He construido de tal forma el código para demostrar que aunque la primera instrucción es que se ejecute el evento referenciado a "window" realmente la ejecución del burbojeo (bubble) empieza desde dentro y acaba con el elemento más "exterior" que pueda alcanzar el navegador.
En la entrega CU01158E del curso JavaScript desde cero se dice:
Algunos eventos tienen un burbujeo especial, por ejemplo el evento load (onload, carga de un elemento) burbujea hasta el elemento document, pero no alcanza al elemento window.
pero si realmente es así, por qué cuando añadimos el evento al elemento "window"
también nos salta el mensaje? Es decir, si no puede alcanzar el elemento "window" por qué burbujea? (estoy utilizando en navegador de Firefox, versión: 44.0.2)
Graicas.
-
Hola dimiste, añade otro elemento <p> y mira que pasa.
-
Buenas, bermartinv.
He cambiado el código como me dijiste. Queda así:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">
window.onload = function(){
var parrafo = document.getElementsByTagName('p');
var divTerciario = document.getElementById('terciario');
var divSecundario = document.getElementById('secundario');
var divPrincipal = document.getElementById('principal');
var body = document.querySelector('body');
var html = document.getElementsByTagName('html');
for(var i=0;i<parrafo.length;i++){
window.addEventListener("click",mensaje);
document.addEventListener("click",mensaje);
body.addEventListener("click",mensaje);
divPrincipal.addEventListener("click",mensaje);
divSecundario.addEventListener("click",mensaje);
divTerciario.addEventListener("click",mensaje);
parrafo[i].addEventListener("click",mensaje);
}
var contador = 1;
function mensaje(){
alert("Mensaje: "+contador+"\nSoy un nodo tipo: "+this.nodeName+" y estoy burbujeando");
contador++;
}
}
</script>
</head>
<body>
<div id="principal">
<div id="secundario">
<div id="terciario">
<p>Ejemplo de bubbling (burbujeo).</p>
<p>Ejemplo de bubbling (burbujeo).</p>
</div>
</div>
</div>
</body>
</html>
Como puedes observar, cambié también el selector del elemento "body". Ahora lo tengo declarado así:
var body = document.querySelector('body');
de la manera como lo tenía antes, el contador salía como "undefined" y "NaN" y no entiendo porque.
Un saludo.
-
Ahora sí. Lo único la variable contador, que supongo que lo habrás usado como comprobación de algo.
Saludos.
-
Hola, bermartinv.
Qué va. Lo puse para que se viera que se cambiaba realmente el mensaje cuando burbujeaban los div's, porque si no, no se notaba la diferencia.
Saludos.
-
Se sabe porque cambia el nodeName
-
Entre los "div's" no.
Copia mi código y lo verás.
Saludos.