最近在跟學姐還有一羣小夥伴們們給老師做一個項目，第一次做真實的項目而且是特別正式的那種，最我這種菜鳥來說簡直了，各種問題都出來了，以前想不到的，甚至以前遇到的問題都跑出來了，最近發的博客可能都與解決這些問題有關，今天我來講講事件冒泡。
什麼是事件？
事件表示一件事，既然有了這件事就肯定讓它有實現的意義，這就引出了觸發。事件觸發往往是聯繫在一起的，是可以被 JavaScript 偵測到的行爲。我們往往習慣給這個事件創建函數，通過函數來實現觸發這個事件後的效果。在js庫裏有許多事件函數，你能想到的想不到的，各種各樣。但是事件冒泡又是什麼呢？
什麼是事件冒泡？
事件冒泡是指從事件目標開始往上冒泡直到最頂層的目標即document標籤。舉個例子：有一個div標籤裏有一個p標籤，二者都綁定了onclick事件，如果用戶在p上觸發了點擊事件，而p也在div中也就相應的觸發了div的點擊事件，那麼觸發的順序如何呢？就是從p開始觸發，接着是它的父元素，如果有更多的標籤都存在onclick事件，那麼就逐層往上觸發。有時候正是由於這個特性纔會出現問題。
實例
有一個table表格，有三列內容，第一列保存科目，第二列成績，第三列空白，但是表格的最後一行最後一列始終有一個增加按鈕，點擊增加按鈕新增一行並且這個按鈕只能在最後一行有。就是這個效果：
如有我這樣寫：
<!DOCTYPE html>
<html>
<head>
<title>事件冒泡</title>
<meta charset="utf-8">
</head>
<body>
<table>
<thead colspan="3">
<tr>
<td>科目</td>
<td>成績</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>C語言</td>
<td>99</td>
<td></td>
</tr>
<tr>
<td>高數</td>
<td>97</td>
<td></td>
</tr>
<tr>
<td>離散</td>
<td>94</td>
<td><input type="submit" value="增加" id="addBtn"></td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
(function(){
var btn = document.getElementById('addBtn');
btn.onclick = function()
{
var tbody = btn.parentNode.parentNode.parentNode;
var td = btn.parentNode;
var tr = document.createElement('tr');
td.innerHTML = "";
tr.innerHTML = '<td>英語</td>' +
'<td>83</td>' +
'<td><input type="submit" value="增加" id="addBtn"></td>';
tbody.appendChild(tr);
}
})();
</script>
</html>然而這個方法並不行，第一次的確可以實現效果，但之後就不行了，原因很簡單就是沒有將點擊事件綁定上去。對，我是有一個笨辦法，可以新建很多td，然後給最後一個td綁定一個點擊事件，但是如果td特別多呢，是不是顯得代碼愈加的繁瑣了。因爲上面的代碼例子是給btn也就是那個button添加的點擊事件，第一次點擊後它就消失了，所以以後再也不會被觸發這個事件了，所以我們就要想到給一個永遠不變的元素添加點擊事件，然後用來判斷是否爲addBtn這個元素，從而實現效果，這就是事件冒泡的原理。代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>事件冒泡</title>
<meta charset="utf-8">
</head>
<body>
<table>
<thead colspan="3">
<tr>
<td>科目</td>
<td>成績</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>C語言</td>
<td>99</td>
<td></td>
</tr>
<tr>
<td>高數</td>
<td>97</td>
<td></td>
</tr>
<tr>
<td>離散</td>
<td>94</td>
<td><input type="submit" value="增加" id="addBtn"></td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
(function(){
var tbody = document.getElementsByTagName('tbody')[0];
tbody.onclick = function(e){
var e = e||window.event;
if(e.target.id == "addBtn"){
var btn = document.getElementById('addBtn');
btn.parentNode.innerHTML = "";
var tr = document.createElement('tr');
tr.innerHTML = '<td>英語</td>' +
'<td>83</td>' +
'<td><input type="submit" value="增加" id="addBtn"></td>';
tbody.appendChild(tr);
}
}
})();
</script>
</html>這下就完美的實現了效果，如圖：
阻止事件冒泡
有需要事件冒泡的當然也有要阻止的情況了，比如上述的例子，我就想觸發p標籤的點擊事件而不再觸發它的父元素，這裏有一個函數叫做stopPropagation()，這個函數我在第一次博客中就談論到了，這裏就不再研究了，相信原理也很簡單的。