JS Event Propagation

by Tika Datta Pahadi

HTML

<div id="grand">
    Grand
    <div id="parent">
        Parent
        <div id="child">
            Child
        </div>
        Parent
    </div>
    Grand
</div>
<button onclick="$('code').html('')">Reset</button><br />
<code>
</code>

CSS

div{
    padding:20px;
    border:5px solid black
}

JavaScript

/*
$("#child").click(function(){ $("code").append("F1 fired<br />") });
$("#child").click(function(){ $("code").append("F2 fired<br />") });
$("#parent").click(function(){ $("code").append("F3 fired<br />") });
$("#parent").click(function(){ $("code").append("F4 fired<br />") });
$("#grand").click(function(){ $("code").append("F5 fired<br />") });
$("#grand").click(function(){ $("code").append("F6 fired<br />") });
*/

$("#child").click(function(){$("code").append("F1 fired<br />");});
$("#child").click(function(e){ 
    $("code").append("F2 fired<br />");
    e.stopPropagation();
});
$("#parent").click(function(){ $("code").append("F3 fired<br />") });
$("#parent").click(function(){ $("code").append("F4 fired<br />") });
$("#grand").click(function(){ $("code").append("F5 fired<br />") });
$("#grand").click(function(){ $("code").append("F6 fired<br />") });