整理一下jQuery中的事件绑定的方法： 我使用过了和了解的 有 bind 、on 、live 、delegate 、one 剩下的就没有用过了，现在整理一下这几种方式的异同：
1、bind方法
bind方法应该是使用率比较高的事件绑定方法了，作用就是给选择到的元素绑定事件监听函数
$('div').bind('click',fn) 因为jQuery自带循环机制 ，所以用选择器选到的元素都会绑定当click事件 ，bind事件和 原生中的 oDiv.click = fn ,类似，原理基本相同。 bind的特点就是会把监听器绑定到目标元素上，有一个绑一个，在页面上的元素不会动态添加的时候使用它没什么问题。但是如果是js动态添加元素的时候，新添加的元素上将不会绑定事件比如说：
<body> <div>1</div> <div>2</div> <div>3</div> <!--<div>动态添加的</div>--> </body> <script src="jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> (function() {('div').bind('click', function() { console.log((this).html()) }); vardiv = ('<div></div>');div.html('动态添加的') ('body').append(div); }) </script>
这样的话最后添加的DIV 上就没有绑定事件，为啥呢？ 看一下jQuery的bind的方法的源码就知道 bind的方法的实现是使用on 方法来完成的，那on方法又是什么原理，稍后总结。
但是在项目中不可能说是我的页面上的元素都是静态写好的，大多数都是动态生成的，所以说bind 的功力就显得不足的，这时候就引出了live方法
2、live方法
live方法和bind功能相同都是给元素上绑定事件方法，但是live可以解决bind动态添加的元素上不能绑定事件的弊端，其实原理很简单，看一下jQuery的关于live方法的源码（jq1.7以下里面才有）
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}
可以看到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:选择器字符串，用于过滤器触发事件的元素。
$(function() {
$('body').delegate('div','click', function() {
console.log($(this).html())
});
var $div = $('<div></div>');
$div.html('动态添加的')
$('body').append($div);
console.log($('div').context)
})
这样就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只能为元素绑定一次事件。
文章评论