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 ...
随机推荐
- Google 开发新的开源系统 Fuchsia
google 最新os 下载 https://github.com/fuchsia-mirror/magenta 本文转自:http://www.oschina.net/news/76094/goog ...
- WWDC 2016 总结
一年一次的WWDC,是开发者充值信仰的时刻,今天你的信仰充值了吗?欢迎在本文下面留言吐槽. 有外媒称,这届WWDC苹果将“fun”伪装成“innovation”,的确,看看另两家老对手,微软有黑科技H ...
- PHP使用PHPExcel删除Excel单元格指定列的方法是怎样
有一个系统仅公司内部和外部经销商使用,在一个导出功能中公司内部员工跟外部经销商导出的列是不一样的(某些数据是不能提供给经销商的)因为导出的数据都是一样的(某些列外数据外部没有)因此并没有单独处理,而是 ...
- 第一课: iOS入门
xcode几个项目模板的说明: http://blog.csdn.net/chang6520/article/details/7926444 1. single view app: xcode中的st ...
- mysql 段错误 (core dumped)
一直使用好好的mysql命令,突然今天抽风,无论使用任何mysql选项都报“段错误 (core dumped)”,以为是mysqld程序出问题了,所以我尝试重启,因为我的环境上是多实例,用了mysql ...
- 使用ResourceBundle访问资源文件(properties)帮助类
import java.util.ResourceBundle; /** * 读取properties文件的帮助类 * @author */ public class PropertiesUtil { ...
- python 购物车和三级菜单
程序:购物车程序 需求: 启动程序后,让用户输入工资,然后打印商品列表 允许用户根据商品编号购买商品 用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒 可随时退出,退出时,打印已购买商品和余额 ...
- Distinct<TSource>(IEqualityComparer<TSource> comparer) 根据列名来Distinct
1. DistinctEqualityComparer.cs public class DistinctEqualityComparer<T, V> : IEqualityComparer ...
- TreeView 节点的显示,读取,操作
using System;using System.Collections;using System.Configuration;using System.Data;using System.Linq ...
- 测试Animation大型动画文件拆分播放的可行性
最近遇到一个问题,剧情动画文件大了复杂了之后,每次修改输出很麻烦,导出fbx就需要20分钟. 所以我想到了一个比较好的解决方法,在unity这边解决.把动画文件拆分成若干份,然后赋予不同的层并行播放 ...