事件的冒泡是自下而上的触发事件，例如
<script>
window.onload = function(){
var li = document.getElementsByTagName("li");
var ul = document.getElementsByTagName("ul")[0];
document.body.onclick = function(){
alert("body被点击了")
}
ul.onclick = function(){
alert("ul被点击了")
}
for(var i = 0;i<=li.length;i++){
li[i].onclick = function (){
alert("li被点击了")
}
}
}
</script>
<body>
<h2>hello</h2>
<ul>
<li>1234</li>
<li>abcd</li>
<li>ABCD</li>
</ul>
</body>
当我们点击li时，窗口不仅仅只弹出li被点击了的提示框，而是依次弹出li被点击了，ul被点击了，body被点击了，
但是我们仅仅只想让他弹出一个li被点击了，该怎么办？
只用添加一行属性：event.cancelBubble = true;
<script>
window.onload = function(){
var li = document.getElementsByTagName("li");
var ul = document.getElementsByTagName("ul")[0];
document.body.onclick = function(){
alert("body被点击了")
}
ul.onclick = function(){
alert("ul被点击了")
}
for(var i = 0;i<=li.length;i++){
li[i].onclick = function (){
alert("li被点击了");
event.cancelBubble = true;
}
}
}
</script>
这样，就能达到我们需要的效果了。