jQuery中四种事件监听的区别

原文链接：点我

我们知道jquery提供了四种事件监听方式，分别是bind、live、delegate、on,下面就分别对这四种事件监听方式分析。

已知有4个列表元素:

　　列表元素1

　　列表元素2

　　列表元素3

　　列表元素4

1.bind

bind(type,[data],function(eventObject)) bind是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数，

参数函数如下：

type:事件类型，如click、change、mouseover等；

data:传入监听函数的参数，通过event.data取到；

function:监听函数，可传入event对象，这里的event是jquery封装的event对象。

源码:

1 bind: function( types, data, fn ) {
2 
3 return this.on( types, null, data, fn );
4 
5 }

可以看到内部是调用了on方法。

bind的特点就是会把监听器绑定到目标元素上，有一个邦一个，在页面上的元素不会动态添加的时候使用它没有什么问题。

但如果列表中动态增加一个“列表5”，点击它是没有反应的，必须再bind一次才行。

测试代码：

 1 $(function(){
 2 $('div').bind('click',function(){    
 3 if($(this).text()=='列表4'){
 4 $(this).after('<div>列表5</div>');
 5 }
 6 alert($(this).text());
 7 })
 8 })

注意：jquery中append()和after()方法都可以添加元素，不同之处是append()是在要添加元素的末尾（在元素内）添加，而after()是在要添加的元素之后（在元素外）。

2.live

live(type, [data], fn)

live的参数和bind一样，它又有什么蹊跷呢，我们还是先瞄一眼源码：

1 live: function( types, data, fn ) {
2 
3 jQuery( this.context ).on( types, this.selector, data, fn );
4 
5 return this;
6 }

可以看到live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了。

通过 live() 方法添加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）,

使用事件委托的优点一目了然，新添加的元素不必再绑定一次监听器。

将上面代码中的bind改为live后，点击列表5就可以弹出“列表5”了。

注意：live方法在在 jQuery 版本 1.7 中被废弃，在版本 1.9 中被移除，官方建议使用on代替。

测试代码：

1 $(function(){
2 $('div').live('click',function(){    
3 if($(this).text()=='列表4'){
4 $(this).after('<div>列表5</div>');
5 }
6 alert($(this).text());
7 })
8 })

3.delegate
将监听事件绑定在就近的父级元素上，
源码:

1 delegate: function( selector, types, data, fn ) {       
2 
3  return this.on( types, selector, data, fn );
4 }

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，

并规定当这些事件发生时运行的函数。
这下，我们的选择又多了一些灵活性，不单可以利用事件委托，还可以选择委托的对象。
代码，实现效果，点击div，两个p标签的文字颜色都发生变化。1 <div>

>
3 </div>
4 <p>div外的p标签</p>

5 $(function(){
6 $('div').delegate('p','click',function(){    
7 $('p').css('color','blue');
8 });

4、on
on(type,[selector],[data],fn)
参数与delegate差不多但还是有细微的差别，首先type与selector换位置了，其次selector变为了可选项。
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。
代码，实现效果同上，把delegate改为on，第一个参数为click，第二个参数p可写可不写，第三个参数同上。

1 $(function(){
2 $('div').on('click','p',function(){    
3 $('p').css('color','red');    
4 });

jQuery中四种事件监听的区别

相关推荐