以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委托事件的更多相关文章

  1. JQuery给一个元素绑定两次点击事件(第二次点击事件)

    由于项目的要求,需要给复选框设置样式,初始样式:,第一次点击的时候显示,第二次点击时候需要改变该样式:. 设计思路: 当点击次数为奇数时显示带有颜色的图片 当点击次数为偶数时显示没有颜色的图片 下边是 ...

  2. Jquery的普通事件和on的委托事件小案例

    以click的事件为例: 普通的绑定事件:$('.btn').click(function(){})绑定 on绑定事件:$(document).on('click','.btn2',function( ...

  3. Jquery的普通事件和on的委托事件

    以click的事件为例: 普通的绑定事件:$('.btn').click(function(){})绑定 on绑定事件:$(documnet).on('click','btn2',function() ...

  4. 阿里云物联网 .NET Core 客户端 | CZGL.AliIoTClient:9. 自定义委托事件方法

    文档目录: 说明 1. 连接阿里云物联网 2. IoT 客户端 3. 订阅Topic与响应Topic 4. 设备上报属性 4.1 上报位置信息 5. 设置设备属性 6. 设备事件上报 7. 服务调用 ...

  5. 阿里云物联网 .NET Core 客户端 | CZGL.AliIoTClient:8. 委托事件

    文档目录: 说明 1. 连接阿里云物联网 2. IoT 客户端 3. 订阅Topic与响应Topic 4. 设备上报属性 4.1 上报位置信息 5. 设置设备属性 6. 设备事件上报 7. 服务调用 ...

  6. 通过委托事件实现winform窗体之间的互相刷新

    新建winform窗体Form1和Form2; 接下来要通过点击Form2的按钮,实现Form1界面的同步刷新. 先展示一下最终效果: 1.Form1界面如下: 2.点击按钮弹出Form2,界面如下: ...

  7. jQuery如何给body绑定事件?

    jQuery如何给body绑定事件? 代码如下: $(document).bind("resize", function () { alert("php-note.com ...

  8. jquery中取消和绑定hover事件的正确方式

    在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑 ...

  9. JQuery在循环中绑定事件的问题详解

    JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...

随机推荐

  1. Java常见编码方式简介

    计算机只能识别二进制数据,早期由来是电信号. 为了方便应用计算机,让它可以识别各个国家的文字. 就将各个国家的文字用数字来表示,并一一对应,形成一张表. ASCII:美国标准信息交换码. 用一个字节的 ...

  2. 为博客启用MetaWeBlog API

    最近想写一个博客系统,主要有以下几点功能. 能够使用Live Writer来发布.修改文章 使用MongoDB作为持久化 对于博客中的图片.CSS.JS文件,使用CDN加速 后期可加上Radis 使用 ...

  3. Serialize Documents with the C# Driver

    1.介绍 该文档是1.8版本的C#驱动. 本节教程讨论C#类和BSON文档之间的序列化和反序列化.序列化是将对象映射成一个可以存储在MongoDB中的BSON文档的过程,反序列化是从一个BSON文档重 ...

  4. HDU 5768:Lucky7(中国剩余定理 + 容斥原理)

    http://acm.hdu.edu.cn/showproblem.php?pid=5768 Lucky7 Problem Description   When ?? was born, seven ...

  5. Unix/Linux编程实践教程(二:socket、多线程、进程间通信)

    同一接口不同的数据源: 协同进程: fdopen以文件描述符为参数: fopen和popen: 为了实现popen,必须在子进程中调用sh,因为只有shell本身即/bin/sh可以运行任意shell ...

  6. 使用oracle写if判断

    DECLARE L_X INT; BEGIN SELECT COUNT(*) INTO L_X FROM SYSTEMROLEFUNCTION WHERE ROLEID = '1'; IF L_X & ...

  7. 如何用Pr完成作业~

    要求~ 我的工具~(随便搞搞就好了,自己的录音还没弄~)

  8. ACM-ICPC国际大学生程序设计竞赛北京赛区(2016)网络赛 A Simple Job

    描述 Institute of Computational Linguistics (ICL), Peking University is an interdisciplinary institute ...

  9. java提高篇---Vector

    对于List接口这里还介绍一个它的实现类Vector,Vector 类可以实现可增长的对象数组. 一.Vector简介 Vector可以实现可增长的对象数组.与数组一样,它包含可以使用整数索引进行访问 ...

  10. MUI 页面传值 webview

    我们假设a.html 和b.html a.html 页面代码 <!DOCTYPE html> <html> <head> <meta charset=&quo ...