【转】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,"click dbclick 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()均支持未来新添加元素的事件设置;

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>jquery中四种方式给未来元素设置事件</title><style type="text/css">.container{width: 300px;height: 300px;border: 1px #ccc solid;background-color: Green;}.btn-test{border: 1px #ccc solid;padding: 5px 15px;cursor: pointer;}</style><script src="js/jquery-1.8.0.min.js" type="text/javascript"></script><script type="text/javascript">$(function () {//利用bind()方法,给P标签设置click方法   ======失败 没有任何反应=======$(".container p").bind("click", function () {alert("bind()添加单击事件成功!");});//利用live()方法.给P标签设置click方法   =======成功调用方法============$(".container p").live("click", function () {alert("live()添加单击事件成功!");});//利用delegate()方法.给P标签设置click方法  =======成功调用方法============$(".container").delegate("p", "click", function () {//显示隐藏divalert("delegate()添加单击事件成功!");});//利用on()方法.给P标签设置click方法  =======成功调用方法============$(".container").on("click", "p", function () {//显示隐藏divalert("on()添加单击事件成功!");});//按钮添加P标签$(".btn-test").click(function () {$(".container").append("<p>这是新增的段落!</p>");});});</script>
</head>
<body><input type="button" class="btn-test" value="添加元素" /><div class="container"></div>
</body>
</html>

  

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.9-;delegate()支持jquery1.4.2+;on()支持jquery1.7+; 

转自 作者:枫上善若水

      出处:http://www.cnblogs.com/xilipu31/p/4105794.html

转载于:https://www.cnblogs.com/jack2013/p/4514839.html

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

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

相关文章

LeetCode之Two Sum II - Input array is sorted

1、题目 Given an array of integers that is already sorted in ascending order, find two numbers such that they add up to a specific target number. The function twoSum should return indices of the two numbers such that they add up to the target, where index…

php 怎么定义一个空对象,php定义空对象的方法

本文主要和大家分享php定义空对象的方法&#xff0c;有时候我们直接对不存在的数组直接定义其下标的值,不会报错,但是我们定义不存在的对象的时候,就会报错,这个时候我们定义一个空对象即可.有以下三种方法:<?php $obj1 new \stdClass;// Instantiate stdClass object$obj…

C#利用Socket实现客户端之间直接通信

2019独角兽企业重金招聘Python工程师标准>>> 实验功能&#xff1a; 设计程序&#xff0c;分别构建通信的两端:服务器端和客户端应用程序,套接字类型为面向连接的Socket,自己构建双方的应答模式&#xff0c;实现双方的数据的发送和接收&#xff08;S发给C&#xff0c…

如何在画面中摆放大量图片

2019独角兽企业重金招聘Python工程师标准>>> 有设计经验的一般都知道&#xff0c;版式设计需要对画面元素之间的关系有充分的认识&#xff0c;并能够在足够有限空间内合理布局&#xff0c;将图形与文字合理结合&#xff0c;下面就来给大家介绍下版式设计的方法。 如…

实现流水灯以间隔500ms的时间闪烁(系统定时器SysTick实现的精确延时)

/** ****************************************************************************** * file main.c * author iuc * version version 1.0 * date 2015-5-19 19:37:52 * brief 流水灯闪烁 ****************************************************************************** …

Android之解决360奇酷手机控制台打印全等级日志(默认只打印W、E等级日志)

1、问题 360奇酷手机很奇葩&#xff0c;默认安卓日志只打印等级W、E,现在我想打印所有等级日志 2、解决办法 1、在桌面点击拨号&#xff0c;在拨号盘输入“*20121220#”&#xff0c;进入工程模式; 2、点击“日志输出等级” 3、选择下面的选项 Log print enable 选 enable J…

php为什么在变量前加,php中变量前加、@等符号是什么意思?

如&#xff1a;$this->config &$config;如&#xff1a;if($_POST[add]){...}还有这个static function &instance() {static $object;if(empty($object)) {$object new self();}return $object;}分别都是什么意思和作用&#xff0c;请说明&#xff0c;感谢&#xf…

几个想法,有兴趣的可以深入下去

这些想法都是不成熟的想法&#xff0c;但是觉得会很有意思&#xff0c;先记于此&#xff0c;有兴趣的可以研究。 转载于:https://www.cnblogs.com/todoit/p/3793887.html

Windows获取CPU、内存和磁盘使用率脚本

获取CPU使用率脚本&#xff08;vbs&#xff09;&#xff0c;另存为cpu.vbs&#xff1a;On Error Resume Next Set objProc GetObject("winmgmts:\\.\root\cimv2:win32_processorcpu0") Wscript.Echo "CPU 使用率: " & objProc.LoadPercentage & …

ASP.NET Core 替换 Action 实际执行方法

RequestDelegate上次&#xff0c;我们在《如何判断当前请求的API类型》中查看endpoints.MapControllers()实现时&#xff0c;最终定位到ActionEndpointFactory.cs&#xff0c;其中有这样一段代码&#xff1a;private static RequestDelegate CreateRequestDelegate() {// We do…

最新版富文本编辑器UEditor操作教程

最近项目中使用到了富文本编辑器&#xff0c;选择的是百度的UEditor。所以对其进行了研究&#xff0c;发现最近发布了新版本&#xff0c;与以往的用法有的改变。一下对UEditotr 的是用做一下详细的介绍。 首先是UEditotr的下载&#xff0c;下载地址&#xff1a;http://ueditor.…

LeetCode之Construct the Rectangle

1、题目 For a web developer, it is very important to know how to design a web pages size. So, given a specific rectangular web page’s area, your job by now is to design a rectangular web page, whose length L and width W satisfy the following requirements:…

php ftp 创建文件夹失败,PHP使用FTP函数创建目录

这篇文章主要为大家详细介绍了PHP使用FTP函数创建目录&#xff0c;具有一定的参考价值&#xff0c;可以用来参考一下。经测试代码如下&#xff1a;// create directory through FTP connectionfunction FtpMkdir($path, $newDir) {$serverftp.yourserver.com; // ftp 地址$conn…

Servlet请求转发中文乱码解决

2019独角兽企业重金招聘Python工程师标准>>> 在Servlet的使用过程中&#xff0c;如果在请求转发的同时需要获得输出流并且写出数据的时候&#xff0c;需要设定resp 的编码格式&#xff0c;否则的话&#xff0c;跳转之后的页面很可能会出现中文乱码的问题。 转载于:h…

NodeJs .net core connect Azure service bus

最近有个项目需要使用nodejs 使用语言是Typescript 发送消息给Azure service bus消息格式是XML.但是发送到queue中并不是xml格式,而是string.string格式的消息直到看到azure/service-bus sdk 接口的定义才发现.如果接收消息应用不是javascript sdk框架(因为使用是.net sdk框架接…

Angular 2 Decorators - 1

在我们深入了解 Angular 2 中 NgModule、Component、Injectable 等常见的装饰器之前&#xff0c;我们要先了解 TypeScript 中的装饰器。装饰器是一个非常酷的特性&#xff0c;最早出现在 Google 的 AtScript 中&#xff0c;它出现的目的是为了让开发者&#xff0c;开发出更容易…

LeetCode之Relative Ranks

1、题目 Given scores of N athletes, find their relative ranks and the people with the top three highest scores, who will be awarded medals: "Gold Medal", "Silver Medal" and "Bronze Medal". Example 1: Input: [5, 4, 3, 2, 1] Out…

php yii 插入,Yii2 批量插入、更新数据实例

在使用yii2开发项目时,有时候会遇到这样的情况:向后台发送多条数据,其中一些数据已经存在记录,只需要对其部分字段的值进行修改;而另一部分的数据则需要新添加进去.这就需要对添加的数据进行判断,其中一些执行update,剩下的执行insert代码如下,不对的地方请指教://批量更新,并将…

c++代码寻找USB00端口并添加打印机

USB00*端口的背景 插入USB端口的打印机&#xff0c;安装打印机驱动&#xff0c;在控制面板设备与打印机处的打印机对象上右击&#xff0c;可以看到打印机端口。对于不少型号&#xff0c;这个端口是USB001或USB002之类的。 经观察&#xff0c;这些USB00*端口并不是打印机驱动所…

WCF中使用控件的委托,线程中的UI委托

UI界面&#xff1a; <Window x:Class"InheritDemo.Window1"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"Title"Window1" Height"300" Widt…