事件冒泡是什么如何用jquery阻止事件冒泡_jquery

當(dāng)事件發(fā)生后，這個事件就要開始傳播。為什么要傳播呢？因?yàn)槭录幢旧聿]有處理事件的能力。例如我們點(diǎn)擊一個按鈕時，就會產(chǎn)生一個click事件，但這個按鈕本身不能處理這個事件（廢話），事件必須從這個按鈕傳播出去，從而到達(dá)能夠處理這個事件的代碼中（例如我們給按鈕的onclick屬性賦一個函數(shù)的名字，就是讓這個函數(shù)去處理該按鈕的click事件）。

當(dāng)事件在傳播過程中，找到了一個能夠處理它的函數(shù)，這時候我們就說這個函數(shù)捕捉到了這個事件。

說到這里，關(guān)鍵的問題來了，那就是一個函數(shù)是如何捕捉一個事件的呢？這就涉及到事件的冒泡了。

為了更好地理解冒泡的概念，我建議你現(xiàn)在想象一下你的面前放著一杯水，但這杯水和我們平時看到的有點(diǎn)點(diǎn)不同，它分為數(shù)層，每一層又分成一或多個區(qū)域，最頂層是我們熟悉的窗口對象（即window對象），下一層分為好幾個區(qū)域（document對象、history對象等等），而document對象的下一層又分為多個子對象。

這些對象的層次關(guān)系構(gòu)成了DOM中的對象樹。
事件的傳播是有方向的，當(dāng)點(diǎn)擊一個按鈕時所產(chǎn)生的事件從這個按鈕處開始向上傳播（就像一個水泡從杯底冒上來，這就是之所以叫事件冒泡的原因），但這個事件總是尋找特定的屬性是否有值。例如按鈕的click事件先尋找在按鈕上是否有onclick屬性的有意義的定義（即該屬性指向一個存在的函數(shù)或一段可執(zhí)行的語句），如果有，執(zhí)行這個函數(shù)或語句；然后事件繼續(xù)向上傳播，到達(dá)按鈕的上一層對象（例如一個form對象或document對象，總之是包含了按鈕的父對象），如果該對象也定義了onclick屬性，則執(zhí)行屬性的值。

所以，如果這個按鈕上面有3層（form、document、window），且這三層都定義了onclick屬性，則當(dāng)按鈕的click事件產(chǎn)生時，將會調(diào)用4個（包括按鈕本身的一個）函數(shù)或執(zhí)行4段語句。
事件的這幾個特性在0級dom中也是適用的。

（2）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() 方法只阻止一個事件起泡。
jQuery 代碼:
代碼如下:
$("form").bind(
　　"submit",
　　function(event){
　　　　event.stopPropagation();
　　}
);

（3）關(guān)于js事件起泡的驗(yàn)證
今天這個問題主要涉及到幾個關(guān)鍵詞：對象，觸發(fā)事件，捕獲事件，執(zhí)行處理、起泡。這其實(shí)就是整個js執(zhí)行的過程。其中冒泡這個過程很有意思。其實(shí)就像是一杯水，但是這杯水是分層次的，最底下是當(dāng)前觸發(fā)事件的對象。然后越往上范圍越大，最頂層肯定是window，倒數(shù)第二層是document。氣泡在上浮過程中會判斷當(dāng)前所到達(dá)的層有沒有綁定事件處理方法。有話就執(zhí)行相應(yīng)的處理。沒有的話就繼續(xù)起泡。直到到達(dá)最頂層的window窗口層。我們可以在任何一層做相應(yīng)的處理以阻止事件繼續(xù)起泡。方法就是調(diào)用事件對象的阻止起泡的方法。event.stopPropagation();下面是寫的一個驗(yàn)證js事件起泡的過程方法。
代碼如下:

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com