之前學的鼠標事件,表單事件與鍵盤事件都有個特點,就是直接給元素綁定一個處理函數,所有這類事件都是屬于快捷處理。翻開源碼其實可以看到,所有的快捷事件在底層的處理都是通過一個"on"方法來實現的。jQuery on()方法是官方推薦的綁定事件的一個方法。
基本用法:.on( events ,[ selector ] ,[ data ] )
最常見的給元素綁定一個點擊事件,對比一下快捷方式與on方式的不同
$("#elem").click(function(){}) //快捷方式 $("#elem").on('click',function(){}) //on方式
最大的不同點就是on是可以自定義事件名,當然不僅僅只是如何,繼續往下看
多個事件綁定同一個函數
$("#elem").on("mouseover mouseout",function(){ });
通過空格分離,傳遞不同的事件名,可以同時綁定多個事件
多個事件綁定不同函數
$("#elem").on({ mouseover:function(){}, mouseout:function(){} });
通過空格分離,傳遞不同的事件名,可以同時綁定多個事件,每一個事件執行自己的回調方法
將數據傳遞到處理程序
function greet( event ) { alert( "Hello " + event.data.name ); //Hello 慕課網 } $( "button" ).on( "click", { name: "慕課網" }, greet );
可以通過第二參數(對象),當一個事件被觸發時,要傳遞給事件處理函數的
以上都是on方法基本用法,具體可以參考下右邊的代碼的一些使用
在代碼39行處,填入任務代碼
給 id="test1"的元素綁定一個click事件
on
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報