js之事件冒泡和事件捕获
事件冒泡（的過(guò)程）：事件從發(fā)生的目標(biāo)（event.srcElement||event.target）開始，沿著文檔逐層向上冒泡，到document為止。
事件捕獲（的過(guò)程）：則是從document開始，沿著文檔樹向下，直到事件目標(biāo)為止。
關(guān)鍵一句：在IE瀏覽器中，只發(fā)生事件冒泡的過(guò)程；在W3C（或支持事件捕獲的）瀏覽器中，先發(fā)生捕獲的過(guò)程，再發(fā)生冒泡的過(guò)程。
想要添加一個(gè)由捕獲過(guò)程觸發(fā)的事件，只能這樣了：
addEventListener('click',functionname,true);//該方法在IE下報(bào)錯(cuò)（對(duì)象不支持此屬性或方法）
注：將第三個(gè)參數(shù)設(shè)置為true，表明該事件是為捕獲過(guò)程設(shè)置的。如果第三個(gè)參數(shù)為false，則等同onclick =functionname;
[html]?view plaincopy以上代碼執(zhí)行效果如下：
1、$('m').onclick = altmiddle;
a）當(dāng)點(diǎn)擊#i時(shí)，顯示順序?yàn)閕n,middle,out
b）當(dāng)點(diǎn)擊#m時(shí)，顯示順序?yàn)閙iddle,out
c）當(dāng)點(diǎn)擊#o時(shí)，顯示順序?yàn)閛ut
2、$('m').addEventListener('click',altmiddle,true);
a）當(dāng)點(diǎn)擊#i時(shí)，顯示順序?yàn)閙iddle,in,out
b）當(dāng)點(diǎn)擊#m時(shí)，顯示順序?yàn)閙iddle,out
c）當(dāng)點(diǎn)擊#o時(shí)，顯示順序?yàn)閛ut
3、$('m').addEventListener('click',altmiddle,false);
a）當(dāng)點(diǎn)擊#i時(shí)，顯示順序?yàn)閕n,middle,out
b）當(dāng)點(diǎn)擊#m時(shí)，顯示順序?yàn)閙iddle,out
c）當(dāng)點(diǎn)擊#o時(shí)，顯示順序?yàn)閛ut
?
把事件捕獲和冒泡的過(guò)程統(tǒng)稱為事件的傳播
事件的傳播是可以阻止的：
??在W3C中，使用stopPropagation()方法
??在IE下設(shè)置cancelBubble = true;
在捕獲的過(guò)程中stopPropagation()后，后面的冒泡過(guò)程也不會(huì)發(fā)生了~
阻止事件的默認(rèn)行為，例如click <a>后的跳轉(zhuǎn)~
??在W3C中，使用preventDefault()方法；
??在IE下設(shè)置window.event.returnValue = false;
總結(jié)
以上是生活随笔為你收集整理的js之事件冒泡和事件捕获的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 看图理解scrollTop,scroll
- 下一篇： event对象获取方法总结在google