jQuery中bind()和on()的区别

最新推荐文章于 2024-07-20 10:36:53 发布
最新推荐文章于 2024-07-20 10:36:53 发布
阅读量54 收藏
点赞数
文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67901663/article/details/130159748
版权

目录

binnd有三个参数，分别是event,data,function也就是事件，额外要添加的数据以及执行的函数

on有四个参数，分别是event,selector,data,function分别是事件，选择器，额外添加的数据和执行函数。

bind方法与on方法都是事件绑定，但是两者却又有着一个大区别：事件委托

on方法多了一个selector方法，也就是子类选择器

事件委托就是子类的事情委托给父类的去做，而这就让我们想起了冒泡事件，是的，这的确是委托事件的原型，而我们的selector，则是判断是不是那个子元素触发的事件，如果不是，自然就忽略掉了

这是个最简单的委托事件，按钮将事件委托给了父亲节点—div，所以点击btn后我们触发的是按钮，委托的对象===div内部的事件就触发了，

事件委托有个很好的优点，就是不用多次去绑定一个事件，比如一个有着999条新闻的新闻列表，当我们绑定999次的时候，会耗费很多资源，而一次事件委托就足够了

承諾太轻
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery中on与bind的区别
m0_52613676的博客
12-05 397
bind的一般格式： $("#id").bind("click",function(){}) on的一般格式： $("#id").on("click",".class",function(){}) 从写法上看，on比bind多了一个对子标签进行选择的selector（非必须），这就是它们的区别，下面通过实例进行说明： <p name="p">p_Test1</p> <p name="p">p_Test2</p> <div> <in
jQuery中 on 和 bind的区别
by123asdf的博客
11-05 1067
jQuery中 on 和 bind 的区别 先看参数 1.bind有三个参数，分别是event，data，function，也就是事件，额外要添加的数据以及执行函数 2.on有四个参数，分别是event，selector, data，function 分别是事件，选择器，额外添加的数据和执行函数。 首先啊，有没有发现，多了一个选择器. 我们来举个场景的例子 一个大的dom节点里有两个小的节点，比如一个class1，一个class2.所以你会这样写 var x = docuemnt.getElementB
jQuery on和bind的区别
m0_64344470的博客
04-14 86
1、bind方法给每个子元素都添加一个事件，会影响到性能，而on方法不会；3.需要给动态添加的元素绑定时，用delegate()或者on()2、bind动态添加元素时，不能动态绑定事件，而on方法可以。1.选择器匹配到的元素比较多时，不要用bind()迭代绑定。4.用delegate()和on()方法，dom树不要太深。2.用id选择器时，可以用bind()5.尽量使用on()
jquery on和bind的区别
jontyy的博客
12-23 3290
jquery on和bind的区别 Introduce 在jquery插件库下了很多别人写的轮播图源码，就那么傻乎乎的翻一翻，有些代码写的惨不忍睹，有些代码看着看着就让人忍不住拍案叫绝。 在查看源码的时候，发现了一些自己掌握的不熟的知识点，比如题目的on和bind Others 先随便说一说，这里的bind 和javascript的绑定this指针的bind不一样， 后期有时间我会好好整理b...
JQuery的on和bind的区别
lanhezhong的博客
03-06 1588
在js中为某个元素绑定事件时，我们常用到on函数和bind函数，两个函数有什么区别，什么时候用哪个函数，今天脑残小编简单介绍一下，不喜勿喷； 长话短说进入正题. 先看两个方法的写法 $("body").on("click", ".button", function(){ //do something }) $("body .button").bind("click", function(){...
jQuery中bind和on的区别
drakseason的博客
08-01 504
在 jQuery 中，bind() 和 on() 都是用于绑定事件处理程序的方法，它们的功能很相似，但有一些区别。
jquery中bind与on的区别
12-17 468
jquery文档中bind和on函数绑定事件的用法： .bind(events [,eventData], handler) .on(events [,selector] [,data], handler) 从文档中可以看出，.on方法比.bind方法多一个参数'selector' .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如： ...
jQuery的on()和bind()的区别
m0_74913905的博客
04-14 147
在jQuery中，对于如何注册事件有两种方法，但这两种方法却有着不同的区别。接下来为大家先介绍这两种方法，然后再介绍他们之间的区别。
jquery绑定事件 bind和on的用法与区别分析
11-20
本文实例讲述了jquery绑定事件 bind和on的用法与区别。分享给大家供大家参考，具体如下： bind和on都是给元素绑定事件用的,其最大的区别就是事件冒泡 事件冒泡也是委托事件的原型，事件委托就是子类的事情委托给父类的去做 最直观的区别就是on绑定比bind绑定多一个参数‘childSelector’ 语法 $(selector).on(event,childSelector,data,function) 参数 描述 event 必需。规定要从被选元素移除的一个或多个事件或命名空间。 由空格分隔多个事件值，也可以是数组。必须是有效的事件。 childSelect
jquery on()方法和bind()方法的区别
月迷津渡丶的专栏
02-16 3175
bind是直接绑定在一个对象上。$('.btn').bind('click', function() { alert('User clicked'); }); 参数 描述 event 必需。规定添加到元素的一个或多个事件。 由空格分隔多个事件。必须是有效的事件。 data 可选。规定传递到函数的额外数据。
关于jQuery绑定事件on和bind的区别详解 -- sanai
肖明伟 的博客
02-21 4255
如题，jQuery两种绑定事件，举例说明： //对于ul_li的绑定方法 //方法一：$("ul li").bind("click",function(){console.log($(this))});//方法二：$("ul li").on("click",function(){console.log($(this))});//方法三 【推荐】 $("ul").on("click","li",
JQuery事件绑定函数：on()与bind()的差别
热门推荐
aty
02-09 1万+
JQuery从1.7+版本开始，提供了on()和off()，进行事件处理函数的绑定和取消。这2个API与JQuery最初提供的bind()和unbind()有很多相似的地方，也有一些不同之处。bind和unbind的详细介绍，可以参考这篇文章。   on()和bind()的函数签名如下： bind(type, [data], fn) on(type,[selector],[data],fn
jq中bind方法与on方法区别？
王海虎的博客
05-30 5332
jq中bind方法与on方法区别，我今天给大家举个小小的列子特别简单，相信大家一定一眼就能明白其中的区别所在了&lt;!-- 首先我页面之中有一个ul标签 --&gt; &lt;ul class="opo"&gt;     &lt;li&gt;askjdnsajdnk&lt;/li&gt; &lt;/ul&gt;js代码中我们分别使用bind和on方法，来实现点击li的时候，让被点击的dom节点改...
jquery绑定事件 bind和on的区别
nO0b
10-12 6221
bind和on都是给元素绑定事件用的,其最大的区别就是事件冒泡 事件冒泡也是委托事件的原型，事件委托就是子类的事情委托给父类的去做 最直观的区别就是on绑定比bind绑定多一个参数'childSelector' 语法 $(selector).on(event,childSelector,data,function) 参数 描述 event 必需。规定要从被选元素移除的一个...
jquery on()和bind()区别
维之舟的博客
09-19 1055
on()方法就是1.7以后出现的,查看源码可发现bind()与delegate()底层都是用on()方法实现; 函数签名: bind(type, [data], fn) ,on(type,[selector],[data],fn) . 举个栗子:<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1208
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
Vue3企业级项目开发实战课-笔记记录
最新发布
tuku0801的专栏
07-20 802
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
jquery中bind方法是干嘛的
04-28
`bind()` 方法是 jQuery 中用于绑定一个或多个事件处理函数到一个元素上的方法。它可以绑定多个事件，同时可以指定多个事件处理函数。当绑定的事件被触发时，绑定的函数就会被调用。这个方法可以用于绑定用户交互...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值