js之事件冒泡和事件捕獲 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

1,IE隻冒泡,W3c先捕獲再冒泡
鑒於我自己理解事件冒泡和捕獲的艱辛歷程(看瞭數篇博文之後,我猜這個問題是不是很難~後來發現不是,難是應用到高級的功能中),我要把此文寫得足夠輕便,新手易懂。
為瞭方便測試(直接復制到html裡面):
• <script type="text/javascript">
• document.write("<p id='o' style='width: 400px; height: 400px;border: 1px solid #CCCCCC'><p id='m' style='width: 200px; height: 200px;border: 1px solid #CCCCCC;'><p id='i' style='width: 100px;height: 100px;border: 1px solid #CCCCCC;'></p></p></p>");
• 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("<p id='o' style='width: 400px; height: 400px;border: 1px solid #CCCCCC'><p id='m' style='width: 200px; height: 200px;border: 1px solid #CCCCCC;'><p id='i' style='width: 100px;height: 100px;border: 1px solid #CCCCCC;'></p></p></p>");
• 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,(這個是從別人的文章裡摘過來的,我沒測試)。事件冒泡和捕獲應用起來,還有各種問題,再研究瞭。

 作者 鄭文亮
 

發佈留言