jQuery的on与bind绑定事件的区别:主要是事件冒泡;
$(selector).bind(events,data,function)
$(selector).bind(map,data)
$(selector).on(event,childSelector,data,function)
$(selector).on(map,childSelector,data)
必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
childSelector可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。
data可选。规定传递到函数的额外数据。
function可选。规定当事件发生时运行的函数。
map不能与function共存
规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。
.on的childSelector参数是筛选出调用.on方法的dom元素的指定子元素,如:
$('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定click事件;
那么这个childSelector参数的好处是什么?
好处在于.on方法
原理是事件冒泡,进行事件委托,子元素把事件委托给父元素进行事件处理;
这样的好处
1.如果子元素非常多,给每个子元素都添加一个事件,会影响到性能;
2.为动态添加的元素也能绑上指定事件;
如:
$('ul li').on('click', function(){console.log('click');})的绑定方式和$('ul li').bind('click', function(){console.log('click');})一样;我通过js给ul添加了一个li:$('ul').append('<li>我是新创建的li<li>');');这个新加的li是不会被绑上click事件的
但是我用$('ul').on('click', 'li', function(){console.log('click');}方式绑定,然后动态添加li:$('ul').append('<li>我是新创建的li<li>');这个新生成的li被绑上了click事件
// bind的两种写法:
// 第一:
$("ul li").bind("click mouseover",{msg:"你好!"},function(ev){
console.log("我是bind");
console.log(ev.data.msg);
})
// 第一:
$("ul li").bind({
mouseover:function(){
console.log("我是bind");
},
click:function(ev){
console.log(ev.data.msg);
}
},{msg:"你好!"})
//注意:data必须放在事件后面才有效果,否则会报错
// on的两种写法:
// 第一:
$("ul").on("click mouseover","li",{msg:"你好!"},function(ev){
console.log(ev.data.msg);
})
// 第二:
$("ul ").on({
mouseover:function(ev){
console.log("我是on");
},
click:function(ev){
console.log(ev.data.msg);
}
},"li",{msg:"你好!"})//注意:data必须放在事件后面才有效果,否则会报错
自jQuery版本1.7起,on()方法是bind()live()和delegate()方法的新的替代品。该方法给API带来很多便利,我们推荐使用该方法它简化了jQuery代码库。