jQuery事件绑定on()、bind()与delegate() 方法详解

最新推荐文章于 2024-08-14 20:37:21 发布
最新推荐文章于 2024-08-14 20:37:21 发布
阅读量78 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/ccc0114/p/9553471.html
版权


1.选择器匹配到的元素比较多时，不要用bind()迭代绑定

2.用id选择器时，可以用bind()

3.需要给动态添加的元素绑定时，用delegate()或者on()

4.用delegate()和on()方法，dom树不要太深

5.尽量使用on()

转载于:https://www.cnblogs.com/ccc0114/p/9553471.html

George_Fal
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
10-22
本文将深入探讨四个主要的事件绑定方法：bind()、live()、delegate()和on()，并通过实例来展示它们的用法，以及对比它们之间的差异。 1. **bind()** - `bind()` 是最基础的事件绑定方法，用于向匹配的元素添加一个...
jQuery事件：bind、delegate、on的区别
分享技术，共建开放平台
08-18 3880
最近在AngularJS的开发中，遇到一个神奇的事情：我们用到livebox来预览评论列表中的图片， 然而评论列表是由Angular Resource动态载入的。不可思议的是，点击这些动态载入的图片仍然会触发lightbox的图片预览。 难道lightbox使用先进的MutationObserver技术监听了DOM的变化？观察lightbox源码才发现，原来只是jQuery的.on()方法：
关于jquery的on,bind,delegate
weiyangxiaoping的博客
05-14 153
事件绑定和委托在js里是相当重要的，jquery主要提供了这几种方法： $('div p').bind('click',function(){}); 如果p有多个，会逐一绑定；性能很低 $('div').delegate('p','click',function){}); 利用事件冒泡，将事件绑定在父元素上，但是如果dom很深，冒泡到底部就会很慢 $('div').on('click','p',f
绑定事件on()、bind()与delegate() 方法详解
前端日月明
07-26 613
啃了一段日子的js相关了，学的过程中发现在jQuery中绑定事件时，有人用bind()，有人用on()，有人用delegate()，还有人用live()，看代码的时候觉得都实现功能了也就掀过去了，只是一直没完全弄懂之间的区别，于是今天查了下资料，自己做个总结。 之所以有这么多类型的绑定方法，是因为...
jQuery事件绑定用法详解
10-21
在早期版本的jQuery中，`bind()`是最常用的事件绑定方法，但后来随着jQuery的发展，出现了一些更强大的方法，如`on()`，它在处理动态内容和更复杂的事件委托时更为高效。 #### 示例代码分析 在提供的示例代码中，...
jQuery事件绑定—on()、bind()与delegate()
weixin_34356555的博客
06-02 437
啃了一段日子的js相关了，学的过程中发现在jQuery中绑定事件时，有人用bind()，有人用on()，有人用delegate()，还有人用live()，看代码的时候觉得都实现功能了也就掀过去了，只是一直没完全弄懂之间的区别，于是今天查了下资料，自己做个总结。 之所以有这么多类型的绑定方法，是因为jQuery的版本更新的原因，如on()方法就是1.7以后出现的。 jQuery的事件绑定api页面上...
jQuery的事件委托方法bind 、live、delegate、on之间有什么区别
weixin_42937047的博客
09-06 2526
(1)、bind 【jQuery 1.3之前】 定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数； 语法：bind(type,[data],function(eventObject))； 特点： 　　(1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。 　　(2)、当页面加载完的时候，你才可以进行bind()，所以可能产生...
jQuery的事件委托方法bind 、live、delegate、on之间有什么区别？
田品吕口的博客
10-15 3032
(1)、bind 【jQuery 1.3之前】 定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数； 语法：bind(type,[data],function(eventObject))； 特点： (1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。 (2)、当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题。 实例如...
vue3使用pnpm运行项目但是运行不起来
一个努力不被优化的程序员
08-12 195
重新创建项目，将老项目的package.json，vite.config.ts，src等文件拖拽替换。删除node_modules重新下：文字编译乱码，utf-8可能解析处理问题。（如果哪位知道为什么会这样或者怎么解决麻烦留言下）运行项目的时候发现根本运行不起来了。删除node_modules重新下。尝试过创建.npmr文件。创建.npmr：不管用。
提升前端性能的JavaScript技巧
han2434的博客
08-14 709
一个快速响应、高效运行的Web页面不仅能提升用户体验，还能在一定程度上影响网站的SEO排名。本文汇总了一系列JavaScript技巧，以帮助开发者提升前端性能，并提供实际的代码示例。
Electron学习与总结
song854601134的博客
08-12 215
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
display:flex布局，最简单的案例
有问题可关注公众号：前端研究院 后台输入问题回复
08-12 213
【代码】display:flex布局，最简单的案例。
vue 3d echarts scatter3D元素塌陷，图标塌陷进地图完美解决方案
creatlh的博客
08-12 187
当我们手机用 scatter3D 类型时，最小值因为渲染问题会塌陷进模型里面，所以只要让value固定，再将label formatter 配合 boxHeight属性即可解决，（代码附带自定义label图标解决办法）
Vue2 axios
最新发布
qq_53374893的博客
08-14 115
说明一下， 当前服务器 有资源 就不会走代理服务器了，直接返回当前资源 而且只能代理一个服务器.
jQuery事件绑定与DOM加载详解
jQuery还提供了其他事件绑定方法，如`on()`，它是`bind()`的现代替代品，支持更多的功能，如事件委托。 ### 合成事件 jQuery还处理了一些浏览器原生不支持的“合成事件”，如`mouseenter`和`mouseleave`，它们分别...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值