在頁面上可以有多個事件,也可以多個元素響應同一件事,
事件冒泡引發的問題:
有些時候不想動用的事件,卻因為事件冒泡而觸發
解決問題:
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;