关于jquery的事件委托-bind,live,delegate,on的区别发展

事件委托:让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!

一、bind()方法 (只能给已经存在的元素上绑定事件)

只能给调用它的时候已经存在的元素绑定事件,不能给未来新增的元素绑定事件。

二、live()方法(绑定到document DOM节点上。和.bind()的优势是支持动态数据

jQuery 1.3新增的.live()方法代替.bind()方法。live()方法会把click事件绑定到$(document)对象,但是生成了不必要的jQuery对象,导致性能损失;

(function($){$("#info_table td").live("click",function(){/*显示更多信息*/}); })(jQuery);使用叫做早委托hack,在整个dom元素加载之前调用live可以减少jquery对象的生成,解决上述缺点。(function($){...})(jQuery)是一个立即执行的匿名函数这时候刚好document元素可用,而整个DOM还远未生成。

为解决事件传播链过长的问题,jQuery1.4开始支持在使用.live()方法时配合使用一个上下文参数:

$("td",$("#info_table")[0]).live("click",function(){/ 显示更多信息 /});

受托方就从默认的$(document)变成了$("#info_table")[0],节省了冒泡的旅程。只能放在直接选择的元素后面,不支持链接使用,即$("#info_table td").live...可以,但$("#info_table").find("td").live...不行;

三、delegate()方法(更精确的小范围使用事件代理,性能优于.live()

为了解决无谓生成元素集合的问题,jQuery 1.4.2干脆直接引入了一个新方法.delegate()

$("#info_table").delegate("td","click",function(){/*显示更多信息*/});

优点:(或者说解决了.live()方法的如下问题):

直接将目标元素选择符("td")、事件("click")及处理程序与“受拖方”$("#info_table")绑定,不额外收集元素、事件传播路径缩短、语义明确;

支持在连缀的DOM遍历方法后面调用,即支持$("table").find("#info").delegate...,支持精确控制;

四、on()方法-1.9版本整合了之前的三种方式的新事件绑定机制

$("#info_table").on("click","td",function(){/*显示更多信息*/});参数的位置写法与delegate不一样

jQuery 1.7为了解决.bind().live().delegate()并存造成的不一致性问题,将会增加一对新的事件方法:.on().off()

$(elems).on(events, selector, data, fn);

$(elems).off(events, selector, fn);//相反的方法

说明:

on方法是当前JQuery推荐使用的事件绑定方法,附加只运行一次就删除函数的方法是one()


  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue.js中,v-on、v-bind和v-model是三个不同的指令。 v-on是Vue.js的事件指令,用于监听DOM事件并触发相应的方法。它可以用于绑定事件处理器,比如点击事件、鼠标移入移出事件等。通过使用v-on指令,我们可以在模板中绑定事件,并在触发事件时执行相应的方法。 v-bind是Vue.js的属性绑定指令,用于将数据绑定到HTML元素的属性上。通过使用v-bind,我们可以将Vue实例中的数据动态地绑定到HTML元素的属性上,从而实现数据的动态更新。 v-model是Vue.js的双向绑定指令,用于在表单元素和Vue实例中的数据之间建立双向绑定关系。它可以实现表单元素的数据绑定和同步,使得数据的变化能够自动反映到表单元素中,同时,用户在表单元素中输入的数据也能够实时地同步到Vue实例中。 综上所述,v-on是用于绑定事件的指令,v-bind是用于绑定属性的指令,而v-model是用于实现双向绑定的指令。它们各自有不同的用途和功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue中v-bind,v-on,v-model都是干什么的(区别以及详细用法)?自制动图,一看就懂 ∠( °ω°)/ 前端知识](https://blog.csdn.net/qq_39611230/article/details/106854178)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [自学Vue必看的v-model知识总结(超详细)](https://download.csdn.net/download/weixin_38590456/14045058)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值