jquery綁定事件是什麼意思

在jquery中，綁定事件的意思是將普通的時間event綁定在DOM節點上，當DOM節點被選中時，將事件與之綁定，方便用戶提供相應的操作；jquery中有bind、live、delegate和on四種方法來綁定事件，其中live方法已經被移除，建議使用on來綁定事件。

本教學操作環境：windows10系統、jquery3.6.0版本、Dell G3電腦。

jquery 綁定事件是什麼意思

事件綁定：將普通的事件event綁定在DOM節點上，當DOM節點被選中時，將事件與之綁定，方便使用者提供對應的操作。

例如：在button按鈕上綁定click滑鼠事件，在input中綁定focusin焦點事件等等，具體的例如：常常在程式碼中這樣寫$('.bn1').click(function (){...})就是普通的事件綁定。

擴充功能：

事件委託：是指在事件綁定的基礎上補充與擴充事件綁定，具體就是指：透過子節點元素綁定事件來傳遞給父元素DOM節點（祖先節點）來統一管理其全部後代子元素。

這樣遇到需要綁定很多事件的子元素時，就避免了很多麻煩重複綁定事件的工作，提供了存取效率。具體程式碼$('.div').on('click','.bn2',function(){...})

jquery有四種綁定事件的方式。 bind,live,delegate,on。其中live已被移除，bind和delegate底層都是由on實現的。

jquery建議我們使用on來綁定事件。除原生事件外，jquery支援綁定自訂事件。

最常用方法

$(“選擇器”).事件名稱(匿名函數)

#範例1：

//这里的button为元素选择器，click为鼠标点击事件$("button").click(function(){
					//函数内容
				})

範例2：

//这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件$("#btn1").mouseenter(function(){
					//函数内容
				})

範例3：

//这里的.ps为类选择器即class名为ps的所有元素，mouseleave为鼠标离焦事件$(".ps").mouseleave(function(){
					//函数内容
				})

bind函數

$(“選擇器”).bind({“事件名稱”:匿名函數})

範例1：

//button为元素选择器，bind的中文意思为‘绑定’$("button").bind({"click":function(){
					//函数内容
				}})

範例2：

//这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件$("#btn1").bind({"mouseenter":function(){
					//函数内容
				}})

範例3：

//这里的.ps为类选择器即class名为ps的所有元素，mouseleave为鼠标离焦事件$(".ps").bind({"mouseleave":function(){
					//函数内容
				}})

註：這裡的bind函數參數為一個大括號包裹的字典，key值為雙引號下的事件名稱，value值為函數內容，一定一定一定要注意格式。

on函數

兩個形參

$(“選擇器”). on(“事件名稱”,匿名函數)

範例：

$("button").on("click",function(){
					//函数内容
				})

註：含有兩個形參的on函數，和bind函數使用方法類似，只是格式不同，可以一起記憶。

三個形參

含有三個參數，非常適合含有多個孩子的父節點使用，可以統一控制孩子節點事件

$(“父節點選擇器”).on(“事件名稱”,“孩子節點,即要綁定的元素”,匿名函數)

##範例:

$("ul").on("click","li",function(){
					$(this).css("color","blue");    //this表明当前点中的对象，此语句表明，当点击li标签时候，将该li标签颜色变为blue
 				})

註:一定要注意含有三個參數的使用場景，並且注意this關鍵字的使用

delegate函數

delegate函數有三個形參，和on函數有著相似之處，差異是參數位置不同。

$(“父節點選擇器”).delegate(“孩子節點,即要綁定的元素”,“事件名稱”,匿名函數)

$("ul").delegate("li","click",function(){
					$(this).css("color","blue");
				})

註：一定要注意這裡的參數排列順序和on函數的參數排列順序不同。

總結

縱觀上面的綁定事件，可以發現，不同的綁定事件只是換了一個關鍵字以及相對應的參數列表；
• 它們共有的都是
• $("選擇器").函數名(參數列表)；參數列表內容無外乎為事件名稱，和匿名函數，或者是子節點選擇器，
這裡的匿名函數，其實就是一個存放程式碼體的位址，相當於參數是一個位址，只是為了減少程式碼量，直接將函數位址用匿名函數的形式代替了。

範本最常用$(“選擇器”).事件名稱(匿名函數)bind函數$(“選擇器”).bind({“事件名稱”:匿名函數})on函數$(“選擇器”).on(“事件名稱”,匿名函數)$(“父節點選擇器”).on(“事件名稱”,“孩子節點,即要綁定的元素”,匿名函數)delegate函數$(“父節點選擇器”).delegate(“孩子節點,即要綁定的元素”,“事件名稱”,匿名函數)影片教學推薦：

jQuery影片教學

以上是jquery綁定事件是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！