jQuery—綁定事件
文章目錄
一窜觉、最常用方法
$(“選擇器”).事件名稱(chēng)(匿名函數(shù))
舉例1：
//這里的button為元素選擇器，click為鼠標(biāo)點(diǎn)擊事件
$("button").click(function(){
//函數(shù)內(nèi)容
})
舉例2：
//這里的#btn1為id選擇器即id名為btn1的元素,mouseenter為鼠標(biāo)聚焦事件
$("#btn1").mouseenter(function(){
//函數(shù)內(nèi)容
})
舉例3：
//這里的.ps為類(lèi)選擇器即class名為ps的所有元素北专，mouseleave為鼠標(biāo)離焦事件
$(".ps").mouseleave(function(){
//函數(shù)內(nèi)容
})
二禀挫、bind函數(shù)
$(“選擇器”).bind({“事件名稱(chēng)”:匿名函數(shù)})
舉例1：
//button為元素選擇器，bind的中文意思為‘綁定’
$("button").bind({"click":function(){
//函數(shù)內(nèi)容
}})
舉例2：
//這里的#btn1為id選擇器即id名為btn1的元素拓颓，mouseenter為鼠標(biāo)聚焦事件
$("#btn1").bind({"mouseenter":function(){
//函數(shù)內(nèi)容
}})
舉例3：
//這里的.ps為類(lèi)選擇器即class名為ps的所有元素语婴，mouseleave為鼠標(biāo)離焦事件
$(".ps").bind({"mouseleave":function(){
//函數(shù)內(nèi)容
}})
注：這里的bind函數(shù)參數(shù)為一個(gè)大括號(hào)包裹的字典，key值為雙引號(hào)下的事件名稱(chēng)驶睦，value值為函數(shù)內(nèi)容砰左，一定一定一定要注意格式。
三啥繁、on函數(shù)
兩個(gè)形參
$(“選擇器”).on(“事件名稱(chēng)”,匿名函數(shù))
舉例：
$("button").on("click",function(){
//函數(shù)內(nèi)容
})
注：含有兩個(gè)形參的on函數(shù)菜职，和bind函數(shù)使用方法類(lèi)似青抛，只是格式不同旗闽，可以一起記憶。
三個(gè)形參
含有三個(gè)參數(shù)蜜另，非常適合含有多個(gè)孩子的父節(jié)點(diǎn)使用适室，可以統(tǒng)一控制孩子節(jié)點(diǎn)事件
$(“父節(jié)點(diǎn)選擇器”).on(“事件名稱(chēng)”,“孩子節(jié)點(diǎn),即要綁定的元素”,匿名函數(shù))
舉例：
$("ul").on("click","li",function(){
$(this).css("color","blue"); //this表明當(dāng)前點(diǎn)中的對(duì)象，此語(yǔ)句表明举瑰，當(dāng)點(diǎn)擊li標(biāo)簽時(shí)候捣辆，將該li標(biāo)簽顏色變?yōu)閎lue
})
注:一定要注意含有三個(gè)參數(shù)的使用場(chǎng)景，并且注意this關(guān)鍵字的使用
四此迅、delegate函數(shù)
delegate函數(shù)有三個(gè)形參汽畴，和on函數(shù)有著相似之處，區(qū)別是參數(shù)位置不同耸序。
$(“父節(jié)點(diǎn)選擇器”).delegate(“孩子節(jié)點(diǎn),即要綁定的元素”,“事件名稱(chēng)”,匿名函數(shù))
$("ul").delegate("li","click",function(){
$(this).css("color","blue");
})
注：一定要注意這里的參數(shù)排列順序和on函數(shù)的參數(shù)排列順序不同忍些。
五、總結(jié)
縱觀上面的綁定事件坎怪，可以發(fā)現(xiàn)罢坝，不同的綁定事件只是換了一個(gè)關(guān)鍵字以及相對(duì)應(yīng)的參數(shù)列表；
它們共有的都是$("選擇器").函數(shù)名(參數(shù)列表)搅窿；參數(shù)列表內(nèi)容無(wú)外乎為事件名稱(chēng)嘁酿，和匿名函數(shù)隙券，或者是子節(jié)點(diǎn)選擇器，
這里的匿名函數(shù)闹司，實(shí)際上就是一個(gè)存放代碼體的地址娱仔，相當(dāng)于參數(shù)是一個(gè)地址，只是為了減少代碼量游桩，直接將函數(shù)地址用匿名函數(shù)的形式代替了需五。
| 模板 | |
|---|---|
| 最常用 | $(“選擇器”).事件名稱(chēng)(匿名函數(shù)) |
| bind函數(shù) | $(“選擇器”).bind({“事件名稱(chēng)”:匿名函數(shù)}) |
| on函數(shù)(兩參數(shù)) | $(“選擇器”).on(“事件名稱(chēng)”,匿名函數(shù)) |
| on函數(shù)(三參數(shù)) | $(“父節(jié)點(diǎn)選擇器”).on(“事件名稱(chēng)”,“孩子節(jié)點(diǎn),即要綁定的元素”,匿名函數(shù)) |
| delegate函數(shù) | $(“父節(jié)點(diǎn)選擇器”).delegate(“孩子節(jié)點(diǎn),即要綁定的元素”,“事件名稱(chēng)”,匿名函數(shù)) |
