on方法绑定事件

转载 2016年08月30日 14:29:45

浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定。因为在此之前有 bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。

on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

替换bind()
当第二个参数'selector'为null时,on()和bind()其实在用法上基本上没有任何区别了,所以我们可以认为on()只是比bind()多了一个可选的'selector'参数,所以on()可以非常方便的替换掉bind()

替换live()
在 1.4之前相信大家非常喜欢使用live(),因为它可以把事件绑定到当前以及以后添加的元素上面,当然在1.4之后delegate()也可以做类似的事情了。live()的原理很简单,它是通过document进行事件委派的,因此我们也可以使用on()通过将事件绑定到document来达到 live()一样的效果。

live()写法

复制代码 代码如下:

$('#list li').live('click', '#list li', function() {
  //function code here.
});

on()写法

复制代码 代码如下:

$(document).on('click', '#list li', function() {
  //function code here.
});

这里的关键就是第二个参数'selector'在起作用了。它是一个过滤器的作用,只有被选中元素的后代元素才会触发事件。

替换delegate()
delegate() 是1.4引入的,目的是通过祖先元素来代理委派后代元素的事件绑定问题,某种程度上和live()优点相似。只不过live()是通过document元素委派,而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。

delegate()的写法

复制代码 代码如下:

$('#list').delegate('li', 'click', function() {
  //function code here.
});

on()写法

复制代码 代码如下:

$('#list').on('click', 'li', function() {
  //function code here.
});

貌似第一个和第二个参数的顺序颠倒了一下,别的基本一样。

总结
jQuery 推出on()的目的有2个,一是为了统一接口,二是为了提高性能,所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了,因为它已经处于不推荐使用列表了,随时会被干掉。如果只绑定一次事件,那接着用one()吧,这个没有变化。

JQuery绑定事件的四种方法

1、bind 首先,看函数调用形式:$("selector").bind(event,[data],function) 显然,data是可选的 例子: $(function(){ $("d...
  • b2997215859
  • b2997215859
  • 2016年04月15日 21:36
  • 1460

JavaScript绑定事件的方法[3种]

要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。 在JavaScript中,有三种...
  • Johnny0991
  • Johnny0991
  • 2016年06月28日 20:00
  • 6093

jQuery绑定事件的四种方式

http://www.51edu.com/it/bckf/35687.html http://blog.csdn.net/yeliping2011/article/details/7407389 ...
  • binggoogle
  • binggoogle
  • 2016年02月16日 17:22
  • 2853

js事件绑定的几种方式与on()、bind()的区别

js事件绑定的几种方式与on()、bind()的区别
  • nianzhi1202
  • nianzhi1202
  • 2016年09月11日 10:13
  • 8420

AngularJS事件绑定的使用详解

本文和大家分享的主要是AngularJS中事件绑定相关知识点,希望通过本文的分享,对大家学习和使用AngularJS有所帮助。   1.绑定事件:表达式、事件方法名;   2.绑定点击事件实例...
  • lidiya007
  • lidiya007
  • 2016年11月24日 18:14
  • 1202

怎么解决事件绑定的兼容性问题

怎么解决事件绑定的兼容性问题
  • baozhuona
  • baozhuona
  • 2016年11月26日 23:58
  • 771

如何利用一个按钮绑定两个事件

如何利用一个按钮绑定两个事件1、问题背景     一个按钮绑定两个点击事件,但是只有一个事件起作用,另一个不起作用2、实现源码 如何利用一个按钮绑定两个事件 $(do...
  • you23hai45
  • you23hai45
  • 2016年08月17日 22:57
  • 5847

jquery bind 方法一个特点(绑定多个方法到一个dom的某个事件)

目录: [TOC]jquery bind方法介绍 方法声明:bind(type,[data],fn) 方法说明:为每一个匹配元素的特定事件(eg:click)绑定一个事件处理器函数。这个事件处理函数...
  • u013887254
  • u013887254
  • 2015年05月12日 23:51
  • 2866

Angular开发(三)-关于属性绑定与事件绑定

说明:由于本人正在angular2或者说是angular4,只是把本人学习过程个人理解写出来,如果有写的不对的地方希望各位指出来,或者给我留言,相互学习。本人QQ:332904234 一、新建一个项目...
  • kuangshp128
  • kuangshp128
  • 2017年05月02日 20:42
  • 4587

Unity4.6 UI按钮绑定事件(一)

Unity4.6新的UI的又称UGUI,个人感觉跟NGUI和DFGUI(Daikon Forge GUI)有很多相似之处,可视化创建以及关联事件确实很方便,动态创建可以利用创建好的prefab进行实例...
  • narutojzm1
  • narutojzm1
  • 2016年03月19日 17:44
  • 904
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:on方法绑定事件
举报原因:
原因补充:

(最多只允许输入30个字)