我们知道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对象。
源码:
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}
可以看到内部是调用了on方法。
bind的特点就是会把监听器绑定到目标元素上,有一个邦一个,在页面上的元素不会动态添加的时候使用它没有什么问题。
但如果列表中动态增加一个“列表5”,点击它是没有反应的,必须再bind一次才行。
测试代码:
$(function(){
$('div').bind('click',function(){
if($(this).text()=='列表4'){
$(this).after('<div>列表5</div>');
}
alert($(this).text());
})
})
注意:jquery中append()和after()方法都可以添加元素,不同之处是append()是在要添加元素的末尾(在元素内)添加,而after()是在要添加的元素之后(在元素外)。
2.live
live(type, [data], fn)
live的参数和bind一样,它又有什么蹊跷呢,我们还是先瞄一眼源码:
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}
可以看到live方法并没有将监听器绑定到自己(this)身上,而是绑定到了this.context上了。
通过 live() 方法添加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素),
使用事件委托的优点一目了然,新添加的元素不必再绑定一次监听器。
将上面代码中的bind改为live后,点击列表5就可以弹出“列表5”了。
注意:live方法在在 jQuery 版本 1.7 中被废弃,在版本 1.9 中被移除,官方建议使用on代替。
测试代码:
$(function(){
$('div').live('click',function(){
if($(this).text()=='列表4'){
$(this).after('<div>列表5</div>');
}
alert($(this).text());
})
})
3.delegate
将监听事件绑定在就近的父级元素上,
源码: delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,
并规定当这些事件发生时运行的函数。
这下,我们的选择又多了一些灵活性,不单可以利用事件委托,还可以选择委托的对象。
代码,实现效果,点击div,两个p标签的文字颜色都发生变化。
<div>
<p>div内的p标签</p>
</div>
<p>div外的p标签</p>
$(function(){
$('div').delegate('p','click',function(){
$('p').css('color','blue');
});
4、on
on(type,[selector],[data],fn)
参数与delegate差不多但还是有细微的差别,首先type与selector换位置了,其次selector变为了可选项。
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。
代码,实现效果同上,把delegate改为on,第一个参数为click,第二个参数p可写可不写,第三个参数同上。
$(function(){
$('div').on('click','p',function(){
$('p').css('color','red');
});