您好,登錄后才能下訂單哦!
今天小編給大家分享一下jquery事件冒泡是什么及怎么實(shí)現(xiàn)的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
冒泡事件就是,事件發(fā)生后,瀏覽器通常首先觸發(fā)事件發(fā)生元素上的事件處理程序,然后是它的父元素,父元素的父元素……依此類推, 直到文檔的根元素為止。冒泡事件是事件傳播的最常見的方式;當(dāng)處理好一個(gè)事件后,如果想要停止事件的傳播,不希望它繼續(xù)冒泡,就要綁定該事件的處理方法。
什么是事件冒泡
冒泡事件就是,如果在某一個(gè)對(duì)象上觸發(fā)某一類事件,那么該事件會(huì)向父級(jí)傳播,并觸發(fā)父對(duì)象上定義的同類事件。事件傳播的方向是從最底層到最頂層,類似于水泡從水底浮上來一般。
一個(gè)HTML文檔可以可視化一個(gè)DOM樹:
那么事件冒泡現(xiàn)象就可以形象的表示為下圖:
簡單來說:
事件發(fā)生后,瀏覽器通常首先觸發(fā)事件發(fā)生元素上的事件處理程序,然后是它的父元素,父元素的父元素……依此類推, 直到文檔的根元素為止。
這被稱為事件冒泡,是事件傳播的最常見的方式。當(dāng)處理好一個(gè)事件后, 你可能想要停止事件的傳播,不希望它繼續(xù)冒泡。就要綁定該事件的處理方法。
如上圖,給他們都設(shè)置一個(gè)點(diǎn)擊事件,當(dāng)點(diǎn)擊button時(shí)即觸發(fā)button的點(diǎn)擊事件時(shí)則會(huì)觸發(fā)相應(yīng)的父元素div發(fā)生點(diǎn)擊事件,再觸發(fā)body發(fā)生觸發(fā)事件,以此類推直至document或是window為止。
冒泡舉例說明
程序:
效果:
當(dāng)點(diǎn)擊three所在的紅色盒子的時(shí)候,出現(xiàn)彈框three,確定之后又出現(xiàn)彈框two再出現(xiàn)彈框one。
當(dāng)點(diǎn)擊two所在的黃色盒子的時(shí)候,出現(xiàn)彈框two,再出現(xiàn)彈框one。
當(dāng)點(diǎn)擊one所在的綠色盒子的時(shí)候,只出現(xiàn)彈框one。
即前兩種情況都發(fā)生了冒泡。
如果有人說是書寫的click事件的先后順序?qū)е碌?,但是并不是,都是?dāng)文檔加載結(jié)束后執(zhí)行的。
阻止冒泡的方法:
若想在點(diǎn)擊two之后阻止后面繼續(xù)的冒泡,則添加以下即可
則之后出現(xiàn)彈框two不再出現(xiàn)彈框one。
jquery阻止事件起泡實(shí)例
1、通過返回false來取消默認(rèn)的行為并阻止事件起泡。
jQuery 代碼:
$("form").bind(
"submit",
function() {
return false;
}
);
2、通過使用 preventDefault() 方法只取消默認(rèn)的行為。
jQuery 代碼:
$("form").bind(
"submit",
function(event){
event.preventDefault();
}
);
3、通過使用 stopPropagation() 方法只阻止一個(gè)事件起泡。
jQuery 代碼:
$("form").bind(
"submit",
function(event){
event.stopPropagation();
}
);
以上就是“jquery事件冒泡是什么及怎么實(shí)現(xiàn)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。