首頁 > web前端 > js教程 > 事件冒泡是什麼如何用jquery阻止事件冒泡_jquery

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

WBOY
發布: 2016-05-16 17:39:48
原創
948 人瀏覽過
(1)什麼是事件起泡
首先你要明白一點,當一個事件發生的時候,該事件總是有一個事件源,即引發這個事件的對象,一個事件不能憑空產生,這就是事件的發生。

當事件發生後,這個事件就要開始傳播。為什麼要傳播呢?因為事件源本身並沒有處理事件的能力。例如我們點擊一個按鈕時,就會產生一個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;
   } );取消預設的行為。
jQuery 程式碼:
複製程式碼 程式碼如下:


程式碼如下:


$("form") .bind(
  "submit",
  function(event){
    event.preventDefault();
 〜} jQuery 程式碼:
複製程式碼 程式碼如下:


程式碼如下:


$("form") .bind(
  "submit",
  function(event){
    event.stopPropagation();
   )關於js事件起泡的驗證 今天這個問題主要涉及到幾個關鍵字:對象,觸發事件,捕獲事件,執行處理、起泡。這其實就是整個js執行的過程。其中冒泡這個過程很有意思。其實就像是一杯水,但這杯水是分層次的,最底下是目前觸發事件的物件。然後越往上範圍越大,最頂層一定是window,倒數第二層是document。氣泡在上浮過程中會判斷目前所到達的層有沒有綁定事件處理方法。有話就執行對應的處理。沒有的話就繼續起泡。直到到達最頂層的window視窗層。我們可以在任何一層做相應的處理以防止事件繼續起泡。方法就是呼叫事件物件的阻止起泡的方法。 event.stopPropagation();下面是寫的一個驗證js事件起泡的過程方法。

複製程式碼 程式碼如下:



one

two

three




(4)总结
1.一个事件起泡对应触发的是上层的同一事件
  特殊:如果two设置成双击事件,那么在你单击two的时候就会起泡触发one单击的事件
  (双击包含单击)。
2.如果在click事件中,在你要处理的事件之前加上e.preventDefault();
 那么就取消了行为(通俗理解:相当于做了个return操作),不执行之后的语句了。
3.e.stopPropagation()只要在click事件中,就不会触发上层click事件。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板