Event bubbling not happen in IFrame

Question

I am thinking this is innocent question but really i don't know the answer still yet.

We all know that Event bubbling directs an event to its intended target, it works like this: A button is clicked and the event is directed to the button. If an event handler is set for that object, the event is triggered. If no event handler is set for that object, the event bubbles up (like a bubble in water) to the objects parent.

Html part

<div>
  <iframe>
    <a>Clickable fdf Area</a>
  </iframe>
</div>

javascript part

    $('div iframe').load(function(){
    var iframeBody = $(this).contents().find("body");
  iframeBody.html("<a href='www.google.com'>clickable area</a>");
  iframeBody.on("click", "a", function(){
    alert(22222);
  });
 document.getElementsByTagName("div")[0].addEventListener("click", function(event){
        alert(11111);
 }, true);

});
$('iframe').attr("src","JavaScript:'iframe content'");

My question is clear. when I try to click on the iframe 'a' tag why i am not getting the alert(11111)? why the event bubbling is not held and what are the ways to access the event buubling through the code?

also reference Fiddle link

Answer 1

Bubbling is specced to happen only through a single document tree. The iframe is a separate document tree, and so events that bubble through its tree terminate at the root of the iframe's document and do not travel across the boundary into the host document.

Capture operates from the top of the tree, generally the Document, downward

~ Document Object Model Events: 1.2.2. Event capture

This upward propagation will continue up to and including the Document.

~ Document Object Model Events: 1.2.3. Event bubbling