今天学了一个事件冒泡机制，觉得有点问题，就自己测试了一下，和大家分享下结果，有助于帮助大家更好的去理解事件冒泡机制。


举个例子：

<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 οnclick="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 οnmοuseοut="f1();">你好</a>

</div>

</div>

</body>

</html>



没错，和上面代码的差别就是把onclick改为onmouseout，怎么测试呢？

你先把鼠标放到“你好”字上，然后移出，移出到包住“你好”的div的大小范围之内，这样你就触发了，里面<a>标签的onmouseout事件，而并没触发，外面的div的onmouseout事件，测试结果是，



出乎意料，还是弹出了f1 f2 f3，也就是说，不管你是不是触发了外面父标签的事件，都会调用调用相关的函数，也就是说，冒泡机制这个名字取的很合理，是我想多了，也希望一些在教js课程的老师讲清楚点，我们这些菜鸟可能理解的不是很透彻啊，好了，谢谢大家观赏。