js之事件冒泡和事件捕获（四）

1，IE只冒泡，W3c先捕获再冒泡

鉴于我自己理解事件冒泡和捕获的艰辛历程（看了数篇博文之后，我猜这个问题是不是很难~后来发现不是，难是应用到高级的功能中），我要把此文写得足够轻便，新手易懂。

为了方便测试（直接复制到html里面）：

• <script type="text/javascript">
• document.write("<div id='o' style=' 400px; height: 400px;border: 1px solid #CCCCCC'><div id='m' style=' 200px; height: 200px;border: 1px solid #CCCCCC;'><div id='i' style=' 100px;height: 100px;border: 1px solid #CCCCCC;'></div></div></div>");
• function $(id){
• return document.getElementById(id);
• }
• function altin(){
• alert("in");
• }
• function altmiddle(){
• alert("middle");
• }
• function altout(){
• alert("out")
• }
• $('o').onclick = altout;
• $('m').onclick = altmiddle;
• $('i').onclick = altin;
• </script>

这个代码很直观了，

事件冒泡（的过程）：事件从发生的目标（event.srcElement||event.target）开始，沿着文档逐层向上冒泡，到document为止。

事件捕获（的过程）：则是从document开始，沿着文档树向下，直到事件目标为止。

关键一句：在IE浏览器中，只发生事件冒泡的过程；在W3c（或支持事件捕获的）浏览器中，先发生捕获的过程，再发生冒泡的过程。以上demo在IE和FF下运行并无区别，其实FF浏览器下发生了捕获过程，只是什么也没“捕获”到罢了~

想要添加一个由捕获过程触发的事件，只能这样了：

addEventListener('click',functionname,true);//将第三个参数设置为true，表明该事件时为捕获过程设置的。

再上一个demo：

• <script type="text/javascript">
• document.write("<div id='o' style=' 400px; height: 400px;border: 1px solid #CCCCCC'><div id='m' style=' 200px; height: 200px;border: 1px solid #CCCCCC;'><div id='i' style=' 100px;height: 100px;border: 1px solid #CCCCCC;'></div></div></div>");
• function $(id){
• return document.getElementById(id);
• }
• function altin(){
• alert("in");
• }
• function altmiddle(){
• alert("middle");
• }
• function altout(){
• alert("out")
• }
• $('o').onclick = altout;
• //$('m').onclick = altmiddle;
• $('m').addEventListener('click',altmiddle,true);
• $('i').onclick = altin;
• </script>

这个就不能在IE下运行了~

2.把事件捕获和冒泡的过程统称为事件的传播

事件的传播是可以阻止的：

• 在W3c中，使用stopPropagation（）方法
• 在IE下设置cancelBubble = true；

在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~

3.阻止事件的默认行为，例如click <a>后的跳转~

• 在W3c中，使用preventDefault（）方法；
• 在IE下设置window.event.returnValue = false;

4.哇，终于写完了，一边测试一边写的额，不是所有的事件都能冒泡，例如：blur、focus、load、unload，（这个是从别人的文章里摘过来的,我没测试）。事件冒泡和捕获应用起来，还有各种问题，再研究了。