更新時(shí)間:2021-11-12 來源:黑馬程序員 瀏覽量:
在jQuery中,實(shí)現(xiàn)事件綁定有兩種方式,一種是通過事件方法進(jìn)行綁定,另一種是通過on()方法進(jìn)行綁定,下面我們分別進(jìn)行詳細(xì)講解。
在前面的學(xué)習(xí)中,我們已經(jīng)用過了單個(gè)事件的綁定,是通過調(diào)用某個(gè)事件方法,傳入事件處理函數(shù)來實(shí)現(xiàn)的,如click()、change()等。jQuery的事件和DOM中的事件相比,省略了開頭的“on”,如jQuery中的click()對應(yīng)DOM中的onclick。并且,jQuery的事件方法允許為一個(gè)事件綁定多個(gè)事件處理函數(shù),只需多次調(diào)用事件方法,傳入不同的函數(shù)即可。
接下來我們通過下面列舉jQuery中的一些常用的事件方法。
jQuery常用事件方法 | ||
分類 | 方法 | 說明 |
表單 | blur([[data],function]) | 當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā) |
focus([[data],function]) | 當(dāng)元素獲得焦點(diǎn)時(shí)觸發(fā) | |
change([[data],function]) | 當(dāng)元素的值發(fā)生改變時(shí)觸發(fā) | |
focusin([dta],function) | 在父元素上檢測子元素獲取焦點(diǎn)的情況 | |
focusout([data],function) | 在父元素上檢測子元素失去焦點(diǎn)的情況 | |
select([[data],function]) | 當(dāng)文本框(包括<input>和<textarea>)中 的文本被選擇時(shí)觸發(fā) | |
submit([[data],function]) | 當(dāng)表單提交時(shí)觸發(fā) | |
鍵盤 | keydown([[data],function]) | 鍵盤按鍵按下時(shí)觸發(fā) |
keypress([[data],function]) | 鍵盤按鍵(Shift、Fn、CapsLOck等非 字符鍵除外)按下時(shí)觸發(fā) | |
keyup([[data],function) | 鍵盤按鍵彈起時(shí)觸發(fā) | |
鼠標(biāo) | mouseover([[data],function]) | 當(dāng)鼠標(biāo)指針移入對象時(shí)觸發(fā) |
mouseout([[data],function]) | 當(dāng)鼠標(biāo)指針從元素上離開時(shí)觸發(fā) | |
click([[data],function]) | 當(dāng)單擊時(shí)元素觸發(fā) | |
dbclick([[data],function]) | 當(dāng)雙擊元素時(shí)觸發(fā) | |
mousedown([[data],function]) | 當(dāng)鼠標(biāo)指針移動到元素上方,并按下 鼠標(biāo)按鍵時(shí)觸發(fā) | |
mouseup([[data],function]) | 當(dāng)在元素上放開鼠標(biāo)按鈕時(shí),會被觸發(fā) | |
瀏覽器 | scroll([[data],function]) | 當(dāng)滾動條發(fā)生變化觸發(fā) |
resize([[data],function) | 當(dāng)調(diào)整瀏覽器窗口的大小時(shí)會被觸發(fā) |
下面我們通過代碼演示事件方法的使用。
<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元素綁定鼠標(biāo)指針移入事件,實(shí)現(xiàn)當(dāng)鼠標(biāo)指針移入div元素時(shí),將背景色修改為天藍(lán)色。
on()方法在匹配元素上綁定一個(gè)或多個(gè)事件處理函數(shù),語法如下所示。
element.on(events, [selector], fn)
上述代碼中,events表示一個(gè)或多個(gè)用空格分隔的事件類型,如click;selector表示子元素選擇器;fn表示回調(diào)函數(shù),即綁定在元素身上的偵聽函數(shù)。
下面我們通過代碼演示on()方法的使用。
//一次綁定一個(gè)事件 $("div").on("click", function(){ $(this).css("background","yellow") }); //一次綁定多個(gè)事件 $("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()方法傳入了一個(gè)對象,對象的屬性名表示事件類型,屬性值表示對應(yīng)的事件處理函數(shù);第3種用法是同時(shí)為mouseenter、mouseleave事件綁定相同的事件處理函數(shù),實(shí)現(xiàn)div元素的current類的切換效果。
猜你喜歡