jq的事件冒泡

在頁面上能夠有多個事件，也能夠多個元素響應同一件事，

事件冒泡引起的問題：

有些時候不想動用的事件，卻由於事件冒泡而觸發

解決問題：

1.事件對象

因爲IE-DOM和標準的DOM實現事件對象的方法各不相同，致使在不一樣瀏覽器上獲取事件對象變得比較困難，。針對這個問題，jq進行了必要的擴展和封裝，從而使得在什麼瀏覽器中都可以輕鬆地獲取事件對象以及事件對象的一些屬性。

在程序中，實現事件對象很是簡單，只須要爲函數添加一個參數，例：

$(element).bind('click',function(event){

　　//event:事件對象

 

})

當單擊element時，事件對象就被建立了，這個事件對象只有事件處理函數才能訪問，事件處理函數執行完畢，事件對象就會被銷燬。

 

2中止事件冒泡

中止事件冒泡能夠阻止事件中其餘對象的事件處理函數被執行。在jq中提供了stopPropagation()方法來中止事件冒泡。

 

 

3.阻止默認行爲

網頁中的元素有本身的默認行爲，例如 單擊超連接後會跳轉，點擊「提交」按鈕後表單會提交，有時須要阻止元素的默認行爲。

在jq中，提供了preventDefault()方法來阻止元素的默認行爲。

例，在項目中，常常須要驗證表單，在單擊「提交」按鈕時，驗證表單內容，

例如，某元素是不是必填字段，某元素長度是否夠6位，當表單不符合提交條件時，要阻止表單的默認行爲，（表單提交）；

$(function(){

　　$(obj).bind("click",function(){

　　var username=$("#username").val();//獲取元素的值

　　if(username=''){//判斷值是否爲空

　　　　$('#el').html('<p>文本框值不能爲空</p>');//提示信息

　　　　event.preventDefault();//阻止默認行爲（表單提交）;

　　}

})

})

 

若是想同時對事件對象中止冒泡和默認行爲，能夠在事件處理函數中返回false，這是對在事件對象上同時調用stopPropagation()和preventDefalut();

在表單的例子中，能夠把

event.preventDefalut()//阻止默認行爲

改寫成

return  false;

 

也能夠把事件冒泡例子中的

event.stopPropagation()//中止事件冒泡

改寫成

return  false;

 

 4.事件捕獲

事件捕獲和事件冒泡是兩個相反的過程，事件捕獲是從最頂端往下開始觸發。

事件捕獲並非全部的主流瀏覽器都支持，而且這個缺陷沒法經過javascript來修復，jq不支持事件捕獲，若是須要用到事件捕獲，只能用原生js;