Jquery 事件冒泡

原文鏈接http://blog.163.com/chtx87_98/blog/static/654011192011830928585/

原文鏈接二：http://hi.baidu.com/armyknife/blog/item/60ddc6c378b00847b219a81b.html

（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;

　　 }

);

 

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事件起泡的過程方法。

<script type="text/javascript">

    $(document).ready(function(){

        $('.one').click(function(e){

            alert('one');

        });　　　　　　　　　　　　

        $('.two').click(function(e){        　

            alert('two');                                                 

        });                                                                          

        $('.three').click(function(e){

            alert('three');

           //阻止起泡取消下面的注釋

           // e.stopPropagation();

        });

    });

</script>

<div class="one" style="width:200px;height:200px;background:green;">

one

    <div class="two" style="width:150px;height:150px;background:yellow;">

    two

        <div class="three">

            three

        </div>

    </div>

</div>

（4）總結

1.一個事件起泡對應觸發的是上層的同一事件
　　特殊：如果two設置成雙擊事件，那么在你單擊two的時候就會起泡觸發one單擊的事件
　　（雙擊包含單擊）。

2.如果在click事件中，在你要處理的事件之前加上e.preventDefault();
　那么就取消了行為（通俗理解：相當於做了個return操作），不執行之后的語句了。

3.e.stopPropagation()只要在click事件中，就不會觸發上層click事件。

 

js的寫法：
1)停止冒泡的寫法

 

//如果提供了事件對象，則這是一個非IE瀏覽器
if ( e && e.stopPropagation )
　　// 因此它支持W3C的stopPropagation()方法
　　e.stopPropagation();
else
　　//否則，我們需要使用IE的方式來取消事件冒泡
　　window.event.cancelBubble = true;
return false;

 

2）阻止瀏覽器的默認行為

 

//如果提供了事件對象，則這是一個非IE瀏覽器
if ( e && e.preventDefault )
　　 //阻止默認瀏覽器動作(W3C)
　　e.preventDefault();
else

 

 

 

jquery的寫法：
1）return false ：In event handler ,prevents default behavior and event bubbing 。
return false 在事件的處理中，可以阻止默認事件和冒泡事件。
2）event.preventDefault()：In event handler ,prevent default event (allows bubbling) 。
event.preventDefault()在事件的處理中，可以阻止默認事件但是允許冒泡事件的發生。
3）event.stopPropagation()：In event handler ,prevent bubbling (allows default behavior).
event.stopPropagation()在事件的處理中，可以阻止冒泡但是允許默認事件的發生

 

prototype的寫法：
Event.stop(event)
用法介紹：
事件發生后，瀏覽器通常首先觸發事件發生元素上的事件處理程序，然后是它的父元素，父元素的父元素……依此類推， 直到文檔的根元素為止。這被稱為 事件冒泡，是事件傳播的最常見的方式。當處理好一個事件后， 你可能想要停止事件的傳播，不希望它繼續冒泡。
當你的程序有機會處理事件時，如果這個事件具有 默認行為，同時瀏覽器也會處理它。例如，點擊導航鏈接、 將表單提交到服務器、在一個單行文本框中按下回車鍵等等。如果對這些事件你定義了自己的處理方式， 可能會非常希望阻止相關的默認行為。