JS冒泡事件與事件捕獲實例詳解
更新時間：2016年11月25日 11:36:17 作者：牛逼的霍嘯林
這篇文章主要介紹了JS冒泡事件與事件捕獲,結(jié)合實例形式分析了javascript冒泡的原理與阻止冒泡的相關(guān)操作技巧,需要的朋友可以參考下
本文實例分析了JS冒泡事件與事件捕獲。分享給大家供大家參考，具體如下：
案例
<!DOCTYPE html>
<html>
<head>
<title>冒泡事件</title>
<script type="text/javascript">
window.onload = function(){
window.onclick = function(){
alert("Window"); // 頂級
};
document.onclick = function(){
alert("Document"); // 次頂級
};
document.documentElement.onclick = function(){
alert("Html"); // 次次頂級
};
document.body.onclick = function(){
alert("Body"); // 次次次頂級
};
document.getElementById("myDiv").onclick = function(){
alert("Div"); // 最先執(zhí)行，并且會傳遞到上一層。點擊兩次，則按順序執(zhí)行兩次。如果上級也有點擊事件的話
};
}
</script>
</head>
<body>
<div id="myDiv">點我</div>
</body>
</html>
小結(jié)
1.點擊myDiv。依次是Div-Body-Html-Document-Window
2.點擊其他空白地方。依次是Html-Document-Window
3.連續(xù)點擊兩次，會按順序執(zhí)行兩次
4.冒泡的前提是，父級也定義了相應(yīng)的事件
再看一個更復(fù)雜的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件捕捉</title>
<script type="text/javascript">
window.onload = function(){
window.addEventListener("click", function(){
alert("Window - true");
}, true); // true - 事件句柄在捕獲階段執(zhí)行 ,false- false- 默認(rèn)。事件句柄在冒泡階段執(zhí)行
document.addEventListener("click", function(){
alert("Document - true");
}, true);
document.documentElement.addEventListener("click", function(){
alert("Html - true");
}, true);
document.body.addEventListener("click", function(){
alert("Body - true");
}, true);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - true");
}, true);
window.addEventListener("click", function(){
alert("Window - false");
}, false); // true - 事件句柄在捕獲階段執(zhí)行 ,false- false- 默認(rèn)。事件句柄在冒泡階段執(zhí)行
document.addEventListener("click", function(){
alert("Document - false");
}, false);
document.documentElement.addEventListener("click", function(){
alert("Html - false");
}, false);
document.body.addEventListener("click", function(){
alert("Body - false");
}, false);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - false");
}, false);
window.onclick = function(){
alert("Window - click"); // 頂級
};
document.onclick = function(){
alert("Document - click"); // 次頂級
};
document.documentElement.onclick = function(){
alert("Html - click"); // 次次頂級
};
document.body.onclick = function(){
alert("Body - click"); // 次次次頂級
};
document.getElementById("myDiv").onclick = function(){
alert("Div - click"); // 最先執(zhí)行，并且會傳遞到上一層。點擊兩次，則按順序執(zhí)行兩次。如果上級也有點擊事件的話
};
}
</script>
</head>
<body>
<div id="myDiv">點我</div>
</body>
</html>
小結(jié)
1.點擊的執(zhí)行結(jié)果是
Window - true
Document - true
Html - true
Body - true
Div - true
Div - false
Div - click
Body - false
Body - click
Html - false
Html - click
Document - false
Document - click
Window - false
Window - click
2.順序與js代碼順序無關(guān)
3.就算沒有定義點擊事件，一樣可以捕獲點擊事件，只要點擊到，就能捕獲到
再次改造，阻止冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件捕捉</title>
<script type="text/javascript">
window.onload = function(){
document.addEventListener("click", function(){
alert("Document - true");
}, true);
window.addEventListener("click", function(){
alert("Window - true");
}, true); // true - 事件句柄在捕獲階段執(zhí)行 ,false- false- 默認(rèn)。事件句柄在冒泡階段執(zhí)行
document.documentElement.addEventListener("click", function(){
alert("Html - true");
}, true);
document.body.addEventListener("click", function(){
alert("Body - true");
}, true);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - true");
}, true);
window.addEventListener("click", function(){
alert("Window - false");
}, false); // true - 事件句柄在捕獲階段執(zhí)行 ,false- false- 默認(rèn)。事件句柄在冒泡階段執(zhí)行
document.addEventListener("click", function(){
alert("Document - false");
}, false);
document.documentElement.addEventListener("click", function(){
alert("Html - false");
}, false);
document.body.addEventListener("click", function(){
alert("Body - false");
}, false);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - false");
}, false);
window.onclick = function(){
alert("Window - click"); // 頂級
};
document.onclick = function(){
alert("Document - click"); // 次頂級
};
document.documentElement.onclick = function(){
alert("Html - click"); // 次次頂級
};
document.body.onclick = function(){
alert("Body - click"); // 次次次頂級
};
document.getElementById("myDiv").onclick = function(){
alert("Div - click"); // 最先執(zhí)行，并且會傳遞到上一層。點擊兩次，則按順序執(zhí)行兩次。如果上級也有點擊事件的話
event.stopPropagation(); // 阻止冒泡
};
}
</script>
</head>
<body>
<div id="myDiv">點我</div>
</body>
</html>
小結(jié)
Window - true
Document - true
Html - true
Body - true
Div - true
Div - false
Div - click
終止了，沒有后續(xù)的內(nèi)容了
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript時間與日期操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
JS按鈕倒計時并跳轉(zhuǎn)到新地址的實現(xiàn)代碼
在完成某項操作時，按鈕上有個倒計時效果，倒計時結(jié)束后，跳轉(zhuǎn)到新地址，這篇文章主要介紹了JS按鈕倒計時并跳轉(zhuǎn)到新地址,需要的朋友可以參考下2023-02-02
js正則表達(dá)式最長匹配(貪婪匹配)和最短匹配(懶惰匹配)用法分析
這篇文章主要介紹了js正則表達(dá)式最長匹配(貪婪匹配)和最短匹配(懶惰匹配)用法,結(jié)合實例形式分析了貪婪匹配與懶惰匹配的具體用法與相關(guān)注意事項,需要的朋友可以參考下2016-12-12
在開發(fā)中我們經(jīng)常會遇到對于字符串的部分取舍問題，本文主要介紹了js裁剪(分隔)字符串的三種常用方法，今天我們來看看3中常用的方法來解決這個問題，感興趣的可以一起了解一下2022-02-02
屏蔽鼠標(biāo)右鍵、Ctrl+n、shift+F10、F5刷新、退格鍵 的javascript代碼
屏蔽鼠標(biāo)右鍵、Ctrl+n、shift+F10、F5刷新、退格鍵 的javascript代碼...2007-04-04
javascript引用類型之時間Date和數(shù)組Array
引用類型的值（對象）其實就是引用類型的一個實例，接下來，通過本篇文章給大家介紹javascript引用類型之時間Date和數(shù)組Array，需要的朋友可以參考下2015-08-08
一款十分簡單的原生js實現(xiàn)的隨機點菜代碼，點擊點菜按鈕隨機點取上面菜單的菜品，可根據(jù)需求改成自己需要功能，比如說隨機點名。感興趣的朋友來參考實現(xiàn)代碼吧2019-12-12
JavaScript判斷用戶輸入的郵箱格式是否正確、判斷用戶輸入的手機號格式是否正確，下面有個不錯的示例，感興趣的朋友可以參考下2013-12-12
這篇文章主要介紹了前端JS經(jīng)典問題之跨域的解決方案,文中主要講了瀏覽器的同源策略、跨域限制以及解決跨域的幾種方法,包括CORS、JSONP和配置代理等,需要的朋友可以參考下2024-11-11
easyui給某一個單元格的內(nèi)容增加下劃線的操作方法
在EasyUI的DataGrid組件中,你可以通過自定義單元格的渲染方式來實現(xiàn)給某一個單元格的內(nèi)容增加下劃線的效果,本文給大家介紹easyui如何給某一個單元格的內(nèi)容增加下劃線,感興趣的朋友跟隨小編一起看看吧2024-08-08
這應(yīng)該是最詳細(xì)的響應(yīng)式系統(tǒng)講解了
這篇文章主要介紹了這應(yīng)該是最詳細(xì)的響應(yīng)式系統(tǒng)講解了，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07