Not printing the required output??

Not printing the required output??

Hi

Here is the code : 

<html>
<script>
var el = document.getElementById("c");
function captureOnClickA(e){
    el.innerHTML += "DIV event capture<br>";
}
function captureOnClickB(e){
    el.innerHTML += "A event capture<br>";
}
function bubblingOnClickA(e){
    el.innerHTML += "DIV event bubbling<br>";
}
function bubblingOnClickB(e){
    el.innerHTML += "A event bubbling<br>";
}
document.getElementById("a").addEventListener("click",captureOnClickA, true);
document.getElementById("b").addEventListener("click",captureOnClickB, true);
document.getElementById("a").addEventListener("click",bubblingOnClickA, false);
document.getElementById("b").addEventListener("click",bubblingOnClickB, false);
</script>
<body>
<div id="a">
    <a id="b" href=" http://www.google.com" target="_blank">google.com</a>
</div>
<p id="c"></p>
</body>
</html>

Now on running this program and clicking on  google.com ,  it should print the following on the same webpage: 

DIV event capture A event capture A event bubbling DIV event bubbling
But the above thing is not printing except google.com
Please suggest me where lies the problem

Thanks 
Varun