首页 web前端 js教程 Jquery中绑定事件bind与live的区别介绍

Jquery中绑定事件bind与live的区别介绍

Jun 26, 2017 am 09:28 AM
bind jquery live 事件 绑定

Jquery中绑定事件有三种方法:以click事件为例

   (1)target.click(function(){});

   (2)target.bind("click",function(){});

   (3)target.live("click",function(){});

第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已

第二、三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其要注意二者的区别。

【bind和live的区别】

       live方法其实是bind方法的变种,其基本功能就同bind方法的功能是一样的,都是为一个元素绑定某个事件,但是bind方法只能给当前存在的元素绑定事件,对于事后采用JS等方式新生成的元素无效,而live方法则正好弥补了bind方法的这个缺陷,它可以对后生成的元素也可以绑定相应的事件。那么live方法的这个特性是怎么实现的呢?下面来探讨一下其实现原理。

      live方法之所以能对后生成的元素也绑定相应的事件的原因归结在“事件委托”上面,所谓“事件委托”就是指绑定在祖先元素上的事件可以在其后代元素上进行使用。live方法的处理机制就是把事件绑定在DOM树的根节点上,而不是直接绑定在某个元素上。举一个例子来说明:

   $(".clickMe").live("click",fn);
             $("body").append("<p class=&#39;clickMe&#39;>测试live方法的步骤</p>");
登录后复制


    当我们点击这个新增的元素时会依次发生如下步骤:

      (1)生成一个click事件,传递给p来做处理

      (2)由于没有事件直接绑定在p上,所以事件直接冒泡到DOM树上

      (3)事件不断冒泡,直到DOM树的根节点上,默认情况下,根节点上就绑定了这个click事件

      (4)执行由live绑定的click事件

      (5)检测绑定事件的对象是否存在,判断是否需要继续执行绑定的事件。检测事件对象是通过检测 

              $(event.target).closest('.clickMe') 能否找到匹配的元素来实现的。

     (6)通过(5)的测试,如果绑定事件的对象存在的话,就执行绑定的事件。

      由于只有在事件发生的时候,live方法才会去检测绑定事件的对象是否存在,所以live方法可以实现后来新增的元素也可实现事件的绑定。相比之下,bind会在事件在绑定阶段就会判断绑定事件的元素是否存在,而且只针对当前元素进行绑定,而不是绑定到父节点上。

根据上面的分析,live的好处真是很大,那么为什么还要使用bind方法呢?之所以jquery要保留bind方法而不是采用live方法去替代bind,也是因为live在某些情况下是不能够完全替代bind的。主要的不同如下:

     (1)bind方法可以绑定任何JavaScript的事件,而live方法在jQuery1.3的时候只支持click, dblclick, keydown, keypress,

               keyup,mousedown, mousemove, mouseout, mouseover, 和 mouseup.在jQuery 1.4.1中,甚至也支持 focus 和 blue

               事件了(映射到更合适,并且可以冒泡的focusin和focusout上)。另外,在jQuery 1.4.1中,也能支持hover(映射

              到"mouseenter mouseleave")。

    (2)live() 并不完全支持通过DOM遍历的方法找到的元素。取而代之的是,应当总是在一个选择器后面直接使用 .live()

              方法。

    (3)当一个元素采用live方法进行事件的绑定的时候,如果想阻止事件的传递或冒泡,就要在函数中return false,仅仅调

              用stopPropagation()是无法实现阻止事件的传递或者冒泡的

以上是Jquery中绑定事件bind与live的区别介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

小红书怎么绑定子账号?它怎么检测账号是否正常? 小红书怎么绑定子账号?它怎么检测账号是否正常? Mar 21, 2024 pm 10:11 PM

在如今这个信息爆炸的时代,个人品牌和企业形象的建设变得越来越重要。小红书作为国内领先的时尚生活分享平台,吸引了大量用户关注和参与。对于那些希望扩大影响力、提高内容传播效率的用户来说,绑定子账号成为了一种有效的手段。那么,小红书怎么绑定子账号呢?又如何检测账号是否正常呢?本文将为您详细解答这些问题。一、小红书怎么绑定子账号?1.登录主账号:首先,您需要登录您的小红书主账号。2.打开设置菜单:点击右上角的“我”,然后选择“设置”。3.进入账号管理:在设置菜单中,找到“账号管理”或“账号助手”选项,点

BTCC教学:如何在BTCC交易所绑定使用MetaMask钱包? BTCC教学:如何在BTCC交易所绑定使用MetaMask钱包? Apr 26, 2024 am 09:40 AM

