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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With