jQuery提供了4种事件监听的方式,分别是bind、live、delegate、on,解除监听的函数分别是unbind、die、undelegate、off。
推荐使用on和off,live和die从1.7版后已经废弃。
bind
bind(type,data,function(e){})
type:事件类型
data:传入监听函数的数据,通过event.data获取到,可选
function:监听函数,传入event对象
特点:把监听器绑定到目标对象上,动态添加的元素不会被绑定,要给动态元素绑定一次才行。
target.click(function(){})的原理同target.bind()一样,是一种简写的形式。
<div id="wrap">
<div class="box">a</div>
<div class="box">b</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var boxs=$('.box');
$("#wrap").append('<div class="box">c</div>');
boxs.bind('click',function(){
console.log($(this).text());//回调函数中的this指的是js对象,要转为jQuery对象。
})
</script>
//点击a、b方块,都会输出,但是点击动态增加的c方块,不会输出
live
target.live(type,function(e){})
特点:把监听器绑定到document上,利用事件委托机制,动态添加的元素也能触发事件。使用事件委托,新添加的元素不必再绑定一次监听器。但因为将监听器绑定到了document上,所以事件的处理得等待层层冒泡,直到冒泡到根节点才开始处理,在DOM树较深或者节点的嵌套关系很复杂时,会有意想不到的结果,根节点的负担太重了。为此,jQuery官方宣布在1.7版本开始**废弃**live,改用其他方式代替。
delegate
target.delegate(childSelector,type,data,function(){})
特点:将监听器绑定到就近的父元素上。注意:target是父元素,childSelector是子元素。
//注意,childSelector是写一个选择器,而不是一个jQuery对象,否则会出现奇怪的错误。
var boxs=$('.box');
var wrap=$("#wrap");
$("#wrap").append('<div class="box">c</div>');
wrap.delegate(boxs,'click',function(e){
console.log(e.target);//指向触发事件的子元素
console.log(this);//#wrap
$(this).css('background-color','pink');//外方块会变色
})
var wrap=$("#wrap");
$("#wrap").append('<div class="box">c</div>');
wrap.delegate('.box','click',function(e){
console.log(e.target);//指向触发事件的子元素
console.log(this);//指向触发事件的子元素
$(this).css('background-color','pink');//点击到的内方块变色
})
on
以上的三个方法,都是调用了on方法。
target.on(type,selector,data,function)
注意type和selector交换位置。
selector:可选,可以选择任何一级子元素,不选择表示currentTarget为本身。
var wrap=$("#wrap");
$("#wrap").append('<div class="box">c</div>');
wrap.on('click','.box',function(e){
console.log(e.target);
})
//点击到.box才会触发监听函数
var wrap=$("#wrap");
$("#wrap").append('<div class="box">c</div>');
wrap.on('click',function(e){
console.log(e.target);
})
//点击到非.box的#wrap子元素,也会触发监听函数
var boxs=$('.box');
var wrap=$("#wrap");
$("#wrap").append('<div class="box">c</div>');
boxs.on('click',function(e){
console.log(e.target);
})
//点击c方块不会输出
官方有一个推荐就是尽量使用on,因为其他方法都是内部调用on来完成的,直接使用on可以提高效率,而且你完全可以用on来代替其他三种写法。
传入监听函数的event事件对象有些方法也有兼容性差异,jQuery 将其封装处理,并提供跟标准一直的命名。如果你想在 jQuery 事件回调函数中访问原来的事件对象,需要使用 event.originalEvent,它指向原生的事件对象。
trigger方法触发事件
$(".box").trigger('click');//类名为box的三个节点同时触发click方法
die
jQuery官方宣布在1.7版本开始**废弃**live,改用其他方式代替。
unbind
该方法能够移除所有的或被选的事件处理程序。
wrap.unbind();//该方法能够移除所有的事件处理程序。
wrap.unbind('click');//该方法能够移除click事件处理程序。
var wrap=$("#wrap");
wrap.bind('click',function(e){
console.log(e.target);
})
wrap.bind('click',abc);//同一个事件可以绑定多个函数,可以是匿名函数,也可以是具名函数
wrap.unbind('click',abc);//unbind可以解除绑定具名函数
function abc(e){
console.log("abc");
}
//不会输出abc
undelegate
undelegate() 方法移除一个或多个由 delegate() 方法添加的事件处理程序。
$(selector).undelegate(selector,event,function)
selector 可选。规定需要删除事件处理程序的选择器。
event 可选。规定需要删除处理函数的一个或多个事件类型。
function 可选。规定要删除的具体事件处理函数。
off
$(selector).off(event,selector,function(eventObj),map)
event 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
selector 可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。
function(eventObj) 可选。规定当事件发生时运行的函数。
map 规定事件映射 ({event:function, event:function, …}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。
var wrap=$("#wrap");
wrap.on('click','.box',function(e){
console.log($(this));
})
wrap.on('click',abc);
wrap.off('click','.box');
function abc(e){
console.log("abc");
}
//只是解除了'.box'的监听函数,没有解除abc函数,所以会输出abc
var wrap=$("#wrap");
wrap.on('click','.box',function(e){
console.log($(this));
})
wrap.on('click',abc);
wrap.off('click');
function abc(e){
console.log("abc");
}
//所有click的监听函数都被解除了。什么也不输出。
var wrap=$("#wrap");
wrap.on('click','.box',abc);
wrap.on('click','.box',d);
wrap.off('click','.box',abc);
function abc(e){
console.log("abc");
}
function d(e){
console.log("d");
}
//只是解除了abc函数的绑定,还会输出d
自 jQuery 版本 1.7 起,on() 和 off() 方法是添加和移除元素上的事件处理程序的首选方法。
unbind函数也可以解除delegate绑定的事件。bind、live、delegate、on,unbind、die、undelegate、off混合起来使用非常复杂,这样使用也是完全没有必要的。