Studio eventi fra padri, figli e bolle...

Creiamo un elemento e un elemento figlio.

function main(){
 elemento=document.createElement("div");
 elemento.className="classe1";
 document.body.appendChild(elemento);
 
 figlio=document.createElement("div");
 figlio.className="classe2";
 elemento.appendChild(figlio);
}

In base alle impostazioni del foglio di stile, ho ottenuto un quadrato più grande con all'interno un quadratino "figlio" più piccolo, sito in alto e a sinistra.

Con questa aggiunta, io "attacco un evento" all'elemento padre, dicendo che allo scattare di quell'evento l'elemento origine dell'evento deve diventare blu.
Vediamo che succede.

window.onload=main;
function main(){ 
 elemento=document.createElement("div");
 elemento.className="classe1";
 document.body.appendChild(elemento);
 
 figlio=document.createElement("div");
 figlio.className="classe2";
 elemento.appendChild(figlio);
 elemento.attachEvent("onmousedown",function(){event.srcElement.style.backgroundColor="blue"});
}

Ecco: se io clicco sul "padre", l'evento viene recepito dal padre, cui è "attaccato" l'evento, e diventa blu il padre, che è l'"elemento origine" dell'evento.
Ma se io clicco sul "figlio", l'evento viene recepito anche dal padre, perchè bubbla, ma diventa blu il figlio, perchè stavolta l'elemento origine dell'evento è lui.