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.把事件捕获和冒泡的过程统称为事件的传播

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

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

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

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