Autor Tema: addEventListener JavaScript. Remove. AttachEvent Ejercicio CU01158E# (Leído 2204 veces)

paramonso · « **en:** 03 de Febrero 2018, 18:27 »

Hola. Dejo la entrega del Ejercicio CU01158E del taller de programación gratuito con JavaScript de aprenderaprogramar

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>>.

Código: [Seleccionar]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>sin título</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.32" />
</head>
<script>
	window.onload = function () 
	{
		msg="";
		var elemento=document.querySelectorAll('p,div') 
		for (var i=0;i<elemento.length;i++) 
		{
		
		elemento[i].addEventListener("click", nodoDOOM)
		 
		}
		
		document.addEventListener("click", nodoDOOM)
		window.addEventListener("click", nodoDOOM)
 
function nodoDOOM()
		{	//**********************************************************************************
			//Codigo añadido para comprobar el burbujeo y saber en que nodo nos encontramos
			 var nombre=this.nodeName;
			 if( nombre=='P'||nombre=='DIV'){msg=this.firstChild.nodeValue;}
			 //*********************************************************************************
			 //*********************************************************************************
		    alert("Soy un nodo tipo "+ this.nodeName +" "+msg+" y estoy burbujeando" );
			msg="";
		}

	}


	



</script>
<style>
  body *
 {
    margin: 10px;
    border: 5px solid white;
    text-align:center;
  }
 body{background-color: yellow; }
 #principal{
	    position: absolute;
		top:50%;
		left:50%;
		width:300px;
		margin-left:-200px;
		margin-top:-150px;
		padding:5px;
		background-color:red;
	 }
 #secundario{width:250px;background-color:blue;}
 #terciario{width:200px;background-color:green;}
 p{width:150px;background-color:yellow;}
 h1,h2{border: none;}
</style>
<body>
<h1>aprenderaprogramar.com<br>Ejercicio CU01158E<br></h1>
<h2>hacer click sobre cualquier cuadro</h2>
 
<div id="principal">div principal
  <div id="secundario" >div secundario
    <div id="terciario" >div terciario
    <p>Ejemplo de bubbling (burbujeo)</p>
    </div>
  </div>
 
</body>

</html>

Ogramar · « **Respuesta #1 en:** 15 de Junio 2018, 22:36 »

Buenas, el ejercicio ha quedado muy bien y explicativo porque al aplicarle css y delimitar con colores los distintos div se diferencia muy bien cada cosa y vemos cómo se propaga el burbujeo según dónde hagamos click.

Al ejecutar el código he visto que después del párrafo y los div, el burbujeo prosigue hacia niveles superiores. Si queremos detenerlo, basta con incluir el alert dentro del if que te identifica si el nodo es de tipo párrafo o de tipo div:

Código: [Seleccionar]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>sin título</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.32" />
</head>
<script>
	window.onload = function ()
	{
		msg="";
		var elemento=document.querySelectorAll('p,div')
		for (var i=0;i<elemento.length;i++)
		{
		
		elemento[i].addEventListener("click", nodoDOOM)
		
		}
		
		document.addEventListener("click", nodoDOOM)
		window.addEventListener("click", nodoDOOM)
 
function nodoDOOM()
		{	//**********************************************************************************
			//Codigo añadido para comprobar el burbujeo y saber en que nodo nos encontramos
			var nombre=this.nodeName;
			if( nombre=='P'||nombre=='DIV'){msg=this.firstChild.nodeValue;
			alert("Soy un nodo tipo "+ this.nodeName +" "+msg+" y estoy burbujeando" );	
				
				}
			//*********************************************************************************
			//*********************************************************************************
		    
			msg="";
		}

	}

</script>
<style>
  body *
 {
    margin: 10px;
    border: 5px solid white;
    text-align:center;
  }
 body{background-color: yellow; }
 #principal{
	    position: absolute;
		top:50%;
		left:50%;
		width:300px;
		margin-left:-200px;
		margin-top:-150px;
		padding:5px;
		background-color:red;
	}
 #secundario{width:250px;background-color:blue;}
 #terciario{width:200px;background-color:green;}
 p{width:150px;background-color:yellow;}
 h1,h2{border: none;}
</style>
<body>
<h1>aprenderaprogramar.com<br>Ejercicio CU01158E<br></h1>
<h2>hacer click sobre cualquier cuadro</h2>
 
<div id="principal">div principal
  <div id="secundario" >div secundario
    <div id="terciario" >div terciario
    <p>Ejemplo de bubbling (burbujeo)</p>
    </div>
  </div>
 
</body>

</html>

Salu2

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

Noticias: