Skip to main content
 Web开发网 » 数据库教程

基础面试27:jQuery中的bind(),live(),delegate(),on()的区别?

2021年10月11日9440百度已收录

bind()方法bind()方法用于对匹配的元素进行特定事件的绑定。它直接绑定在现有的元素节点上,也很好的解决了浏览器在事件处理中的兼容问题。例如,它的调用格式如下:

bind(type, [data], fn) // 事件类型(必选),传递的参数(可选),相关的函数 $('a').bind('click',function(){alert('that tickles!')})JQuery扫描文档找出所有的$('a')元素,并把alert函数绑定到每个元素的click事件上。

live()方法live()是事件委托的概念来执行,把节点的处理委托给了document,向当前或未来的匹配元素添加一个或多个事件处理器。

live(type, [data], fn) // 事件类型(必选),传递的参数(可选),相关的函数$('a').live('click',function(){alert('That tickles!')})它是将函数绑定到$(document)元素上,并使用'click'和'a'作为参数。只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与'a'这一CSS选择器是否匹配,如果都是的话,则执行函数。

delegate()方法delegate()方法的行为有点类似live()。但不是把选择器和事件的信息附加到了document上,而是可以自行选择它要附加的DOM元素,这个技术可以让事件的委托正常工作。我们的选择又多了一些灵活性,不单可以利用事件委托,还可以选择委托的对象。它适用于当前或未来的元素(比如由脚本创建的新元素)。

delegate(selector,[type],[data],fn) //元素节点(字符串形式,一般是子级元素childselector),事件类型,传递的参数(可选),相关的函数$('#container').delegate('a','click',function(){ alert("That tickles!") });jQuery扫描文档查找$('#container'),并使用click事件和'a'这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。

on()方法on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。它是在1.7版本中被提出来的,提供绑定事件处理程序所需的所有功能。用于替换 bind()、delegate()和 live()。

on(events,[selector],[data],fn) // 事件类型,元素节点(可选),传递的参数(可选),相关的函数jQuery逐渐被时代淘汰了,更多关注MVVM吧!

欢迎关注

评论列表暂无评论
发表评论
微信