当前位置:首页 > 日记 > 正文

jQuery绑定事件方法及区别 | bind,click,on,live,one

jQuery绑定事件方法及区别 | bind,click,on,live,one

第一种方式:

$(document).ready(function(){ $("#clickme").click(function(){ alert("hello world click") })})

第二种方式(简写方式为第一种):

$('#clickmebind').bind("click", function(){ alert("Hello World bind");});

第三种方式:

$('#clickmeon').on("click",function(){ alert("hello world on")}) 

注意:第三种方式只适用于jquery 1.7以上的版本

第四种方式:

$("button").live("click",function(){ $("p").slideToggle();});

第五种方式:

$("div").delegate("button","click",function(){ $("p").slideToggle();});

如果只绑定一次事件,那接着用one()吧,这个没有变化。

$(document).ready(function(){  $("p").one("click",function(){    $(this).animate({fontSize:"+=6px"});  });});

下面就来了解下它们之间的区别

bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数
$(“a”).bind(“click”,function(){alert(“ok”);});

live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的
$(“a”).live(“click”,function(){alert(“ok”);});

delegate(selector,[type],[data],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数
$(“#container”).delegate(“a”,”click”,function(){alert(“ok”);})

on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

最大的差别:bind()的事件函数只能针对已经存在的元素进行事件的设置。如果你想对动态创建的元素bind()事件,是没有办法达到效果的,但是live(),on(),delegate()均支持未来新添加元素的事件设置。

.bind()是直接绑定在元素上()
jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以用来代替live()函数,live()函数在1.9版本已经删除;

.delegate()则是更精确的小范围使用事件代理,性能优于.live()(在Jquery1.7中已经移除)

.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document
DOM节点上。和.bind()的优势是支持动态数据。(在Jquery1.7中已经移除,相应die()也移除)

live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些

.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制(在Jquery1.7中添加,相应off()也添加)

jquery1.4 及之前的版本,由.click() 或 bind()方法绑定的事件,不能适用脚本创建的新元素:即是说页面加载完成后,再动态创建的DOM元素并不能响应之前绑定的事件!

旧版本的处理方法是使用.live()方法来代替事件绑定.bind(),使得绑定的事件能适用脚本创建的新元素。

但自jq1.7版本开始,官方已明文表示不再推荐使用使用.live()方法,官方解释为:live()调用过程首先将事件方法绑定到了Document,然后,查找Document里是否有匹配元素。
这个过程对于性能来说可能比较浪费。官方推荐将.live()改成Delegate()方法,适用脚本创建的新元素。

jq1.8开始,官方又再次申明:如果你开发最新版本的jQuery,完全可以使用on()方法来处理所有的事件绑定,避免过多的方法调用,因为其实在最新版本的jQuery类库中,所有以上旧版方法在后面其实都是调用on()方法。

总结

jQuery推出on()的目的有2个,一是为了统一接口,二是为了提高性能,所以从现在开始用on()替换bind(), live(), delegate吧。

以上就是小编为大家整理的jq绑定事件方法及区别的全部内容啦~希望大家继续支持~

相关文章

PHP使用栈解决约瑟夫环问题算法示

PHP使用栈解决约瑟夫环问题算法示

算法示例,约瑟夫,电脑软件,PHP,本文实例讲述了PHP使用栈解决约瑟夫环问题算法。分享给大家供大家参考,具体如下:约瑟夫环问题: 39 个犹太人与Josephus及他的朋友躲到一个洞中,39个犹太人决定宁愿死也不要被敌人抓。于是决定了自杀方式,41个人排…

XP安装IIS时提示 “Failed to acce

XP安装IIS时提示 “Failed to acce

安装,提示,解决办法,电脑软件,IIS,先装.NET Framework,后装IIS ,将导致问题:“Failed to access IIS metabase”,无法浏览页面。原因:IIS没有注册解决办法:在CMD中进入目录C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727,运行aspn…

fireworks把历史记录保存为命令方

fireworks把历史记录保存为命令方

命令,方法,历史记录,保存为,电脑软件,fireworks是网页三剑客之一的制图软件,我们用历史纪录的时候,怎么把历史纪录保存为命令呢,下面就为大家详细介绍一下,来看看吧!步骤:1、首先我们找到电脑里面的fireworks的根目录,双击打开我们的应用程序2、双…

jQuery AJAX中readyState与status

jQuery AJAX中readyState与status

区别,电脑软件,AJAX,jQuery,status,作为web前端大杀器之一的AJAX,它的出现颠覆了很多人对web前端的理解,从我个人的角度看来,如果说1996年html/css/JavaScript三神器的终于集齐,使得web前端拥有了召唤神龙的能力,那么ajax就是三神器召唤出来的第…

怎么将两份word文档合并成一份将两

怎么将两份word文档合并成一份将两

合并,文档,方法,两份,电脑软件,  你做了一份word文档,想和别人对比下差距,但是在来回点这两份word又太麻烦了,有让两份word合并成一份的方法吗?答案毋庸置疑。这里小编就告诉你怎么将两份word文档合并成一份,希望对你有帮助!将两份word文档合…

压缩软件常见故障排除

压缩软件常见故障排除

故障排除,压缩软件,常见,电脑软件,修复损坏的WinRAR文件WinRAR附带了一个损坏文件修复功能,我们可以运行一个WinRAR压缩文件,并且找到存在错误的压缩包,然后进行以下操作。1、单击“工具”菜单。2、单击选择“修复压缩文件&rdq…

ps怎么绘制一个心形并填充纯色?

ps怎么绘制一个心形并填充纯色?

绘制,填充,纯色,电脑软件,ps,ps中想要使用路径画心形,画好以后怎么填充纯色的颜色?下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、点击箭头指向的按钮,创建新的填充或调整…

win10用蓝牙播放音乐

win10用蓝牙播放音乐

播放音乐,蓝牙,电脑软件,通过手机蓝牙功能连接蓝牙音箱或耳机播放音乐大家已经见怪不怪了,那在 Windows 10 中要如何通过蓝牙播放音频流呢?对于拥有蓝牙设备的 Windows 10 台式机、笔记本甚至是平板电脑,同样也可以使用相同的技术播放音频。…

git恢复删除的分支及内容的方法

git恢复删除的分支及内容的方法

恢复删除,方法,分支,内容,电脑软件,git 删除分支git branch -D 分支名git查看分支git branch -agit 删除远程分支git push origin :分支名这里注意:git分支提交并且push了,但是把分支删掉了,则分支上提交的东西也一并删掉了正确顺序是:git comm…

word2010文档中插入任意字符和特殊

word2010文档中插入任意字符和特殊

特殊符号,文档,字符,方法,电脑软件,  “符号”在日常文档编辑过程中会经常用到,而有的时候会用到在已有的键盘上不存在的,那我们该怎么办呢?以下是小编为您带来的关于word2010文档中插入任意字符和特殊符号的方法,希望对您有所帮…

微信小程序 video详解及简单实例

微信小程序 video详解及简单实例

简单实例,详解,程序,电脑软件,微信小,微信小程序 video详解在小程序火热的今天,作为IT行业的一员,我也来凑了一下热闹,话不多说了,接下来看看视频上传,和跨页面获取值的相关案例吧!!视频上传部分代码:视频播放随机颜色的产生: 颜色页面的选择:感谢阅…

Windows XP系统字体库在哪?如何安装

Windows XP系统字体库在哪?如何安装

安装,字体,系统,字体库,电脑软件,前面分享的《正规word文档文件字体排版格式要求(标准)》一文说到文件的标题需要用到“2号方正小标宋,不加粗”,刚开始我一直都以为就是2号宋体,可惜不加粗之后感觉不太对,没想到“方正小标宋&rd…