Jake based on your explanation I was able to construct an example which highlights the key points that I could not grasp. I am sure this is more to this but this may help someone who is trying to understand basic bubbling of events: View this in Chrome Dev Tools
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bubbling Up</title>
<style>
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<h1>Heading One <p>A para with bolded text in it <strong>bold para text <i>and click me</i></strong>.</p></h1>
<script>
var cnt=0;
// Register click handlers for each node so i, strong , p , h1, body are clickable
// It seems body is NOT clickable - not sure why
$('i, strong, p, h1,body').click(function(e){
console.log("TEXT AT THIS NODE= ",$(this).text()," ORIGINAL EVENT =",e.target, " CURRENT TARGET =", event.currentTarget, " NUMBER OF BUBBLE UP PHASES THAT TOOK PLACE = ", ++cnt-1);
// add a class of howdy to current target so if h1 happens to be the current target add the class howdy
$(event.currentTarget).addClass("howdy");
console.log( " JUST ADDED HOWDY CLASS TO" , e.currentTarget , "AND THE CNT = ", cnt);
// And the howdy class gets added to i , strong, p , h1 , body ONLY IF the click on i takes place.
//But here is the caveat, if say p is clicked then since i and strong are lower in the DOM tree then the howdy class never gets applied to i and strong.
})
</script>
</body>
</html>
Update: For some reason the body never console.logs as being the target of the click event, not sure why?
Jim