Jquery中的bind(),live(),delegate(),on()绑定事件方式

bind()

简要描述

  bind()向匹配元素添加一个或多个事件处理器。

使用方式

  $(selector).bind(event,data,function)

  event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;

          单事件处理:例如 $(selector).bind("click",data,function);

          多事件处理:1.利用空格分隔多事件,例如 $(selector).bind("click dbclick mouseout",data,function);

                2.利用大括号灵活定义多事件,例如$(selector).bind({event1:function, event2:function, ...}) 

                3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;

                 大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;     

  data:可选;需要传递的参数;

  function:必需;当绑定事件发生时,需要执行的函数;

适用Jquery版本

  适用所有版本,但是根据官网解释,自从jquery1.7版本以后bind()函数推荐用on()来代替。

live()

简要描述

  live() 向当前或未来的匹配元素添加一个或多个事件处理器;

使用方式

  $(selector).live(event,data,function)

  event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;

      单事件处理:例如 $(selector).live("click",data,function);

      多事件处理:1.利用空格分隔多事件,例如 $(selector).live("click dbclick mouseout",data,function);

            2.利用大括号灵活定义多事件,例如 $(selector).live({event1:function, event2:function, ...}) 

            3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;

               大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;    
  data:可选;需要传递的参数;

  function:必需;当绑定事件发生时,需要执行的函数;

适用Jquery版本

  jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替。

delegate()

简要描述

  delegate() 为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

使用方式 

  $(selector).delegate(childSelector,event,data,function)

  childSelector: 必需项;需要添加事件处理程序的元素,一般为selector的子元素;

  event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;

      单事件处理:例如 $(selector).delegate(childselector,"click",data,function);

      多事件处理:1.利用空格分隔多事件,例如 $(selector).delegate(childselector,"clickdbclick mouseout",data,function);

            2.利用大括号灵活定义多事件,例如 $(selector).delegate(childselector,{event1:function, event2:function, ...}) 

            3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;

               大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;    
  data:可选;需要传递的参数;

  function:必需;当绑定事件发生时,需要执行的函数;

适用Jquery版本

  jquery1.4.2及其以上版本;

on()

简要描述

  on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

使用方式 

  $(selector).on(event,childselector,data,function)

  event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;

      单事件处理:例如 $(selector).on("click",childselector,data,function);

      多事件处理:1.利用空格分隔多事件,例如 $(selector).on("click dbclick mouseout",childseletor,data,function);

            2.利用大括号灵活定义多事件,例如 $(selector).on({event1:function, event2:function, ...},childselector); 

            3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;

               大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;

  childSelector: 可选;需要添加事件处理程序的元素,一般为selector的子元素;    

  data:可选;需要传递的参数;

  function:必需;当绑定事件发生时,需要执行的函数;

适用Jquery版本

  jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;

四种方式的异同和优缺点

相同点:
  1.都支持单元素多事件的绑定;空格相隔方式或者大括号替代方式;

  2.均是通过事件冒泡方式,将事件传递到document进行事件的响应;

比较和联系:
1.bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持未来新添加元素的事件设置;演示代码如下:

2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以

 用来代替live()函数,live()函数在1.9版本已经删除;

3.live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些,想了解具体情况,请戳这:
 http://kb.cnblogs.com/page/94469/
4.bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+; 

总结
  如果项目中引用jquery版本为低版本,推荐用delegate(),高版本jquery可以使用on()来代替,以上仅为个人看法,如有不同想法,欢迎拍砖交流。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/182840.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

不同类型的开源许可证

不同类型的开源许可证 什么是开源许可证 最简单的解释是,开源许可证是计算机软件和其他产品的许可证,允许在定义的条款和条件下使用、修改或共享源代码、蓝图或设计。开源并不意味着该软件可以根据需要使用、复制、修改和分发。根据开源许可证的类型&a…

gcp, loki, honeybadger 查看日志 语句

gcp, loki, honeybadger 查看日志 语句 GCP resource.type“cloudsql_database” AND logName:“projects/ebay-mag/logs/cloudsql.googleapis.com%2Fpostgres.log” AND ( textPayload:“[2823409]”) log_name“projects/ebay-mag/logs/cloudsql.googleapis.com%2Fpostgres…

代码随想录算法训练营第四十九天 | 121. 买卖股票的最佳时机,122.买卖股票的最佳时机II

