事件的冒泡是自下而上的觸發事件，例如
<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>
這樣，就能達到我們需要的效果了。