jQuery學習筆記之jQuery的事件
更新時間:2010年12月22日 14:37:24 作者:
事件總是由內(nèi)層開始執(zhí)行,一直到最外層,不單擊了那個對象,所有包含了此對象的對象所綁定的事件都將執(zhí)行一次,這是我們不愿意看到的,jQuery給我們定義了一些阻止事件執(zhí)行的方法。
一.事件綁定
1.事件綁定函數(shù)
事件的綁定函數(shù)為如下形式:
.bind(type [,data],fn)
type:類型 如click.....
data:參數(shù)
fn:事件執(zhí)行的函數(shù)
例子
復制代碼 代碼如下:
$(function(){
$(#id1).click(function(){
$(#id2).show();//id2顯示
}) ;
});
二.合成事件
1.鼠標滑過事件
.hover(enter,leave)
enter:鼠標光標移動到對象時觸發(fā)的函數(shù)
leave:鼠標光標移出對象觸發(fā)的函數(shù)
例子:
復制代碼 代碼如下:
$(function(){
$(#id1).hover(function(){
$(#id2).show();//id2顯示
},function(){
$(#id2).hide();//id2隱藏
}) ;
});
2.連續(xù)單擊事件
.toggle(fn1,fn2.......,fnN)
fn:單擊第一次執(zhí)行fn1,第二次fn2,以此類推
三.事件冒泡
事件總是由內(nèi)層開始執(zhí)行,一直到最外層,不單擊了那個對象,所有包含了此對象的對象所綁定的事件都將執(zhí)行一次,這是我們不愿意看到的,jQuery給我們定義了一些阻止事件執(zhí)行的方法
1.事件對象獲取
獲取事件對象的方法就是為事件執(zhí)行函數(shù)添加一個參數(shù)
$(#id1).click(function(even){});//even就是獲取到的事件對象
2.阻止事件冒泡
我們可以在事件執(zhí)行函數(shù)中加入如此啊代碼,阻止事件冒泡
even.stopPropagation();
3.阻止默認事件
瀏覽器默認事件是指,按鈕單擊后提交,單擊鏈接后打開鏈接等,jQuery也可以阻止這些默認事件的執(zhí)行
even.preventDefault();
四.獲取事件對象的屬性
even.type();//獲取事件的類型,
如:
$(#id1).click(function(even){
alert(even.type);
return false;
});//返回“click”
even.target();//獲取觸發(fā)事件的對象
even.while();獲取鼠標單擊的1=左,2=中,3=右鍵
五.移除事件
.unbind(type [,data]);
例子:
復制代碼 代碼如下:
$(function(){
$(#id1).bind("click",fn1=function(){alert(“事件1”);})
.bind("click",fn2=function(){alert(“事件2”);});
.bind("click",fn3=function(){alert(“事件3”);});
});
$("#id2").click(function(){
$(#id1).unbind("click",fn2);//刪除fn2的click事件
});
六.其他操作
1.綁定多個事件
.bind(type [,data],fn).bind(type [,data],fn)...... ;
.bind(type type..... [,data],fn) ;
2.添加事件命名空間
.bind(type.namespace [,data],fn) ;
使用時只需指定命名空間即可,如:$(#id1).unbind(".namespace")
相關(guān)文章
jquery結(jié)合css實現(xiàn)返回頂部功能
在本篇文章里小編給大家整理了一篇關(guān)于jquery結(jié)合css實現(xiàn)返回頂部功能的相關(guān)文章,有興趣的朋友們可以實例測試下。2021-08-08jquery UI Datepicker時間控件的使用及問題解決
這篇文章主要介紹了jquery UI Datepicker時間控件的使用及與asp.net中的UpdatePanel聯(lián)合使用時的失效問題解決,感興趣的小伙伴們可以參考一下2016-04-04淺析onsubmit校驗表單時利用ajax的return false無效問題
前幾天,在校驗一個表單數(shù)據(jù)用到ajax時,遇到 return false 無效問題,以下就是對這個問題進行了分析介紹,需要的朋友可以參考下2013-07-07jquery數(shù)組之存放checkbox全選值示例代碼
使用jquery數(shù)組可以存放checkbox全選值,下面有個不錯的示例,感興趣的朋友可以參考下2013-12-12