很多初學js的或者是很少用到阻止冒泡的或者是工作了蠻久還是對js並不是那麼瞭解的童鞋，可能對stopPropagation和preventDefault的作用並不是那麼清晰，在很多小夥伴都問了之後，決定還是把這兩個小東西梳理出來。在梳理之前，我覺得我們有必要理解一下什麼是冒泡。
來，先理論知識走起來！
一、DOM事件模型
一共有3個階段：
1、捕獲：從window開始，由外向內，依次記錄各級元素綁定的事件處理函數。
強調：捕獲階段只到目標元素截止
2、目標觸發：默認實際觸發事件的元素上的處理函數先執行。
目標元素：實際觸發事件的元素
3、冒泡：按照捕獲階段反向的順序，從目標元素的上一級開始，依次執行各級父元素上的事件處理函數
注意：IE8的事件模型只有2個階段：目標觸發和冒泡。
二、什麼是事件的默認行爲
在我的理解內（若有理解不對的地方，歡迎交流，共同進步！），事件的默認行爲就是沒有用 js 定義過但是可以執行的原本就已經定義好的行爲，例如點擊 a 標籤會跳轉，點擊 type=”text” 的 input 可以輸入等等，這些都沒有用 js 去定義過什麼點擊事件或者獲取焦點事件或者其他什麼事件，但依然可以實現點擊跳轉等這些行爲，而這些就是事件的默認行爲。
三、stopPropagation
取消冒泡：執行完當前元素的事件處理函數後，阻止冒泡向上執行
四、preventDefault
取消默認行爲：阻止後續默認行爲，在函數內放前放後，對當前函數無影響
對基本的理論有大致概念之後，那麼我們現在通過一個栗子來了解它們帶來的效果。
五、栗子分析
css部分：
<style>
a{
display: inline-block;
width: 200px;
height: 100px;
background-color: #953b39;
}
span{
display: inline-block;
background-color: #abbbbb;
margin: 35px 70px;
width: 60px;
height: 30px;
font-size: 20px;
}
</style>
html部分：
<body>
<a href="http://blog.csdn.net"><span>看這裏</span></a>
</body>這是未加js的時候，效果圖爲：
現在給這個a元素和span元素分別添加點擊事件：
var a = document.getElementsByTagName("a")[0];
var span = document.getElementsByTagName("span")[0];
a.onclick = function (e) {
alert("click a");
};
span.onclick = function (e) {
alert("click span");
}此時點擊span效果依次爲：
“click span”->“click a”->跳轉頁面到http://blog.csdn.net
1、如果我們想要點擊span，不觸發a的點擊事件，也就是想要的最終效果依次爲：
“click span”->跳轉頁面到http://blog.csdn.net
那麼，我們可以在span的點擊事件中加上e.stopPropagation()，阻止點擊事件冒泡到a上，代碼如下：
span.onclick = function (e) {
e.stopPropagation();
alert("click span");
}通俗點說，如果想要點擊span不觸發它父元素（所有父元素）上面的點擊事件，可以加上e.stopPropagation()。
2、如果我們想要點擊span，不讓頁面跳轉，也就是想要的最終效果依次爲：
“click span”->“click a”
那麼，我們可以在span的點擊事件中加上preventDefault，代碼爲：
span.onclick = function (e) {
e.preventDefault();
alert("click span");
}也就是阻止了事件的默認行爲。
3、如果想要點擊span，只觸發span的點擊事件，也就是想要的最終效果爲：
“click span”
那麼，就可以把stopPropagation和preventDefault都加上，代碼爲：
span.onclick = function (e) {
e.stopPropagation();
e.preventDefault();
alert("click span");
}
（分享完畢）
最後
我的心願是
希望程序員不再頭頂禿地，而是頭頂茂密！