當事件發生后,這個事件就要開始傳播。為什么要傳播呢?因為事件源本身并沒有處理事件的能力。例如我們點擊一個按鈕時,就會產生一個click事件,但這個按鈕本身不能處理這個事件(廢話),事件必須從這個按鈕傳播出去,從而到達能夠處理這個事件的代碼中(例如我們給按鈕的onclick屬性賦一個函數的名字,就是讓這個函數去處理該按鈕的click事件)。
當事件在傳播過程中,找到了一個能夠處理它的函數,這時候我們就說這個函數捕捉到了這個事件。
說到這里,關鍵的問題來了,那就是一個函數是如何捕捉一個事件的呢?這就涉及到事件的冒泡了。
為了更好地理解冒泡的概念,我建議你現在想象一下你的面前放著一杯水,但這杯水和我們平時看到的有點點不同,它分為數層,每一層又分成一或多個區域,最頂層是我們熟悉的窗口對象(即window對象),下一層分為好幾個區域(document對象、history對象等等),而document對象的下一層又分為多個子對象。
這些對象的層次關系構成了DOM中的對象樹。
事件的傳播是有方向的,當點擊一個按鈕時所產生的事件從這個按鈕處開始向上傳播(就像一個水泡從杯底冒上來,這就是之所以叫事件冒泡的原因),但這個事件總是尋找特定的屬性是否有值。例如按鈕的click事件先尋找在按鈕上是否有onclick屬性的有意義的定義(即該屬性指向一個存在的函數或一段可執行的語句),如果有,執行這個函數或語句;然后事件繼續向上傳播,到達按鈕的上一層對象(例如一個form對象或document對象,總之是包含了按鈕的父對象),如果該對象也定義了onclick屬性,則執行屬性的值。
所以,如果這個按鈕上面有3層(form、document、window),且這三層都定義了onclick屬性,則當按鈕的click事件產生時,將會調用4個(包括按鈕本身的一個)函數或執行4段語句。
事件的這幾個特性在0級dom中也是適用的。
(2)jquery阻止事件起泡實例
1、通過返回false來取消默認的行為并阻止事件起泡。
jQuery 代碼:
代碼如下:
$("form").bind(
"submit",
function() {
return false;
}
);
2、通過使用 preventDefault() 方法只取消默認的行為。
jQuery 代碼:
代碼如下:
$("form").bind(
"submit",
function(event){
event.preventDefault();
}
);
3、通過使用 stopPropagation() 方法只阻止一個事件起泡。
jQuery 代碼:
代碼如下:
$("form").bind(
"submit",
function(event){
event.stopPropagation();
}
);
(3)關于js事件起泡的驗證
今天這個問題主要涉及到幾個關鍵詞:對象,觸發事件,捕獲事件,執行處理、起泡。這其實就是整個js執行的過程。其中冒泡這個過程很有意思。其實就像是一杯水,但是這杯水是分層次的,最底下是當前觸發事件的對象。然后越往上范圍越大,最頂層肯定是window,倒數第二層是document。氣泡在上浮過程中會判斷當前所到達的層有沒有綁定事件處理方法。有話就執行相應的處理。沒有的話就繼續起泡。直到到達最頂層的window窗口層。我們可以在任何一層做相應的處理以阻止事件繼續起泡。方法就是調用事件對象的阻止起泡的方法。event.stopPropagation();下面是寫的一個驗證js事件起泡的過程方法。
代碼如下:
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com