Autor Tema: JavaScript propagación de eventos bubbling window.addEventListener CU01158E (Leído 4028 veces)

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.

Citar

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:

Código: [Seleccionar]

<!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:

Citar

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.

bermartinv · « **Respuesta #1 en:** 18 de Marzo 2016, 23:59 »

Hola dimiste, añade otro elemento <p> y mira que pasa.

Dimitar Stefanov · « **Respuesta #2 en:** 21 de Marzo 2016, 14:55 »

Buenas, bermartinv.

He cambiado el código como me dijiste. Queda así:

Código: [Seleccionar]

<!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í:

Código: [Seleccionar]

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.

bermartinv · « **Respuesta #3 en:** 21 de Marzo 2016, 15:27 »

Ahora sí. Lo único la variable contador, que supongo que lo habrás usado como comprobación de algo.
Saludos.

Dimitar Stefanov · « **Respuesta #4 en:** 21 de Marzo 2016, 16:06 »

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.

bermartinv · « **Respuesta #5 en:** 21 de Marzo 2016, 16:08 »

Se sabe porque cambia el nodeName

Dimitar Stefanov · « **Respuesta #6 en:** 21 de Marzo 2016, 19:26 »

Entre los "div's" no.

Copia mi código y lo verás.

Saludos.

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

Noticias:

Autor Tema: JavaScript propagación de eventos bubbling window.addEventListener CU01158E (Leído 4028 veces)

Dimitar Stefanov

JavaScript propagación de eventos bubbling window.addEventListener CU01158E

bermartinv

Re:CU01158E addEventListener en JavaScript

Dimitar Stefanov

Re:JavaScript propagación de eventos bubbling window.addEventListener CU01158E

bermartinv

Re:JavaScript propagación de eventos bubbling window.addEventListener CU01158E

Dimitar Stefanov

Re:JavaScript propagación de eventos bubbling window.addEventListener CU01158E

bermartinv

Re:JavaScript propagación de eventos bubbling window.addEventListener CU01158E

Dimitar Stefanov

Re:JavaScript propagación de eventos bubbling window.addEventListener CU01158E

Preguntas y respuestas