在綁定事件中淆衷,目前有on(), bind(), delegate(), live()四種綁定方式,有些方式只能對已知元素進行綁定缸榄,對于未知動態(tài)的元素獲取就沒有辦法。
bind()方式綁定
? ? bind()的事件綁定是只對當(dāng)前頁面選中的元素有效祝拯。如果你想對動態(tài)創(chuàng)建的元素bind()事件甚带,是沒有辦法達到效果的。
on()事件綁定
① 使用on進行單事件綁定
$("button").on("click",function(){
$(this) 取到當(dāng)前調(diào)用事件函數(shù)的對象
console.log($(this).html());
});
?② 使用on同時為多個事件佳头,綁定同一函數(shù)
$("button").on("mouseover click",function(){
console.log($(this).html())
})鹰贵;
③ 調(diào)用函數(shù)時,傳入自定義參數(shù) ??????這個用法可以動態(tài)的為html還未加載出來的數(shù)據(jù)進行事件綁定
$("button").on("click",{name:"liuJian"},function(event){
使用event.data.屬性名 找到傳入的參數(shù)
console.log(event.data.name);
})
④ 使用on進行多事件多函數(shù)綁定??????
$("button").on({
click:function(){
console.log("click")
},
mouseover:function(){
console.log("mouseOver")
}
});
⑤ 使用on進行事件委派??????????常用的動態(tài)綁定事件
? 將原本需要綁定到某元素上的事件康嘉,改為綁定在父元素乃至根節(jié)點上碉输,然后委派給當(dāng)前元素生效;
eg:$("p").click(function(){});
?$(document).on("click","p",function(){});
// document是指在全頁面的根結(jié)點上做操作亭珍,這樣一來頁面不管怎么樣子節(jié)點選擇都不會綁定失敗
// 默認的綁定方式敷钾,只能綁定到頁面初始時已有的p元素,當(dāng)頁面新增p元素時肄梨,無法綁定到新元素上
// 使用事件委派方式阻荒,當(dāng)頁面新增元素時,可以為所有新元素綁定事件
附文:
off() 取消事件綁定
1. $("p").off(): 取消所有事件
2. $("p").off("click"): 取消點擊事件
3. $("p").off("click mouseover"):取消多個事件
4. $(document).off("click","p"):取消事件委派