js的事件捕获和事件冒泡学习心得

事件捕获和事件冒泡是两种完全相反的事件模型。

比如：

    

<div id="yeye"><p id="baba">

"fdsfsdf"<a href=# id="erzi">最里面的</a></p></div>

我们做一个测试，为这个三层标签全部绑定click方法，如下

var yeye=document.getElementById('yeye');var baba=document.getElementById('baba');var erzi=document.getElementById('erzi');yeye.addEventListener("click",function(){alert("我是事件捕获到这爷爷")},true);yeye.addEventListener("click",function(){alert("我是事件冒泡到这爷爷")},false);baba.addEventListener("click",function(){alert("我是事件捕获到这爸爸")},true);baba.addEventListener("click",function(){alert("我是事件冒泡到这爸爸")},false);erzi.addEventListener("click",function(){alert("我是事件捕获到这儿子")},true);erzi.addEventListener("click",function(){alert("我是事件冒泡到这儿子")},false);

在chrome中进行测试，点击最里层的href，浏览器依次弹出6个信息框，先后分别为，我是事件捕获爷爷->我是事件捕获爸爸->我是事件捕获儿子->我是事件冒泡儿子->我是事件冒泡爸爸->我是事件冒泡爷爷

从而可以得知，事件捕获的顺序从外而内，而事件冒泡的顺序正好相反，而Dom事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束

在多个浏览器中测试，可能会得到不同的效果，可以自己尝试