一、作用不同
安源ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!
1、on():在被选元素及子元素上添加一个或多个事件处理程序。
2、live():为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
二、触发条件不同
1、on():使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。
2、live():通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。
三、语法不同
1、on():$(selector).on(event,childSelector,data,function)childSelector可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。
2、live():$(selector).live(event,data,function),其中event必需。规定附加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
参考资料来源:百度百科-jQuery
目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。
还不支持 blur, focus, mouseenter, mouseleave, change, submit
与bind()不同的是,live()一次只能绑定一个事件。
这个方法跟传统的bind很像,区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说,如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用。而无需重新给这种新增加的元素绑定事件。
用法示例:
div class=”myDiv”/div
jquery:
$(“.myDiv”).live(“click”, function(){
alert(“clicked!”);
});
如果使用javascript动态创建一个class为mydiv的元素,点击元素依然会有弹出。为什么使用live后就有了呢?这是因为jquery利用了事件的冒泡机制,直接把事件绑定在了document上,然后通过event.target找出事件的来源。这跟jquery.livequery插件不一样,jquery.livequery每20毫秒做一次检查,如有新生成则重新绑定一次事件。
使用live当然有利也有弊:
好处就是:元素更新时不用反复去定义事件。
坏处就是:把事件绑定在document上会在页面上每一个元素都呼叫一次,如使用不当会严重影响性能。而且不支持blur, focus, mouseenter, mouseleave, change, submit。
2.移除live绑定的事件
在Jquery里,使用live来绑定事件,若想移除该事件,要使用die方法。
如:
$(“.myDiv”).die("click");
这样就好将绑定的click事件移除掉。
Jquery中bind和live的区别如下:
1.bind()可以绑定多个事件,live()一次只能绑定一个事件。
区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说,如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用。而无需重新给这种新增加的元素绑定事件。
2.live 目前只支持所有事件的子集,支持列表参考上面的说明。
.live 不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。
.live 没有”setup”和”cleanup”的过程。因为所有的事件是委派而不是直接绑定在元素上的。
bind是用来绑定一个或多个事件的,live其实bind的一个加强版,用来绑定通过JavaScript或者jQuery添加的DOM元素事件,其语法结构是一样
123456$("p").bind("mouseenter mouseleave",function(){alert("ok");})$("p").live("mouseenter mouseleave",function(){alert("ok");})
delegate用于事件委托,也是绑定过JavaScript或者jQuery添加的DOM元素事件。
123$("div").delegate("p","click",function(){alert("p");})
点击div下面的P执行alert;
而on是在1.7之后新增的,是把bind,live,delegate全部合并在一起了,
123$("div").on("click","p",function(){ alert(1); })
不需要事件委托的时候把P去掉就会变成点击div触发了。
个人建议根据版本来使用,语法其实都差不多,如果你是用1.7版本以上就建议用on,毕竟bind,live,delegate这些将来都会遗弃了,如有错误,请指出。顺便吐槽一下楼上的回答,不走心啊
live在jQuery1.7中就不再建议使用,在1.9中就给删除了。\x0d\x0a在jQuery官方网站上说明了原因,并声称用on方法取代live方法。\x0d\x0ajQuery官方网站声称下面三行代码是等价的\x0d\x0a$("a.offsite").live("click",function(){alert("Goodbye!");});//jQuery1.3+\x0d\x0a$(document).delegate("a.offsite","click",function(){alert("Goodbye!");});//jQuery1.4.3+\x0d\x0a$(document).on("click","a.offsite",function(){alert("Goodbye!");});//jQuery1.7+
$(selector).bind(event,data,function)
$(selector).live(event,data,function)//jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替$(selector).delegate(childSelector,event,data,function)//jquery1.4.2及其以上版本;$(selector).on(event,childselector,data,function)//jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;
event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
单事件处理:例如 $(selector).bind("click",data,function);
多事件处理:1.利用空格分隔多事件,例如 $(selector).bind("click dbclick mouseout",data,function);
2.利用大括号灵活定义多事件,例如 $(selector).bind({event1:function, event2:function, ...})
3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;适用所有版本,但是根据官网解释,自从jquery1.7版本以后bind()函数推荐用on()来代替。