jQuery中绑定事件的几种方法

08. 七月 2016 jQuery 0

整理一下jQuery中的事件绑定的方法: 我使用过了和了解的 有 bind 、on 、live 、delegate 、one 剩下的就没有用过了,现在整理一下这几种方式的异同:

1、bind方法
bind方法应该是使用率比较高的事件绑定方法了,作用就是给选择到的元素绑定事件监听函数

$(‘div’).bind(‘click’,fn)   因为jQuery自带循环机制 ,所以用选择器选到的元素都会绑定当click事件  ,bind事件和 原生中的 oDiv.click = fn  ,类似,原理基本相同。 bind的特点就是会把监听器绑定到目标元素上,有一个绑一个,在页面上的元素不会动态添加的时候使用它没什么问题。但是如果是js动态添加元素的时候,新添加的元素上将不会绑定事件比如说:

这样的话最后添加的DIV 上就没有绑定事件,为啥呢?  看一下jQuery的bind的方法的源码就知道  bind的方法的实现是使用on 方法来完成的,那on方法又是什么原理,稍后总结。

但是在项目中不可能说是我的页面上的元素都是静态写好的,大多数都是动态生成的,所以说bind 的功力就显得不足的,这时候就引出了live方法

2、live方法
live方法和bind功能相同都是给元素上绑定事件方法,但是live可以解决bind动态添加的元素上不能绑定事件的弊端,其实原理很简单,看一下jQuery的关于live方法的源码(jq1.7以下里面才有)

可以看到live方法并没有将事件绑定到元素上,而是将事件绑定到当前的元素的context上,那这个context又是什么呢?  实验一下:

console.log(“$(‘div’).context”)   —–> #document  ,所以说live方法是将事件绑定到了document上面,这个和原生js的事件委托原理是一样的,因为事件的冒泡机制,不管是当前元素是什么,反正最后都是冒泡到document上,所以说就可以解决js动态添加的元素上没有事件绑定的问题,但是这么好用的方法是不是就无敌了?显然是不可能的,这个live方法将元素加到了document上面,设想一下如果我的一个div有100个父级(项目中基本上不可能出现,你要是这么写,领导估计就要和你聊天喝茶谈辞职的问题了),我在最内层的div上用live加一个click事件,live方法将事件加到了document上,那我的得冒泡一直冒上去才能触发事件,性能就会差很多;还有就是如果我多个不同层级下的不同的div都用live绑定click事件,那最后传到document上的时候,document很可能就懵逼了,它不知道谁是谁了。

所以说将每一个事件都绑定到document上面是不太现实的,所以jQuery在1.7 版本之后就废除了live方法,使用一个新的方法delegate替代了live方法。

3、delegate方法
既然是取代了live方法,但是又能解决动态元素添加事件的问题,delegate的解决思路就是将事件绑定到就近的父元素上,这样性能就会提高很多

delegate(selector,[type],[data],fn)  指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

delegate 方法参数多了一个selector:选择器字符串,用于过滤器触发事件的元素。

这样就ok了,但是在选择委托对象的时候要一定注意选择最近最稳定的父级,那么什么是稳定的父级呢?

最近的父级那肯定就是离自己最近的父级了(这句废话,相当于没说),这样事件委托机制就会很快的冒泡上去,父级会很快的捕获到并进行响应;最稳定的父级就是父级最好不是动态生成的,而是本身就存在的,这样它才能时时的检测子集的事件响应。

其实bind、live、delegate 的核心都是通过on方法来说实现的,那么如此牛叉的on 方法是什么样子的?

4、on 方法
on(events,[selector],[data],fn)  首先看参数,参数selector 是可选的 ,其实如果不加selector 的话,on方法和bind 是一样的 ,加上参数selector之后和delegate方法一样,只是说参数的顺序不用而已(至于参数顺序为啥和delegate不同,小生也不知道)  。可以说其他的三个方法都可以用on来实现,并且在其内部也是用on方法来实现。 所以说官方比较推荐使用on 方法,提高效率。但是可以根据自己项目需求酌情处理嘛。

5、one方法
为每个匹配元素的一个或多个事件绑定一次性事件处理函数。通过one()函数绑定的事件处理函数都是一次性的,只有首次触发事件时会执行该事件处理函数。触发之后,jQuery就会移除当前事件绑定。

从jQ 1.7 以后 one 方法和on 方法的用法相同的(参数和使用方法等),只不过one只能为元素绑定一次事件。

 

 


发表评论

电子邮件地址不会被公开。