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