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