问题：
<div class=‘item‘ id=‘outer‘ onclick="alert(‘outer‘)">
<div class=‘item‘ id=‘inner‘ onclick="alert(‘inner‘);">
<div class=‘item‘ id=‘core‘ onclick="alert(‘core‘)">
core!!!!!
</div>
</div>
</div>
1.上面div中，如果单击core，会执行多少个alert？先后顺序是上面？
冒泡就是处理DOM节点树中，各个节点绑定事件执行流程的一种方式；
因为各浏览器软件和相关组织间的差异，事件流有三种：事件冒泡、事件捕获、DOM事件流，其中DOM事件流已被所有主要浏览器实现；
2.chorme用的是冒泡事件流方式，这个例子解释了冒泡事件流的事件执行顺序；
3. stopPropagation()是停止冒泡事件流。如果你在node A节点添加该方法，那么“泡泡“就在node A这个位置破了，其后的所有节点绑定事件都不执行；
3.同时使用了addEventListener，向某节点添加事件；
4.下面是代码，保存成html文件，看看效果；
<html>
<head>
<style type="text/css">
.item{
display: table;
margin: 100px;
}
#outer{
width:400px;
height:400px;
background-color: blue;
}
#inner{
vertical-align: middle;
width:200px;
height:200px;
background-color: white;
}
#core{
width:80px;
height:80px;
background-color: red;
text-indent: 10px;
line-height: 50px;
}
</style>
</head>
<body>
<div class=‘item‘ id=‘outer‘ onclick="alert(‘outer‘)">
<div class=‘item‘ id=‘inner‘ onclick="alert(‘inner‘);stopbubble(arguments[0])">
<div class=‘item‘ id=‘core‘ onclick="alert(‘core‘)">
core!!!!!
</div>
</div>
</div>
</body>
<!--you must write <script> under <body>-->
<script type=‘text/javascript‘>
var core = document.getElementById(‘core‘);
core.addEventListener("click",function(){alert(‘dddddd‘)},false);
//addEventListener: can add one more event to node "core"
function stopbubble(e){
e.stopPropagation();//stop bubble event on this node
}
</script>
</html>
前端效果：
点击core！！！后：
1.先alert core 因为绑定了dddd，然后会alert dddd；
2.然后冒泡到inner节点后，alert inner，但是同时执行stopbubble(arguments[0])来停止冒泡；
3.停止冒泡后，该node后续节点就不执行了，所以不会alert outer；
时间： 2024-08-07 16:59:01