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