bind(),live(),delegate(),on()绑定事件方式
1、bind():向匹配元素添加一个或多个事件处理器。
适用所有版本,但是自从jquery1.7版本以后bind()函数推荐用on()来代替。
$(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:必需;当绑定事件发生时,需要执行的函数;
2、live():向当前或未来的匹配元素添加一个或多个事件处理器;
jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替。
$(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:必需;当绑定事件发生时,需要执行的函数;
3、delegate():为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用delegate()方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
适用jquery1.4.2及其以上版本;
$(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:必需;当绑定事件发生时,需要执行的函数;
4、on():为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用on()方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)
jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;
$(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:必需;当绑定事件发生时,需要执行的函数;
四种方式的异同和优缺点
相同点:1、都支持单元素多事件的绑定;空格相隔方式或者大括号替代方式;
2、均是通过事件冒泡方式,将事件传递到document进行事件的响应;
比较和联系:
1、bind()只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持未来新添加元素的事件设置;
2、bind()在jquery1.7版本以前比较受推崇,1.7版本出来以后,官方已经不推荐用bind(),替代函数为on()。live()函数在1.9版本已经删除。
3、live()函数和delegate()函数两者类似,但live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些。
4、bind()支持jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+;
代码:
.container { width: 300px; height: 300px; border: 1px solid #ccc; background-color: green; } .btn_test { border: 1px solid #ccc; padding: 5px 15px; cursor: pointer; }
<div class="fz"><div class="header"><input type="button" value="按钮" class="btn_test"></div><div class="container"></div> </div>
<script>$(function () { // bind(); // 添加单个事件处理 // $(".btn_test").bind("click",function(){// $(".container").slideToggle(); // }); // 添加多个事件处理 // 空格相隔方式 // $(".btn_test").bind("mouseout click",function(){// $(".container").slideToggle(); // }); // 大括号替代方式 // $(".btn_test").bind({// "click":function(){// $(".container").slideToggle(); // }, // "mouseout":function(){// alert("这是mouseout事件"); // } // }); // 删除绑定事件 // $(".btn_test").unbind("click");// live();支持1.9以下版本 // 添加单个事件处理 // $(".btn_test").live("click",function(){// $(".container").slideToggle(); // }); // 添加多个事件处理 // 空格相隔方式 // $(".btn_test").live("mouseout click",function(){// $(".container").slideToggle(); // }); // 大括号替代方式 // $(".btn_test").live({// "mouseout":function(){// alert("这是mouseout事件"); // }, // "click":function(){// $(".container").slideToggle(); // } // }); // 删除事件处理 // $(".btn_test").die("click");// delegate(); // 单元素添加事件 // $(".header").delegate(".btn_test","click",function(){// $(".container").slideToggle(); // }); // 单元素添加多事件 // 空格相隔方式 // $(".header").delegate(".btn_test","click mouseout",function(){// $(".container").slideToggle(); // }); // 大括号替代方法 // $(".header").delegate(".btn_test",{// "mouseout":function(){// alert("这是mouseout事件"); // }, // "click":function(){// $(".container").slideToggle(); // } // }); // on(); // 添加单个事件处理 // $(".header").on("click",".btn_test",function(){// $(".container").slideToggle(); // }); // 添加多个事件处理 // 空格相隔方式 // $(".header").on("mouseout click",".btn_test",function(){// $(".container").slideToggle(); // }); // 大括号替代方式$(".header").on({"mouseout":function(){alert("这是mouseout事件");},"click":function(){$(".container").slideToggle();}},".btn_test"); // 删除事件$(".header").off("click",".btn_test");}) </script>
转载于:https://www.cnblogs.com/zhaojieln/p/4256436.html
bind(),live(),delegate(),on()绑定事件方式相关推荐
- 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...
- 浅谈Jquery中的bind()、live()、delegate()、on()绑定事件方式
一.on(),live(),bind() on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建 ...
- 【转】jQuery中的bind(),live(),delegate(),on()事件绑定方式的区别
bind() ...
- jQuery事件绑定on()、bind()与delegate() 方法详解
啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是 ...
- [jQuery] 谈一下Jquery中的bind(),live(),delegate(),on()的区别?
[jQuery] 谈一下Jquery中的bind(),live(),delegate(),on()的区别? 在我们深入了解这些方法之前,我们先来一段常见的的HTML,作为我们编写jquery示例方法使 ...
- 关于事件委托的整理 ,另附bind,live,delegate,on区别
随着DOM结构的复杂化和Ajax等动态脚本技术的运用导致如今的js界里最火热的一项技术应该是'事件委托(event delegation)'了,什么是事件委托呢?小七给你娓娓道来,说白了就是想给子元素 ...
- click() bind() live() delegate()区别
click(),bind(),live()都是执行事件时使用的方法,他们之前是有一些区别的,我们在使用这些方法时应该根据需要进行选择. 1.click()方法是我们经常使用的单击事件方法: <s ...
- jquery之bind(),live(),delegate()
大纲: 1.bind(),live(),delegate()的含义 2.三者基于相同的原理即js的事件冒泡 3.三者相互之间的异同. bind()+live() V.S. delegate():bin ...
- JQuery的click、bind、delegate、off、unbind
.click与.bind .click和.bind都是给每个元素绑定事件,对于只绑定一个click事件,.bind事件的简写就是.click那种方式. 这两种方式都会出现两个问题: 第一个问题,如果要 ...
最新文章
- java_2018_Day7_静态static
- Codeforces 1188 题解
- B端运营级视频服务技术平台搭建
- Oracle入门(十四.23)之管理触发器
- 测试驱动开发 测试前移_为什么测试驱动的开发有用?
- google浏览器 隐藏功能开启
- BZOJ_1606_ [Usaco2008_Dec]_Hay_For_Sale _购买干草_(背包)
- 新闻简报(7/18)
- tomcat设置子域名session共享以及修改JSESSIONID
- sklearn——加载数据集
- 基于OpenCascade 与COIN3D的机械臂仿真测试
- 双子星tv源码_双子星IPTV电视直播管理系统源码安装教程
- python截图搜题_用python的OCR实现自动截图搜题
- 微信小程序——如何实现账号的注册、登录?
- 从外包公司到今日头条offer,帮你突破瓶颈
- 轻便易用的三维建模软件
- 为什么你的网速一直快不起来?
- MTL多目标学习介绍综述等
- 第二章第四题(将磅转换为千克)(convert pound to kilogram)
- 对AutoResetEvent和ManualResetEvent的理解
热门文章
- kafka session.timeout.ms 是指消费一条数据的时间?_干货 | Kafka 内核知识梳理,附思维导图...
- java 反射覆盖方法,java – 确定一个方法是否覆盖使用反射的另一个?
- mysql 5.1.6 安装包_Centos6 离线安装 MySQL5.5.55-1(附带安装包及 Perl 依赖包)
- java主线程和子线程区别_主线程异常– Java
- c语言中isdigit函数_在C / C ++中使用isdigit()
- Total Commander 常用快捷键
- 智能虚拟代理改善了哪些行业?
- 开课吧课堂:人工智能行业走向如何?
- 开课吧Java课堂:什么是主线程?如何去运用?
- canvas学习笔记-贝塞尔曲线