js之事件冒泡和事件捕获（四）
1，IE只冒泡，W3c先捕获再冒泡
鉴于我自己理解事件冒泡和捕获的艰辛历程（看了数篇博文之后，我猜这个问题是不是很难~后来发现不是，难是应用到高级的功能中），我要把此文写得足够轻便，新手易懂。
为了方便测试（直接复制到html里面）：
- <script type="text/javascript">
- document.write("<div id='o' style='width: 400px; height: 400px;border: 1px solid #CCCCCC'><div id='m' style='width: 200px; height: 200px;border: 1px solid #CCCCCC;'><div id='i' style='width: 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='width: 400px; height: 400px;border: 1px solid #CCCCCC'><div id='m' style='width: 200px; height: 200px;border: 1px solid #CCCCCC;'><div id='i' style='width: 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，（这个是从别人的文章里摘过来的,我没测试）。事件冒泡和捕获应用起来，还有各种问题，再研究了。
最后，给我的独立博客加个链接~汗~
