jQuery 中的 bind(), live(), delegate(), on()的区别

jQuery事件绑定：bind、live、delegate与on的比较
原创 于 2022-08-06 17:54:21 发布 · 112 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #jquery

本文详细介绍了jQuery中四种事件绑定方法——bind、live、delegate和on的区别与应用场景。bind()直接绑定在目标元素上，而live()利用事件冒泡监听整个DOM。delegate()提供更精确的事件代理，适用于小范围元素。最新版jQuery的on()方法综合了前三者，成为首选的事件绑定机制。
  • bind() 直接绑定在目标元素上
  • live() 通过冒泡传播事件，默认document上，支持动态数据
  • delegate() 更精确的小范围使用事件代理，性能优于 live
  • on() 是最新的1.9版本整合了之前的三种方式的新事件绑定机制
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
10-19
在我们日常开发中经常会使用到.bind()、.live()、.delegate()和.on()，有些同学会对这四者存在一些疑虑，所以下面这篇文章主要给大家介绍了关于Jquery中.bind()、.live()、.delegate()和.on()之间区别的相关资料，...
jQuery中bind,live,delegate与one方法的用法及区别解析
10-26
在jQuery库中，有四种主要的方法用于绑定事件处理程序：`.bind()`, `.live()`, `.delegate()`, 和 `.one()`。这些方法各有特点，适用于不同的场景，下面我们将逐一深入探讨它们的用法和区别。 1. **.bind() 方法** ...
jQuery中.bind() .live() .delegate() .on()的区别
weixin_30273931的博客
03-30 148
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert("ok");}); live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的 $("a").live("click",function(){alert("ok");});...
jQuery中的bind(),live(),delegate(),on()的区别
04-05 141
DOM树 　 当我们触发单击事件，该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。click事件接着会向树的根方向传播，广播到父元素，然后接着是每个祖先元素，只要是它的某个后代元素上的单击事件被触发，事件就会传给它。在操纵DOM的结构中，document是根节点。 　...
jQuery中事件绑定到bind、live、delegate、on方法的探究
weixin_30263277的博客
09-04 156
1. 给页面上的某个元素绑定事件，最初采用下面的方式实现： $(‘selector’).click(function(){ //code }); 缺点： 不能同时绑定多个事件，不能绑定动态的元素。 后来接触到了on、bind、live、delegate，以下是对它们的一些探究。 2. bind(type,[data],fn)，为每个匹配元素的特定事...
jquery的bind与on和live的使用
悦分享
11-09 566
jquery的bind与on和live的使用 使用.bind()方法非常浪费性能因为它把同一个事件处理函数附加到了每一个匹配的元素上 你应该停止使用.live()方法因为它被弃用了同时也会带来很多问题 使用.delegate()方法会给你带来很多好处当你需要解决一些性能上的问题和对动态添加的元素作出处理 新的.on()方法其实就是模拟.bind() ， .live() 和.delegate...
jquery中的live、on、onclick、bind
qianyiyiding的专栏
06-07 888
Jquery中的事件绑定有三种方式： onclick事件 onclick非常好理解，点击时候触发onclick函数中的代码执行 $("button").onclick( $("p").slideToggle();//显示和隐藏 ); bind函数 bind方法是为某个元素绑定一个事件，bind的方法只能给已经存在的DOM元素绑定事件，对于后面JS中新增加的元素是没有效果的，也即是说Jquer
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
10-22
- `on()` 是 jQuery 1.7 引入的统一事件绑定接口，替代了 `bind()`、`live()` 和 `delegate()`。 - 语法：`$(selector).on(events, selector, data, handler)` - `events`：必需，逗号分隔的事件名。 - `...
jQuery中bind(),live(),delegate
10-30
今天我们将深入探讨jQuery中的事件绑定方法，包括`bind()`, `live()`, `delegate()`，以及后来推出的`on()`方法。这四个方法都是为了帮助开发者更方便地管理页面上的事件，特别是对于动态生成的元素。 1. **bind()*...
【jQuery学习总结】on（）、bind（）、live（）的区别
zhongmei121的专栏
07-03 438
语法：bind(event, [data], fn)live(event, [data], fn)on(event,[selector],[data],fn)区别：（1）on比bind和live多一个参数[selector]，on可以在父元素的选择下再设置子元素的原则，更加精确操作。（2）bind和live的区别是live可以适用于匹配选择器的当前及未来的元素（比如由脚本js动态创建的新元素），b...
jQuery绑定事件方法及区别(bind,click,on,live,one)
01-19
第一种方式： $(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以上
【JQuery】关于jQuery中on()，bind()，live()用法的区别
新青年1号
06-03 240
转自：https://www.cnblogs.com/wlingxiao/p/4566922.html on(),bind(),live()用法的区别 以上三种函数都可以为一个页面元素绑定事件，其中on()是核心，其他两个用法上略有不同。 下面贴上bind()，live()的代码 jQuery.fn.extend({ ... bind: function...
关于jquery的事件委托-bind，live，delegate，on的区别
qq_42164670的博客
10-27 1977
（1）bind()方法（只能给已存在的元素绑定事件） .bind( eventType [, eventData ], handler(eventObject) ) eventType 类型: String 一个包含一个或多个DOM事件类型的字符串，比如"click"或"submit,"或自定义事件的名称。 eventData 类型: Object 一个对象，它包...
jQuery中on()，bind()，live()，delegate()的区别
cui1002的博客
03-21 417
on()是1.7版本之后增加的用来替代bind()，live()，delegate()的， bind() 只对文档中已经存在的元素有效，对讲来动态添加的元素无效，该方法直接绑定在元素上 live() 对已经存在的元素有效，对将来要添加的元素也有效，该方法通过冒泡的方式绑定到元素上 delegate() 适用于现在及将来要添加的元素，通过冒泡的方式绑定到元素上，解决了‘事件传播链’过长问题’
jQuery中on()、delegate()、live()、bind()的区别
Tansum
05-11 297
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。 live() 方法在 jQuery 版本 1.7 中被废弃，在版本 1.9 中被移除。 on() on() 方法在被选元素及子元素上添加一个或多个事件处理程序。 使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。 如需移除事...
jQuery的事件委托方法bind 、live、delegate、on之间有什么区别？
田品吕口的博客
10-15 3088
(1)、bind 【jQuery 1.3之前】 定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数； 语法：bind(type,[data],function(eventObject))； 特点： (1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。 (2)、当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题。 实例如...
jQuery中是事件绑定方式--on、bind、live、delegate
weixin_30905133的博客
03-17 125
概述：jQuery是我们最常用的js库，对于事件的绑定也是有很多种，on、one、live、bind、delegate等等，接下来我们逐一来进行讲解。 本片文章中事件所带的为版本号，例：v1.7+为1.7版本以上才有，v3.0-为3.0版本后不推荐使用，特此声明。 本文参考了 w3school 事件 的部分内容 一、one(V1.7+) one() 方法为被选元素附加一个...
JQuery中的bind、delegate、on、live方法的区别及简单介绍
学习空间
02-14 3165
Bind()方法： 给元素绑定事件 形式： .bind(eventType[,eventData],handler(eventObject)) eventType,string类型，一个或多个DOM事件的名称，比如：click、submit eventData，Object，将会传递给handler函数的数据，也就是eventObject的data属性中，如果要调用那么使用eventOb
jQuery中live()方法到on()方法的转变写法
HaleyTiger的博客
03-21 4743
jQuery中live()方法到on()方法的转变写法 一、live()方法 live(type, [data], fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。 原理：         live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件...
JQuery事件代理：live, delegate, bind 的详解与对比
本文将深入探讨jQuery中的事件代理方式，包括`live`、`delegate`和`bind`之间的差异。 事件冒泡是指事件在DOM树中从最具体的节点（子节点）向上逐级传播到不那么具体的节点（父节点）的过程。当我们在一个元素上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小码哥・Martin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值