jquery事件綁定方法有哪些？

在jQuery中，實現(xiàn)事件綁定有兩種方式，一種是通過事件方法進行綁定，另一種是通過on()方法進行綁定，下面我們分別進行詳細講解。

1. 通過事件方法綁定事件

在前面的學(xué)習(xí)中，我們已經(jīng)用過了單個事件的綁定，是通過調(diào)用某個事件方法，傳入事件處理函數(shù)來實現(xiàn)的，如click()、change()等。jQuery的事件和DOM中的事件相比，省略了開頭的“on”，如jQuery中的click()對應(yīng)DOM中的onclick。并且，jQuery的事件方法允許為一個事件綁定多個事件處理函數(shù)，只需多次調(diào)用事件方法，傳入不同的函數(shù)即可。

接下來我們通過下面列舉jQuery中的一些常用的事件方法。

jQuery常用事件方法
分類	方法	說明
表單 事件	blur([[data],function])	當(dāng)元素失去焦點時觸發(fā)
	focus([[data],function])	當(dāng)元素獲得焦點時觸發(fā)
	change([[data],function])	當(dāng)元素的值發(fā)生改變時觸發(fā)
	focusin([dta],function)	在父元素上檢測子元素獲取焦點的情況
	focusout([data],function)	在父元素上檢測子元素失去焦點的情況
	select([[data],function])	當(dāng)文本框（包括<input>和<textarea>)中 的文本被選擇時觸發(fā)
	submit([[data],function])	當(dāng)表單提交時觸發(fā)
鍵盤 事件	keydown([[data],function])	鍵盤按鍵按下時觸發(fā)
	keypress([[data],function])	鍵盤按鍵（Shift、Fn、CapsLOck等非 字符鍵除外）按下時觸發(fā)
	keyup([[data],function)	鍵盤按鍵彈起時觸發(fā)
鼠標 事件	mouseover([[data],function])	當(dāng)鼠標指針移入對象時觸發(fā)
	mouseout([[data],function])	當(dāng)鼠標指針從元素上離開時觸發(fā)
	click([[data],function])	當(dāng)單擊時元素觸發(fā)
	dbclick([[data],function])	當(dāng)雙擊元素時觸發(fā)
	mousedown([[data],function])	當(dāng)鼠標指針移動到元素上方，并按下 鼠標按鍵時觸發(fā)
	mouseup([[data],function])	當(dāng)在元素上放開鼠標按鈕時，會被觸發(fā)
瀏覽器 事件	scroll([[data],function])	當(dāng)滾動條發(fā)生變化觸發(fā)
	resize([[data],function)	當(dāng)調(diào)整瀏覽器窗口的大小時會被觸發(fā)

在上表中，參數(shù)function表示觸發(fā)事件時執(zhí)行的處理函數(shù)，參數(shù)data表示函數(shù)傳入的數(shù)據(jù)，可以使用“事件對象.data”獲取。如果調(diào)用時省略參數(shù)，則表示手動觸動事件。

下面我們通過代碼演示事件方法的使用。

<div>綁定事件</div>
<script>
    $("div").click(function(){
        $(this).css("background", "purple");
    });
    $("div").mouseenter(function(){
        $(this).css("background", "skyblue");
    });
</script>

上述代碼中，第1行代碼定義了div元素。第3～5行代碼為div元素綁定單擊事件，通過第4行代碼修改當(dāng)前元素背景色為紫色。第6～8行代碼為div元素綁定鼠標指針移入事件，實現(xiàn)當(dāng)鼠標指針移入div元素時，將背景色修改為天藍色。

2.通過on()方法綁定事件

on()方法在匹配元素上綁定一個或多個事件處理函數(shù)，語法如下所示。

element.on(events, [selector], fn)

上述代碼中，events表示一個或多個用空格分隔的事件類型，如click;selector表示子元素選擇器;fn表示回調(diào)函數(shù)，即綁定在元素身上的偵聽函數(shù)。

下面我們通過代碼演示on()方法的使用。

//一次綁定一個事件
$("div").on("click", function(){
    $(this).css("background","yellow")
});

//一次綁定多個事件
$("div").on({
    mouseenter: function(){
            $(this).css("background", "skyblue");
    },
    click: function(){
        $(this).css("background", "purple");
    },
    mouseleave: function(){
        $(this).css("background", "blue");
    }
});

// 為不同事件綁定相同的事件處理函數(shù)
$("div").on("mouseenter mouseleave", function(){
    $(this).toggleClass("current");
});

上述代碼演示了on()方法的3種用法。第1種用法非常簡單，和事件方法的方式類似；第2種用法是為on()方法傳入了一個對象，對象的屬性名表示事件類型，屬性值表示對應(yīng)的事件處理函數(shù);第3種用法是同時為mouseenter、mouseleave事件綁定相同的事件處理函數(shù)，實現(xiàn)div元素的current類的切換效果。

猜你喜歡

jQuery選擇器基本語法格式和jQuery選擇器的優(yōu)勢

jQuery中attr()和prop()的區(qū)別是什么？

jQuery框架有什么特點？如何安裝jQuery？

傳智教育HTML&JS+前端開發(fā)課程