jQuery的事件绑定和委托可以使用 on()、one()、bind()、live()、delegate()等方法实现。
1、on() :
语法:$(selector).on(event,childSelector,data,function)
作用:可以在被选元素及子元素上添加一个或多个事件处理程序,并且此事件处理程序适用于当前及未来的元素。
一般使用:
$("#thisA").on("click", function(){
console.log("id是thisA的标签添加了click点击事件。");
});
或:
$("#thisA").on("click mouseover",{id:"id"}, function(e){
console.log("id是thisA的标签添加了点击和鼠标悬停事件,传递的值是:"+e.data.id);
});
或:
$("body").on("click","#thisA" ,function(){
console.log("可以给当前元素下的子元素添加事件");
});
可用off()方法移除事件绑定:
$("#thisA").off("click");
如需添加只运行一次的事件然后移除,可直接使用 one() 。
2、bind():
语法:$(selector).bind(event,data,function,map)
作用:向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数,不能为未来元素添加事件。
一般使用:
$("#thisA").bind("click", function(){
console.log("id是thisA的标签添加了click点击事件。");
});
或:
$("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","#E9E9E4");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
可用unbind()方法移除事件绑定。
3、live() :
此方法在 jQuery 版本 1.7 中废弃,在版本 1.9 中被移除。请使用 on() 方法代替。
4、delegate():
语法:$(selector).delegate(childSelector,event,data,function)
用法:为指定的元素及其子元素添加一个或多个事件处理程序,此方法适用于当前或未来的元素。
一般使用:使用实例类似于on()。
可用undelegate()方法移除事件绑定。
总结:jQuery的事件绑定和委托基本可以使用清一色的on方法进行实现,特殊情况另外考虑。(一家之言,可能有误)