学会区别 $().live() 、 $().bind() 、$().delegate()

最新推荐文章于 2020-06-12 15:27:26 发布
最新推荐文章于 2020-06-12 15:27:26 发布
阅读量1.1k 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/javaexploreroooo/article/details/52386817
版权
这篇博客探讨了jQuery中处理事件绑定的不同方法，包括.bind(), .live(), .on()和.delegate()。通过DOM事件冒泡原理，解释了它们的工作机制和应用场景。.bind()直接将事件绑定到元素上，.live()则在document级别监听事件，.on()和.delegate()允许事件委托，提高效率并减少内存消耗。作者建议使用.delegate()以获得更好的性能和灵活性。" 131907882,18158630,AutoSAR API架构详解及其优势,"['架构', '汽车电子', 'AutoSAR']
摘要由CSDN通过智能技术生成

在修改项目的BUG的时候，遇到一个简单的问题，当时不是很清晰。



事件冒泡 其实就是事件的传播，是往根传播的。代码上看起来像是从里往外传播。DOM模型上是从下往上传播。


DOM模型：


一个简单的列子就是，我们在a标签定义一个alert函数之后，他会怎么冒泡呢？

他是这样传播的:


这个冒泡机制弄明白了，接着就是我的问题了 那么Jquery中的.bind   .live  .on  .delegate你能区别吗？

什么时

最低0.47元/天 解锁文章
波比小金刚
关注
专栏目录
jQuery.bind() 函数详解
dhm1991的博客
11-22 1208
bind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数。 此外，你还可以额外传递给事件处理函数一些所需的数据。 执行bind()时，事件处理函数会绑定到每个匹配元素上。因此你使用bind()所有button元素绑定了click事件，是为当时文档中存在的每个button元素绑定click事件。如果之后你向文档中添加了新的button元素，绑定事件不会对其生效。如果你希望绑定...
jquery live（）重复绑定的解决办法
huwenhu2007的专栏
01-28 2409
Query中.live()方法的使用方法  今天在写代码的时候遇到一个问题，直接上代码看： $(function(){            $(".file").live("click",function(){                     var task_name=$(this).text();                     $("#selecting tb
jQuery中.bind() 方法?
墓亦龍的博客
03-30 1025
.bind() 方法1、定义及用法：向被选元素添加 一个或多个事件和事件触发时运行的函数。                         (jQuery版本1.7起，on()方法是首选)。2、简单   示例： 向<p>元素添加一个点击事件                              $("p").bind("click",function(){             ...
jQuery中live()使用报错，TypeError: $(...).live is not a function
weixin_30716141的博客
08-25 217
原地址： https://blog.csdn.net/sdfdyubo/article/details/59536781 1、使用 (1)原写法 /*为选项卡绑定右键*/ $(".tabs li").live('contextmenu', function (e) { /*选中当前触发事件的选项卡 */ var subtitle = $(this)....
jquery中live()方法
fgx_123456的博客
10-10 699
实例 当点击按钮时，隐藏或显示 p 元素： $("button").live("click",function(){ $("p").slideToggle(); }); 亲自试一试 定义和用法 live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。 通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未
Javascript通过bind()掌控this
热门推荐
rznice的专栏
05-18 4万+
     最近博客的更新明显跟不上脚步，不是因为最近什么都没看不知道写什么，而是因为最近工作比较忙看了好多东西以至于一时无从下手。东西要整理的太多了，还有很多不足啊，给自己打打气，一点点来~不能懈怠！     今天看到公司大神的一段代码： view source print? 01  function ReplaceProcessor() {
jQuery中的.bind()、.live()和.delegate()之间区别分析
10-28
在讨论jQuery中的事件绑定方法时，.bind()、.live()和.delegate()是三种重要的技术。为了深入理解这些方法之间的区别和特点，首先需要对DOM事件的传播机制有所了解。在DOM事件模型中，事件传播分为捕获和冒泡两个...
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
10-19
在我们日常开发中经常会使用到.bind()、.live()、.delegate()和.on()，有些同学会对这四者存在一些疑虑，所以下面这篇文章主要给大家介绍了关于Jquery中.bind()、.live()、.delegate()和.on()之间区别的相关资料，...
Jquery事件DELEGATE()方法用法详解
看陌生的风景的博客
12-05 529
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数，使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。 语法很简单 $(selector).delegate(childSelector,event,data,function) 参数说明 childSelector 必需。规...
jquery事件--bind()方法
平凡之路
05-04 1293
bind在表单提交时,绑定提交按钮点击事件, 返回false能有效地阻止表单提交 $("#saveBtn").bind("click",function(){ //验证数据不能为空 $("input[type=text]").each(function(){ if($(this).val() == ""){ alert("数据不能为空,请检查");
$(...).live is not a function
Jour的博客
03-10 1005
jquery中的live()方法在jquery1.9及以上的版本中已被废弃了，如果使用，会抛出TypeError: $(…).live is not a function错误。解决方法：之前的用法：.live(events， function) 新方法：.on(eventType, selector, function)若selector不需要，可传入null例子1：之前：$('#mainmenu
jquery---delegate()方法
Amy的博客
12-02 583
该方法为指定的元素添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
jQuery bind() 方法使用详解
asdwenok的博客
11-24 767
$(selector).bind(event,data,function) 以下是官网上的例子： event对应的事件：可以添加多个 $("button").bind({     click:function(){$("p").slideToggle();},     mouseover:function(){$("body").css("background-color","r
JQuery中bind和unbind函数
Liucheng417的博客
04-12 2908
测试： 页面代码： JQuery代码： $().ready(function(){ for (var i = 0; i < 3; i++) { $("input[type='button']").click(function(){ alert("aaaa");
JQuery 绑定事件 bind方法【笔记】
单枪匹码
06-12 501
bind()方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行函数。 1、语法： $(selector).bind(event,data,function); 用法：为button绑定点击事件点击以后p标签执行slideToggle方法。 <script type="text/javascript"> $(document).ready(function(){ $("button").bind("click",function(){ $("p").slide
jQuery中 live()函数 VS on()函数
影梦的博客
09-26 654
在jQuery的低级版本当中，是支持live()的，用来绑定未来的（动态加载）元素 $(".editBtn").live("click",function () { alert("Zero"); }); 在jQuery的高级版本当中，是不支持live()的，但是可以通过on()函数来绑定未来的（动态加载）元素on()函数有三个参数。第一个：绑定事件名称；第二个：要绑定的对象（可以通过选...
jQuery的.bind()、.live()和.delegate()之间区别
weixin_30339457的博客
06-07 151
DOM树 首先，可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子： 事件冒泡(又称事件传播) 当我们点击一个链接时，其触发了链接元素的单击事件，该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。 1 $('a').bind('click',function(){alert('that tickles!')...
关于JQuery里的Live方法和$.browser方法 - 边走边睡
weixin_30552635的博客
06-01 76
[2010-05]化学学院学生科网站：网站做好了，老师却要求要3级菜单，无奈只好去做3级菜单了。这次3级菜单的思路是在原有不变的基础上，对有3级菜单的ID，选择进入新的一个控件。在这个新的控件里用ajax去请求其3级目录里的东西。 $(function(){ Ajaxload("?Uid=1<%= Yan.GET_Dict(id, 8, TableName)%>") ...
JQuery事件代理：live, delegate, bind 的详解与对比
本文将深入探讨jQuery中的事件代理方式，包括`live`、`delegate`和`bind`之间的差异。 事件冒泡是指事件在DOM树中从最具体的节点（子节点）向上逐级传播到不那么具体的节点（父节点）的过程。当我们在一个元素上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值