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.