取消事件的捕獲與冒泡
在浏覽器發展到第四代時開發團隊遇到一個很有意思的問題：頁面的哪一部分會擁有某個特定的事件？怎麼了解這個問題，舉個形象的例子，先在紙上畫多個同心圓，然後把手指向圓心，那麼問題來了，目前指的是哪個圓的圓心？
具體到我們在寫JS事件的時候，先在body裡面寫一個有範圍的div，然後在JS裡面寫div的onclick事件，同時也寫上document的onclick事件，那麼當我們點選div時，會發生什麼，下面來看看：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>event</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="div">
</div>
<script type="text/javascript">
var oDiv=document.getElementById("div");
oDiv.onmousedown = function(ev) {
var oevent = ev || event;
console.log(1);
}
document.onmousedown = function(ev) {
var oevent = ev || event;
console.log(2);
}
</script>
</body>
</html>
那麼我們點選看看列印了什麼：
可以發現兩個事件都觸發了，因為現代的浏覽器都支援事件冒泡，那麼什麼是事件冒泡，先看下面的圖：
從這不難看出，列印1和2其實是有先後的，在這無論JS事件裡面把兩個點選事件怎麼放順序，都是先列印1後列印2，是以如果兩個功能是沖突的（比如我們的div點選顯示一個圖，document點選事件是把這個圖隐藏）就會達不到我們想要的效果（點選div顯示，點選div以為的部分隐藏圖），是以我們需要進行取消事件的捕獲與冒泡（捕獲事件與這類似，也有需要取消的時候），具體隻需要在div事件裡面加上：
event.stopPropagation()；
也就是：
<script type="text/javascript">
var oDiv=document.getElementById("div");
oDiv.onmousedown = function(ev) {
var oevent = ev || event;
console.log(1);
event.stopPropagation();
}
document.onmousedown = function(ev) {
var oevent = ev || event;
console.log(2);
}
</script>
得到結果：
這樣就隻執行了div的點選而不會向上冒泡執行document的點選，也就達到萊塢我們想要的效果。（注：event.stopPropagation()類型為隻讀的function,隻有bubbles(表示事件是否冒泡）為true的時候才可以使用這個方法，單獨取消冒泡為event.cancelBubble）