Event bubbling is triggered from the inside to the outside, that is, clicking on the child node will trigger the parent node, the click event of the ancestor node
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4-4-1</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content {
width: 220px;
border: 1px solid #0050D0;
background: #96E555;
}
span {
width: 200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p {
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script src="../scripts/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function () {
// Binding the Click event for a SPAN element
$('span').bind("click", function () {
$("#msg").append("<p>The inner span element is clicked.<p/>")
});
// Binding the Click event for a DIV element
$('#content').bind("click", function () {
$("#msg").append("<p>The outer div element is clicked.<p/>")
});
// Bind the Click event to the BODY element
$("body").bind("click", function () {
$("#msg").append("<p>The BODY element is clicked.<p/>")
});
})
</script>
</head>
<body>
<div id="content">
Outer DIV Element
<span>Inner SPAN element</span> Outer DIV Element
</div>
<div id="msg"></div>
</body>
</html>
When the inner span event is clicked, the outer div event and body are also executed.