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


举个例子:

<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课程的老师讲清楚点,我们这些菜鸟可能理解的不是很透彻啊,好了,谢谢大家观赏。