MetaMask(中文也叫小狐狸钱包)是一款免费的、广受好评的加密钱包软件。目前,BTCC已支持绑定MetaMask钱包,绑定后可使用MetaMask钱包进行快速登入,储值、买币等,且首次绑定还可获得20USDT体验金。在BTCCMetaMask钱包教学中,我们将详细介绍如何注册和使用MetaMask,以及如何在BTCC绑定并使用小狐狸钱包。MetaMask钱包是什么?MetaMask小狐狸钱包拥有超过3,000万用户,是当今最受欢迎的加密货币钱包之一。它可免费​​使用,可作为扩充功能安装在网络

今日头条中绑定抖音的步骤方法 今日头条中绑定抖音的步骤方法 Mar 22, 2024 pm 05:56 PM

1、打开今日头条。2、点击右下角我的。3、点击【系统设置】。4、点击【账号和隐私设置】。5、点击【抖音】右边的按钮即可绑定抖音。

菜鸟app怎么绑定拼多多 菜鸟裹裹怎么添加拼多多平台 菜鸟app怎么绑定拼多多 菜鸟裹裹怎么添加拼多多平台 Mar 19, 2024 pm 02:30 PM

  菜鸟app就是能够为你们提供出各种物流信息状况的平台,这里的功能非常的强大好用,大家有任何与物流相关的问题,都能在这得到解决的,反正都能为你们带来一站式的服务,全都能及时解决的,查快递,取快递,寄快递等,都是毫无任何问题,与各个的平台都进行了合作,全部的信息,都能查询得到的,但是有些时候会出现拼多多当中购买的商品,都是无法呈现出物流的信息,其实是需要大家进行手动绑定拼多多,才能实现的,具体的方法已经整理出来了在下方,大家都能来看看的。菜鸟绑定拼多多账户的方法:  1、打开菜鸟APP,在主页面

jQuery中如何使用PUT请求方式? jQuery中如何使用PUT请求方式? Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式?在jQuery中,发送PUT请求的方法与发送其他类型的请求类似,但需要注意一些细节和参数设置。PUT请求通常用于更新资源,例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先,确保引入了jQuery库文件,然后可以通过以下方式发送PUT请求:$.ajax({u

菜鸟APP怎么绑定拼多多 菜鸟APP绑定拼多多方法 菜鸟APP怎么绑定拼多多 菜鸟APP绑定拼多多方法 Mar 19, 2024 pm 05:16 PM

  你们知道在使用菜鸟裹裹的时候是怎么来绑定拼多多的吗?菜鸟裹裹App官方正版在这款平台上面对于一些拼多多的物流信息是没有自动同步上去的,我们需要做的就只能复制单号过来或者是查询你们的手机看看有无快递的信息。当然这些都是需要手动来完成的,如果你们也想了解更多的话,就和小编一起来看看吧。  菜鸟APP怎么绑定拼多多  1、打开菜鸟APP,在主页面点击左上角的“导包裹”。  2、在界面中,有很多购物网站,账号都可以绑定。  3、点击导入其他电商平台。  4、用户授权:点击拼多多转到界面

小黑盒无法绑定Steam怎么办 小黑盒无法绑定Steam怎么办 Mar 12, 2024 pm 03:10 PM

小黑盒绑定不上Steam可能是网络或软件版本问题所致。小黑盒提供包括已发售和即将发售游戏价格、电脑配置要求与评价、深度玩法解析等信息。此外,它还支持用户随时随地通过移动端查找所需信息。小黑盒无法绑定Steam怎么办1、确认网络状况请确保设备已连接至互联网。2、检查小黑盒版本请确保您使用的是最新版小黑盒软件,并尝试绑定Steam账户。3、查看Steam账户设置请登录Steam账户,查看隐私设置中是否已开启允许第三方软件绑定功能。4、联系官方客服如上述步骤仍无法解决问题,建议您联系官方客服寻求帮助。

小米汽车app怎么绑定充电桩设备 小米汽车app怎么绑定充电桩设备 Apr 01, 2024 pm 06:52 PM

最新小米最新推出的小米su7型号汽车霸占了各种热搜榜,很多正好有购车需求的用户们都纷纷选择了小米su7型号的汽车进行购买,那么在提车以后如何利用自己的小米汽车app绑定家用充电桩进行充电呢,那么这篇教程攻略就将为大家带来详细的内容介绍,希望能帮助到大家。首先我们先打开小米手机app,点击右下角我的按钮然后在我的界面,可以看到家充桩的选项进入到绑定充电桩的页面以后,点击下方的去扫码按钮,扫描充电桩上的二维码即可完成充电桩与app的绑定

See all articles