JavaScript事件冒泡機制原理實例解析
這篇文章主要介紹了JavaScript事件冒泡機制原理實例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
DOM事件流（event flow ）存在三個階段：事件捕獲階段、處于目標(biāo)階段、事件冒泡階段，事件冒泡順序是由內(nèi)到外進(jìn)行事件傳播，事件冒泡是由IE開發(fā)團(tuán)隊提出來的，即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節(jié)點）接收，然后逐級向上傳播。
聽了簡介介紹之后，您可能不理解，所以舉個例子：
<html>
<head>
<title>js事件冒泡測試</title>
</head>
<body>
<div id='content' onclick='alert("content")'>
<div id='div' onclick='alert("div");'>
<ul onclick='alert("ul");'>
<li onclick='alert("li");'>test</li>
</ul>
</div>
</div>
</body>
</html>
點擊test頁簽，會依次執(zhí)行l(wèi)i的onclick、ul的onclick、div的onclick，content的onclick，從內(nèi)到外執(zhí)行，所以這個就是冒泡事件的簡單例子
最近也遇到了這種情況，所以就去網(wǎng)上搜索資料，簡單學(xué)習(xí)一下，就是點擊一個按鈕的時候，竟然觸發(fā)了兩次，通過排查，發(fā)現(xiàn)了冒泡機制導(dǎo)致的，解決方法是禁用事件冒泡機制
w3c的方法是e.stopPropagation()，IE則是使用e.cancelBubble = true
$(element).click(function(e){
e.stopPropagation();//ie e.cancelBubble = true
});
當(dāng)然除了冒泡機制會導(dǎo)致onclick被調(diào)用兩次外，事件被綁定2次的情況也有可能，解決方法是解除事件，然后再綁定
$(element).unbind('click').click(function() {
// todo
})
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- javascript 中事件冒泡和事件捕獲機制的詳解
- javascript事件捕獲機制【深入分析IE和DOM中的事件模型】
- js事件監(jiān)聽機制(事件捕獲)總結(jié)
- Javascript 事件冒泡機制詳細(xì)介紹
- js點擊事件的執(zhí)行過程實例分析【冒泡與捕獲】
- javascript事件冒泡詳解和捕獲、阻止方法
- js冒泡、捕獲事件及阻止冒泡方法詳細(xì)總結(jié)
- js事件冒泡、事件捕獲和阻止默認(rèn)事件詳解
- JavaScript中捕獲/阻止捕獲、冒泡/阻止冒泡方法
- JS中綁定事件順序（事件冒泡與事件捕獲區(qū)別）
- javascript事件冒泡和事件捕獲詳解
- js事件機制----捕獲與冒泡機制實例分析
相關(guān)文章
bootstrap Validator 模態(tài)框、jsp、表單驗證 Ajax提交功能
這篇文章主要介紹了bootstrap Validator 模態(tài)框、jsp、表單驗證 Ajax提交功能的實現(xiàn)代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-02-02
在同一窗口瀏覽圖片的方法有很多，本例要為大家介紹的是使用js獲取img的src屬性后進(jìn)行替換2014-09-09
js實現(xiàn)二級菜單點擊顯示當(dāng)前內(nèi)容效果
這篇文章主要介紹了js實現(xiàn)二級菜單點擊顯示當(dāng)前內(nèi)容效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
使用Javascript實現(xiàn)復(fù)制粘貼功能的示例代碼
本篇文章記錄如何通過js代碼實現(xiàn)復(fù)制內(nèi)容到剪切板,之后可以粘貼到需要的地方的功能,文中通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了WordPress中利用AJAX異步獲取評論用戶頭像的方法,文中的例子是輸入郵箱即可獲取頭像,需要的朋友可以參考下2016-01-01
實現(xiàn)圖片首尾平滑輪播(JS原生方法—節(jié)流)
下面小編就為大家?guī)硪黄獙崿F(xiàn)圖片首尾平滑輪播(JS原生方法—節(jié)流)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
用js獲取本地電腦信息（但是只能在IE瀏覽器下才行，其他瀏覽器其獲取不到的）2013-01-01
我們大家都知道，對于一個網(wǎng)站最占用帶寬，最影響頁面顯示速度的東西就是圖片。圖片是很重要的，作為一個站長我們是千方百計的使用各種技巧來優(yōu)化圖片，但其實有一種簡單的方法，只需要幾行代碼就能達(dá)到這種效果。同時還附加一種淡入淡出的顯示效果，下面一起來看看。2016-08-08
Bootstrap Metronic完全響應(yīng)式管理模板之菜單欄學(xué)習(xí)筆記
這篇文章主要介紹了Bootstrap Metronic完全響應(yīng)式管理模板之菜單欄學(xué)習(xí)筆記，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章介紹了JS操作Cookies的小例子，有需要的朋友可以參考一下2013-10-10