在我的上一篇博客裏，爲大家總結了事件代理的用法，傳送門：JavaScript的那些坑之事件代理。
既然提到了事件，那麼就不得不提到事件冒泡，這可是許多bug的罪魁禍首。
事件捕獲和事件冒泡
讓我們再重溫一下事件捕獲和事件冒泡，
事件捕獲階段：事件從最上一級標籤開始往下查找，直到捕獲到事件目標(target)。
事件冒泡階段：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標籤。
addEventListener
這裏不得不提到一個方法
綁定事件的對象方法；addEventListener();（IE8瀏覽器下是attachEvent();IE9及以上可以兼容addEventListener();）
addEventListener()裏含有三個參數，一個是事件名稱（event），第二個是事件執行的函數（function），最後一個是事件捕獲（true/false）。
最後一個參數的true就代表着事件捕獲，false就代表着時間冒泡。
例如：obj.addEventListener("onclick",function(){},true/false);注意：寫事件名時候要加上"on"前綴（"onload"、"onclick"等）。
阻止事件冒泡
事件冒泡是很容易出bug的，比如divA中有一個spanB，兩個容器都有各自的onclick事件，但是觸發spanB的onclick事件時候會自動冒泡，也會觸發到divA的onclick事件，如果你不想觸發divA的onclick事件的話，就需要阻止事件冒泡。就像下面的例子一樣。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>事件冒泡</title>
<style type="text/css">
#A{width: 200px;height: 200px;background-color: red;position: relative;}
#B{width: 100px;height: 100px;background-color: green;position: absolute;}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oDiv=document.getElementById('A');
var oSpan=document.getElementById('B');
oDiv.οnclick=function(ev){
var oEvent=ev||event;
oDiv.style.display='none';
}
oSpan.οnclick=function(ev){
var oEvent=ev||event;
oSpan.style.display='none';
stopEventBubble(oEvent);
}
//阻止事件冒泡的函數
function stopEventBubble(event){
var e=event || window.event;
if (e && e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
}
}
</script>
</head>
<body>
<div id="A">
<span id="B"></span>
</div>
</body>
</html>這就可以阻止span的onclick事件冒泡到div上，
如果去掉oSpan的onclick函數中的stopEventBubble(oEvent);這句話就會沒有阻止事件冒泡，什麼後果，大家也都能猜得出來把~
阻止事件冒泡不僅僅可以採用stopPropagation();方法，還可以採用preventDefault();方法阻止瀏覽器的默認事件，用法和stopPropagation();也是一樣的~