目录 121. 买卖股票的最佳时机 122.买卖股票的最佳时机II 121. 买卖股票的最佳时机 题目链接:121. 买卖股票的最佳时机 比较好想到的是贪心算法,贪心选择价格更低的日子买入,价格更高的日子卖出。 class Solution { public:int maxProfit(vec…

ROS命令行工具

1、roscore 在使用ROS之前,首先要启动roscore进程。当我们在终端中运行这个命令时,系统就会启动ROS Master、参数服务器和日志节点。在这之后,就可以运行任何其他的ROS程序/节点了。所以可以在一个终端窗口运行roscore指令&#…

【unity实战】基于权重的随机事件(附项目源码)

文章目录 前言开始一、简单的使用二、完善各种事件1. 完善生成金币事件2. 完善生成敌人事件敌人3. 完善生成药水事件 最终效果参考源码完结 前言 随机功能和UnityEvent前面其实我们都已经做过了,但是随机UnityEvent事件要怎么使用呢?这里就来举一个例子…

【Linux驱动开发】编译Android12源码+

编译Android12源码 1. 简单描述2. 准备资料3. 编译Android12 1. 简单描述 基于讯为电子rk3568教程 2. 准备资料 rk_android12.0_sdk_20220720.tar.gz 3. 编译Android12 解压 tar -vxf rk_android12.0_sdk_20220720.tar.gz设置屏幕配置 rk_android12.0_sdk/kernel-4.19/ar…

关于src别名的配置之tsconfig.json配置

tsconfig.json {"compilerOptions": {"baseUrl": "./", // 解析非相对模块的基地址,默认是当前目录"paths": { //路径映射,相对于baseUrl"/*": ["src/*"] }} } ① "baseUrl": &…

力扣 226.反转二叉树

目录 1.解题思路2.代码实现 1.解题思路 该题思路很简单,就是利用递归,将每次的root结点的左右树相互交换即可,最后再返回root结点. 2.代码实现 struct TreeNode* invertTree(struct TreeNode* root) { if(rootNULL)return NULL;struct Tree…

由于找不到steam_api64.dll如何修复?steam_api64.dll丢失多种解决方法

steam_api64.dll文件介绍 steam_api64.dll是Steam平台的一个关键组件,主要用于支持Steam客户端和相关游戏的应用程序。这个文件缺失或损坏会导致Steam及相关游戏无法正常运行。它位于Steam安装目录的bin子文件夹中。 steam_api64.dll丢失的原因 系统误删&#xf…

专攻C++真题合集(1)

C语言作为一门广泛使用的编程语言,已经成为了许多IT领域从业者的必备技能之一。为了帮助大家更好地掌握C语言,本文将为大家提供一些专门的C真题。 1. 指针 题目一:请编写一个函数,函数名为swap,交换两个整数型变量的…

爬虫代理技术与构建本地代理池的实践

爬虫中代理的使用: 什么是代理 代理服务器 代理服务器的作用 就是用来转发请求和响应 在爬虫中为何需要使用代理? 隐藏真实IP地址:当进行爬取时,爬虫程序会发送大量的请求到目标网站。如果每个请求都使用相同的IP地址&#xff…

【C++】POCO学习总结(七):进程、管道、进程间同步、共享内存

【C】郭老二博文之:C目录 1、Poco::Process 进程 1.1 说明 Poco::Process的功能: 获取有关当前进程的一些信息开始一个新的进程终止另一个进程 1.2 用法 头文件:#include “Poco/Process.h” Poco::Process中的所有方法都是静态的。 常…

修复 MyBatis 中空值引起的 SQL 语法错误

修复 MyBatis 中空值引起的 SQL 语法错误 背景 最近在查看别人的项目代码时&#xff0c;遇到了一个问题&#xff1a;数据库中的数据为空。在调试过程中&#xff0c;发现问题出现在调用 MyBatis 中的方法&#xff1a;listByIds(Collection<? extends Serializable> idL…

[cmake] --- find_package

1 find_package的作用 find_package是CMake中用于查找并加载外部库的指令。它可以根据指定的参数在系统或用户指定的路径中查找库文件&#xff0c;并生成相应的变量供后续使用。 2 find_package基本语法 find_package(<PackageName> [version] [EXACT] [QUIET] [MODUL…

医学机器学习数据集介绍与使用 ABIDE Autism Brain Imaging Data Exchange I

ABIDE I 简介 自闭症脑成像数据交换I&#xff08;ABIDE I&#xff09;代表了第一个ABIDE倡议。作为基层工作&#xff0c;ABIDE I涉及17个国际站点&#xff0c;共享以前收集的静息态功能磁共振成像&#xff08;R-fMRI&#xff09;、解剖和表型数据集&#xff0c;这些数据集可供…

.net core 封装一个统一的返回结果

public class ApiResponse<T> { public bool Success { get; set; } public T? Data { get; set; } public string? Message { get; set; } public ApiResponse(bool success, T? data, string errorMessage "") { …

矩阵快速幂及应用实战[C/C++]

矩阵快速幂 矩阵快速幂可以用来优化递推问题&#xff0c;如状态机DP&#xff0c;需要一丢丢线性代数里面矩阵的概念&#xff0c;只需要知道简单的矩阵乘法&#xff0c;结合我们普通的二分快速幂就能很快的掌握矩阵快速幂。 问题引入 三步问题。有个小孩正在上楼梯&#xff0c;楼…

选择三个机器学习算法,代码实现 ,并选择一个数据集进行性能分析

1. 线性回归算法 线性回归是一种用于预测连续数值的监督学习算法。以下是使用Python和scikit-learn库实现线性回归的示例代码&#xff1a; import numpy as np from sklearn.linear_model import LinearRegression from sklearn.model_selection import train_test_split from…

Linux(openssl):X509_verify通过ca证书的public key验证证书的签名

/docs/man3.0/man3/X509_verify.html (openssl.org) 提供了方法用于通过ca证书的public key验证证书的签名 //verify_cert.hpp #include <string> #include <memory> #include <filesystem> #include <openssl/pem.h>using namespace std; namespace …

一文学会Aiohttp

一、什么是aiohttp库 aiohttp库官网&#xff1a;https://docs.aiohttp.org/en/stable/ aiohttp是一个Python的HTTP客户端/服务器框架&#xff0c;它基于asyncio库实现异步编程模型&#xff0c;可以支持高性能和高并发的HTTP通信。aiohttp用于编写异步的Web服务器、Web应用程序…