1.bind()
bind方法为匹配元素添加一个或多个事件。用法如下:
bind(event,data,function)
参数说明:
event:必须参数项,添加到元素的一个或多个事件,如click、dbclick等。
data:可选参数项,设计需要传递的参数。
function:必须参数项,当绑定事件发生时,需要执行的函数。
提示:bind()方法适用于所有版本,但是根据官网解释,自从jQuery1.7版本以后,推荐使用on()方法代替bind()方法。
$(function () {
/*添加单个事件处理*/
$(".btn-test").bind("click", function () {
//显示隐藏div
$(".container").slideToggle();
});
/*添加多个事件处理*/
//空格相隔方式
$(".btn-test").bind("mouseout click", function () {
//显示隐藏div
$(".container").slideToggle();
});
//大括号替代方式
$(".btn-test").bind({
"mouseout": function () {
alert("这是mouseout事件!");
},
"click": function () {
$(".container").slideToggle();
}
});
/*删除事件处理*/
$(".btn-test").unbind("click");
});
2.live()
live()方法为当前或未来的匹配元素添加一个或多个事件处理程序。用法如下:
live(event,data,function)
参数说明:
event:必须参数项,添加到元素的一个或多个事件,如click、dbclick等。
data:可选参数项,设计需要传递的参数。
function:必须参数项,当绑定事件发生时,需要执行的函数。
提示:jQuery版本一下支持live(),jQuery1.9及其以上版本删除了该方法,jQuery1.9以上版本用on()来代替。
3.delegate()
delegate()方法为指定的元素,以及被选元素的子元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用delegate()方法适用于当前或未来的元素,如由脚本创建的新元素等。用法如下:
delegate(childSelector,event,data,function)
参数说明如下:
childSelector:必须参数,指定需要注册事件的元素,一般为调用对象的子元素。
event:必须参数项,添加到元素的一个或多个事件,如click、dbclick等。
data:可选参数项,设计需要传递的参数。
function:必须参数项,当绑定事件发生时,需要执行的函数。
提示:delegate()适用于jQuery1.42及其以上版本。
$(function () {
$("ul").delegate("li","click",function(){
alert(this.innerHTML);
});
var i = 4;
$("#btn").click(function(){
$("ul").append("<li>列表项目" + i++ + "</li>")
})
});
4.on()
on()方法为指定的元素添加一个或多个事件处理程序,并规定当这些元素事件发生时运行的函数。使用on()方法的事件处理程序适用于当前或未来的元素,如由脚本创建的新元素。用法如下:
on(event,childSelector,data,function)
参数说明如下:
event:必须参数项,添加到元素的一个或多个事件,如click、dbclick等。
childSelector:必须参数,指定需要注册事件的元素,一般为调用对象的子元素。
data:可选参数项,设计需要传递的参数。
function:必须参数项,当绑定事件发生时,需要执行的函数。
提示:on()适用于jQuery1.7及其以上版本,jQuery1.7版本出现之后用于替代bind()、live()方法绑定事件方法。
$(function () {
$("ul").on("click","li",function(){
alert(this.innerHTML);
});
var i = 4;
$("#btn").click(function(){
$("ul").append("<li>列表项目" + i++ + "</li>")
})
});
$(function () {
$("ul").on("click","li",{a:"A",b:"B"},function(event){
$(this).text(event.data.a + event.data.b);
});
});
拓展:比较四种事件绑定方式的异同和优缺点
相同点:
(1)都支持单元素多事件的绑定,都支持空格相隔方式或者大括号替代方式。
(2)均是通过事件冒泡方式,将事件传递到document进行事件的响应式。
不同点:
(1)bind()只能针对已存在的元素进行绑定事件的设置,但是live()、on()、delegate()均支持委派事件,即可以为未来新元素添加元素注册事件。
(2)bin()函数在jQuery1.7版本以前比较受推崇,jQuery1.7 版本出来之后,官方已经不推荐用bind(),替代函数为on()。on()可以代替live(),live()方 法在jQuery 1.9 版本已经被删除。
(3) live(与delegate0类似,但是live0在执行速度、灵活性和CSS选择器支持方面比delegate()弱。
(4) bind0支持jQuery版本1和版本2,在版本3中被弃用; live0支持 jQuery1.8-,高版本不再支持;delegate()支持jQuery1.4.2+,在jQuery版本3中被弃用; on0支持 jQuery1.7+。总之,如果项目中引用jQuery为低版本,推荐用delegate(),高版本jQuery可以使用on0来代替,在jQuery 3+版本中只支持on()。