建站
咨詢
售后
建站咨詢
新聞中心
本篇文章和大家了解一下jquery綁定事件指的是什么。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、鄂溫克網(wǎng)絡(luò)推廣、成都微信小程序、鄂溫克網(wǎng)絡(luò)營(yíng)銷、鄂溫克企業(yè)策劃、鄂溫克品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供鄂溫克建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com
在jquery中，綁定事件的意思是將普通的時(shí)間event綁定在DOM節(jié)點(diǎn)上，當(dāng)DOM節(jié)點(diǎn)被選中時(shí)，將事件與之綁定，方便用戶提供相應(yīng)的操作；jquery中有bind、live、delegate和on四種方法來(lái)綁定事件，其中l(wèi)ive方法已經(jīng)被移除，建議使用on來(lái)綁定事件。
本教程操作環(huán)境：windows10系統(tǒng)、jquery3.6.0版本、Dell G3電腦。
jquery 綁定事件是什么意思
事件綁定：將普通的事件event綁定在DOM節(jié)點(diǎn)上，當(dāng)DOM節(jié)點(diǎn)被選中時(shí)，將事件與之綁定，方便用戶提供相應(yīng)的操作。
比如：在button按鈕上綁定click鼠標(biāo)事件，在input中綁定focusin焦點(diǎn)事件等等，具體的例如：常常在代碼中這樣寫$('.bn1').click(function(){...})就是普通的事件綁定。
擴(kuò)展：
事件委托：是指在事件綁定的基礎(chǔ)上補(bǔ)充與擴(kuò)展事件綁定，具體就是指：通過(guò)子節(jié)點(diǎn)元素綁定事件來(lái)傳遞給父元素DOM節(jié)點(diǎn)（祖先節(jié)點(diǎn)）來(lái)統(tǒng)一管理其全部后代子元素。
這樣遇到需要綁定很多事件的子元素時(shí)，就避免了很多麻煩重復(fù)綁定事件的工作，提供了訪問(wèn)效率。具體代碼$('.div').on('click','.bn2',function(){...})
jquery有四種綁定事件的方式。bind,live,delegate,on。其中l(wèi)ive已被移除，bind和delegate底層都是on實(shí)現(xiàn)的。
jquery建議我們使用on來(lái)綁定事件。除原生事件外，jquery支持綁定自定義事件。
最常用方法
$(“選擇器”).事件名稱(匿名函數(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為類選擇器即class名為ps的所有元素，mouseleave為鼠標(biāo)離焦事件$(".ps").mouseleave(function(){
//函數(shù)內(nèi)容
})bind函數(shù)
$(“選擇器”).bind({“事件名稱”:匿名函數(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為類選擇器即class名為ps的所有元素，mouseleave為鼠標(biāo)離焦事件$(".ps").bind({"mouseleave":function(){
//函數(shù)內(nèi)容
}})
注：這里的bind函數(shù)參數(shù)為一個(gè)大括號(hào)包裹的字典，key值為雙引號(hào)下的事件名稱，value值為函數(shù)內(nèi)容，一定一定一定要注意格式。
on函數(shù)
兩個(gè)形參
$(“選擇器”).on(“事件名稱”,匿名函數(shù))
舉例：
$("button").on("click",function(){
//函數(shù)內(nèi)容
})
注：含有兩個(gè)形參的on函數(shù)，和bind函數(shù)使用方法類似，只是格式不同，可以一起記憶。
三個(gè)形參
含有三個(gè)參數(shù)，非常適合含有多個(gè)孩子的父節(jié)點(diǎn)使用，可以統(tǒng)一控制孩子節(jié)點(diǎn)事件
$(“父節(jié)點(diǎn)選擇器”).on(“事件名稱”,“孩子節(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),即要綁定的元素”,“事件名稱”,匿名函數(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ú)外乎為事件名稱，和匿名函數(shù)，或者是子節(jié)點(diǎn)選擇器，這里的匿名函數(shù)，實(shí)際上就是一個(gè)存放代碼體的地址，相當(dāng)于參數(shù)是一個(gè)地址，只是為了減少代碼量，直接將函數(shù)地址用匿名函數(shù)的形式代替了。
| 模板 | |
|---|---|
| 最常用 | $(“選擇器”).事件名稱(匿名函數(shù)) |
| bind函數(shù) | $(“選擇器”).bind({“事件名稱”:匿名函數(shù)}) |
| on函數(shù) | $(“選擇器”).on(“事件名稱”,匿名函數(shù)) |
| $(“父節(jié)點(diǎn)選擇器”).on(“事件名稱”,“孩子節(jié)點(diǎn),即要綁定的元素”,匿名函數(shù)) | |
| delegate函數(shù) | $(“父節(jié)點(diǎn)選擇器”).delegate(“孩子節(jié)點(diǎn),即要綁定的元素”,“事件名稱”,匿名函數(shù)) |
以上就是jquery綁定事件指的是什么的簡(jiǎn)略介紹，當(dāng)然詳細(xì)使用上面的不同還得要大家自己使用過(guò)才領(lǐng)會(huì)。如果想了解更多，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道哦！
分享文章：jquery綁定事件指的是什么
瀏覽地址：http://www.ef60e0e.cn/article/jijddd.html
