jQuery基础(三)—事件篇-----事件的绑定与解绑

1、on()的多事件绑定

on()的多事件绑定
之前学的鼠标事件,表单事件与键盘事件都有个特点,就是直接给元素绑定一个处理函数,所有这类事件都是属于快捷处理。翻开源码其实可以看到,所有的快捷事件在底层的处理都是通过一个"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(){}
});
通过空格分离,传递不同的事件名,可以同时绑定多个事件,每一个事件执行自己的回调方法

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

将数据传递到处理程序?????

function greet( event ) {
alert( "Hello " + event.data.name ); //Hello 慕课网
}
$( "button" ).on( "click", {
name: "慕课网"
}, greet );
可以通过第二参数(对象),当一个事件被触发时,要传递给事件处理函数的

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

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

3、卸载事件off()方法

根据on绑定事件的一些特性,off方法也可以通过相应的传递组合的事件名,名字空间,选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时,只有与这些参数完全匹配的事件处理函数才会被移除

绑定2个事件
$("elem").on("mousedown mouseup",fn)

删除一个事件
$("elem").off("mousedown")

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

快捷方式删除所有事件,这里不需要传递事件名了,节点上绑定的所有事件讲全部销毁
$("elem").off()

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,641评论 2 10
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,384评论 0 8
  • 第1章 鼠标事件 1-1 jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是...
    mo默22阅读 1,310评论 0 6
  • 是什么开始?爱情变成了现实中无价的奢侈品!拿钱去砸都不一定能遇到所谓的真心! 世间痴男怨女真有那么多!怎么就没有可...
    公子逸诚阅读 325评论 3 1
  • 各位亲爱的书友好:今天我们的共读目标是《莎士比亚戏剧选》的《哈姆莱特》戏剧。 今日共读内容:《哈姆莱特》这场戏描述...
    江离菲菲阅读 3,813评论 4 8