jQuery基礎(三)—事件篇-----事件的綁定與解綁

1、on()的多事件綁定

on()的多事件綁定
之前學的鼠標事件,表單事件與鍵盤事件都有個特點,就是直接給元素綁定一個處理函數(shù),所有這類事件都是屬于快捷處理。翻開源碼其實可以看到,所有的快捷事件在底層的處理都是通過一個"on"方法來實現(xiàn)的。jQuery on()方法是官方推薦的綁定事件的一個方法。

基本用法:.on( events ,[ selector ] ,[ data ] )
最常見的給元素綁定一個點擊事件,對比一下快捷方式與on方式的不同
$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式
最大的不同點就是on是可以自定義事件名

多個事件綁定同一個函數(shù)
$("#elem").on("mouseover mouseout",function(){ });
通過空格分離,傳遞不同的事件名,可以同時綁定多個事件

多個事件綁定不同函數(shù)
$("#elem").on({
mouseover:function(){},
mouseout:function(){}
});
通過空格分離,傳遞不同的事件名,可以同時綁定多個事件,每一個事件執(zhí)行自己的回調方法

http://js.jirengu.com/gimiqobife/1/

將數(shù)據(jù)傳遞到處理程序?????

function greet( event ) {
alert( "Hello " + event.data.name ); //Hello 慕課網(wǎng)
}
$( "button" ).on( "click", {
name: "慕課網(wǎng)"
}, greet );
可以通過第二參數(shù)(對象),當一個事件被觸發(fā)時,要傳遞給事件處理函數(shù)的

2、on()的高級用法?????

http://www.imooc.com/code/10032

3、卸載事件off()方法

根據(jù)on綁定事件的一些特性,off方法也可以通過相應的傳遞組合的事件名,名字空間,選擇器或處理函數(shù)來移除綁定在元素上指定的事件處理函數(shù)。當有多個過濾參數(shù)時,只有與這些參數(shù)完全匹配的事件處理函數(shù)才會被移除

綁定2個事件
$("elem").on("mousedown mouseup",fn)

刪除一個事件
$("elem").off("mousedown")

刪除所有事件
$("elem").off("mousedown mouseup")

快捷方式刪除所有事件,這里不需要傳遞事件名了,節(jié)點上綁定的所有事件講全部銷毀
$("elem").off()

http://js.jirengu.com/mukexivawa/1/

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 總結: 鼠標事件 1.click與dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r閱讀 1,639評論 2 10
  • (續(xù)jQuery基礎(1)) 第5章 DOM節(jié)點的復制與替換 (1)DOM拷貝clone() 克隆節(jié)點是DOM的常...
    凜0_0閱讀 1,363評論 0 8
  • 第1章 鼠標事件 1-1 jQuery鼠標事件之click與dbclick事件 用交互操作中,最簡單直接的操作就是...
    mo默22閱讀 1,296評論 0 6
  • 是什么開始?愛情變成了現(xiàn)實中無價的奢侈品!拿錢去砸都不一定能遇到所謂的真心! 世間癡男怨女真有那么多!怎么就沒有可...
    公子逸誠閱讀 325評論 3 1
  • 各位親愛的書友好:今天我們的共讀目標是《莎士比亞戲劇選》的《哈姆萊特》戲劇。 今日共讀內容:《哈姆萊特》這場戲描述...
    江離菲菲閱讀 3,788評論 4 8