今天學了一個事件冒泡機制，覺得有點問題，就自己測試了一下，和大家分享下結果，有助於幫助大家更好的去理解事件冒泡機制。
舉個例子：
<html>
<head>
<script>
function f1(){
alert('f1');
}
function f2(){
alert('f2');
}
function f3(){
alert('f3');
}
</script>
</head>
<body >
<div style="background-color:red; width:200px; height:200px;">
<div style="background-color:blue; width:100px; height:100px;">
<a onclick="f1();">你好</a>
</div>
</div>
</body>
</html>
你點擊“你好”後，會彈出小框f1，然後彈出f2 f3，然後說，當子標籤產生一個事件後，後冒泡一樣向上傳遞，調用所有onclick的方法。
但是，仔細想下，你會發現一個問題，當你點擊了“你好”，其實你也點擊了包住了“你好”的父標籤，也就是上面的那個div標籤，同時也是點擊了包住div標籤的父標籤，也就是另一個div。所以我就想，其實不是所謂的冒泡，而是，你觸發了多個標籤的相同事件罷了。
所以，我接下來不用 ，下面看例子。
<html>
<head>
<script>
function f1(){
alert('f1');
}
function f2(){
alert('f2');
}
function f3(){
alert('f3');
}
</script>
</head>
<body >
<div style="background-color:red; width:200px; height:200px;">
<div style="background-color:blue; width:100px; height:100px;">
<a onmouseout="f1();">你好</a>
</div>
</div>
</body>
</html>
沒錯，和上面代碼的差別就是把onclick改爲onmouseout，怎麼測試呢？
你先把鼠標放到“你好”字上，然後移出，移出到包住“你好”的div的大小範圍之內，這樣你就觸發了，裏面<a>標籤的onmouseout事件，而並沒觸發，外面的div的onmouseout事件，測試結果是，
出乎意料，還是彈出了f1 f2 f3，也就是說，不管你是不是觸發了外面父標籤的事件，都會調用調用相關的函數，也就是說，冒泡機制這個名字取的很合理，是我想多了，也希望一些在教js課程的老師講清楚點，我們這些菜鳥可能理解的不是很透徹啊，好了，謝謝大家觀賞。