当前位置: 首页 > news >正文

jQuery普通绑定事件和on委托事件对比

以click事件为例:

普通绑定事件:$('.btn1').click(function(){}绑定

on绑定事件:$(document).on('click','.btn2',function(){}绑定

那么这两种方式有什么区别呢?

首先我们看看在实践上的区别:

 

①click事件是在页面加载后,获取的所有类名为btn1的元素,然后绑定了这个click事件,你要是通过其他操作再生成一个btn1元素,它就没有click这个事件;

②而on()事件起到了监听的效果,可以实现动态html元素绑定,比如一开始只有一个btn2元素,你通过某种方法又加了一个btn2元素,这个元素也可以点击,可以无限添加btn2。

那么怎么实现这个动态监听的过程呢?

on()事件相当于是$(document).click(function(){if(点击的是btn){}}),给document添加了一个click事件,党点击的是btn,事件冒泡原理,从里到外,就相当于点击了document,那么就会执行后面的操作,本质上只给document添加了一个事件,而click()事件是给所有btn添加了click事件。

另外on()事件可以添加多个事件。

on()委托事件的优点:原来的事件绑定,要绑定好多事件,现在只需要绑定一个事件,大大提高了效率和页面性能,解决的动态添加元素导致不能触发的bug。

Jq1.7+开始支持。

转载于:https://www.cnblogs.com/CaseyWei/p/9493592.html

相关文章:

  • 微信小程序实例:分享给一个人还是分享到群的判断代码
  • 线程与进程的区别(基础面试题)
  • C#将控件置于最顶层和最底层
  • 带有去重以及字符串拼接、日期拼接、字段相除的SQL语句
  • 面试题收集最新
  • js 数组排序
  • Andrew Ng-ML-第十九章-应用举例:照片OCR(光学字符识别)
  • 泛型的理解(1)
  • 使用阿里云接口进行手机号(三网)实名认证
  • unique()函数使用
  • Install MongoDB to Ubuntu 18.04
  • SpringCloud Gateway入门
  • 使用jQuery操作input的value值
  • tpl-angularjs Web端开发工程模板
  • [python] RRT快速拓展随机树
  • 【干货分享】SpringCloud微服务架构分布式组件如何共享session对象
  • 【知识碎片】第三方登录弹窗效果
  • java B2B2C 源码多租户电子商城系统-Kafka基本使用介绍
  • LeetCode541. Reverse String II -- 按步长反转字符串
  • text-decoration与color属性
  • webpack项目中使用grunt监听文件变动自动打包编译
  • Xmanager 远程桌面 CentOS 7
  • yii2权限控制rbac之rule详细讲解
  • 安卓应用性能调试和优化经验分享
  • 对话 CTO〡听神策数据 CTO 曹犟描绘数据分析行业的无限可能
  • 猫头鹰的深夜翻译:JDK9 NotNullOrElse方法
  • 微信小程序开发问题汇总
  • 消息队列系列二(IOT中消息队列的应用)
  • 学习使用ExpressJS 4.0中的新Router
  • kubernetes资源对象--ingress
  • NLPIR智能语义技术让大数据挖掘更简单
  • PostgreSQL 快速给指定表每个字段创建索引 - 1
  • TPG领衔财团投资轻奢珠宝品牌APM Monaco
  • ​力扣解法汇总1802. 有界数组中指定下标处的最大值
  • #【QT 5 调试软件后,发布相关:软件生成exe文件 + 文件打包】
  • (2.2w字)前端单元测试之Jest详解篇
  • (C语言)二分查找 超详细
  • (Redis使用系列) SpringBoot中Redis的RedisConfig 二
  • (附源码)小程序儿童艺术培训机构教育管理小程序 毕业设计 201740
  • (六)c52学习之旅-独立按键
  • (论文阅读22/100)Learning a Deep Compact Image Representation for Visual Tracking
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理 第13章 项目资源管理(七)
  • (学习日记)2024.01.09
  • .NET “底层”异步编程模式——异步编程模型(Asynchronous Programming Model,APM)...
  • .NET Core Web APi类库如何内嵌运行?
  • .NET Micro Framework初体验(二)
  • .NET 分布式技术比较
  • .NET 中各种混淆(Obfuscation)的含义、原理、实际效果和不同级别的差异(使用 SmartAssembly)
  • .NET开发者必备的11款免费工具
  • .NET命名规范和开发约定
  • .Net下使用 Geb.Video.FFMPEG 操作视频文件
  • [ 攻防演练演示篇 ] 利用通达OA 文件上传漏洞上传webshell获取主机权限
  • [Asp.net MVC]Asp.net MVC5系列——Razor语法
  • [bbk5179]第66集 第7章 - 数据库的维护 03
  • [Bugku]密码???[writeup]