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+开始支持。
jQuery里面的普通绑定事件和on委托事件的更多相关文章
- JQuery给一个元素绑定两次点击事件(第二次点击事件)
		由于项目的要求,需要给复选框设置样式,初始样式:,第一次点击的时候显示,第二次点击时候需要改变该样式:. 设计思路: 当点击次数为奇数时显示带有颜色的图片 当点击次数为偶数时显示没有颜色的图片 下边是 ... 
- Jquery的普通事件和on的委托事件小案例
		以click的事件为例: 普通的绑定事件:$('.btn').click(function(){})绑定 on绑定事件:$(document).on('click','.btn2',function( ... 
- Jquery的普通事件和on的委托事件
		以click的事件为例: 普通的绑定事件:$('.btn').click(function(){})绑定 on绑定事件:$(documnet).on('click','btn2',function() ... 
- 阿里云物联网 .NET Core 客户端 | CZGL.AliIoTClient:9. 自定义委托事件方法
		文档目录: 说明 1. 连接阿里云物联网 2. IoT 客户端 3. 订阅Topic与响应Topic 4. 设备上报属性 4.1 上报位置信息 5. 设置设备属性 6. 设备事件上报 7. 服务调用 ... 
- 阿里云物联网 .NET Core 客户端 | CZGL.AliIoTClient:8. 委托事件
		文档目录: 说明 1. 连接阿里云物联网 2. IoT 客户端 3. 订阅Topic与响应Topic 4. 设备上报属性 4.1 上报位置信息 5. 设置设备属性 6. 设备事件上报 7. 服务调用 ... 
- 通过委托事件实现winform窗体之间的互相刷新
		新建winform窗体Form1和Form2; 接下来要通过点击Form2的按钮,实现Form1界面的同步刷新. 先展示一下最终效果: 1.Form1界面如下: 2.点击按钮弹出Form2,界面如下: ... 
- jQuery如何给body绑定事件?
		jQuery如何给body绑定事件? 代码如下: $(document).bind("resize", function () { alert("php-note.com ... 
- jquery中取消和绑定hover事件的正确方式
		在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑 ... 
- JQuery在循环中绑定事件的问题详解
		JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ... 
随机推荐
- Xcode 项目配置学习
			Xcode有四种build for 分别是: build for Running build for Testing build for Profiling build for Archiving R ... 
- TI CC2541增加一个可读写, 又可以Notify的特征字
			参考这个博客: http://blog.csdn.net/feilusia/article/details/48235691 值得注意是, 测试前, 在手机中先取消对原有的设备的配对. 
- DE1-SOC开发板上搭建NIOS II处理器运行UCOS II
			DE1-SOC开发板上搭建NIOS II处理器运行UCOS II 今天在DE1-SOC的开发板上搭建NIOS II软核运行了UCOS II,整个开发过程比较繁琐,稍微有一步做的不对,就会导致整个过 ... 
- HDU 4315:Climbing the Hill(阶梯博弈)
			http://acm.hdu.edu.cn/showproblem.php?pid=4315 题意:有n个人要往坐标为0的地方移动,他们分别有一个位置a[i],其中最靠近0的第k个人是king,移动的 ... 
- jquery ui 常用(一)(自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器|  )
			条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ... 
- ACM题目————马拦过河卒
			题目描述 棋盘上A点有一个过河卒,需要走到目标B点.卒行走的规则:可以向下.或者向右.同时在棋盘上C点有一个对方的马,该马所在的点和所有跳跃一步可达的点称为对方马的控制点.因此称之为“马拦过河卒”. ... 
- Android 自定义ScrollView ListView 体验各种纵向滑动的需求
			分类: [android 进阶之路]2014-08-31 12:59 6190人阅读 评论(10) 收藏 举报 Android自定义ScrollView纵向拖动 转载请标明出处:http: ... 
- WebDriver使用指南(完整篇)
			第1章 入门 1.1 下载selenium2.0的lib包 http://code.google.com/p/selenium/downloads/list 官方UserGuide: ... 
- Ajax案例:三级联动查询员工的信息(三张表进行内连接)
			需求分析: 通过数据库连接池,可以查询到数据库中员工的各种信息,通过点击下拉框的方式实现三级联动,即:没有点击city下拉框,后面两个下拉框中没有值,这样,点击city下拉框,department下拉 ... 
- River Hopscotch(二分POJ3258)
			River Hopscotch Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 9263 Accepted: 3994 Descr ... 
