jQuery中bind,live,delegate与one方法的用法及区别解析


Posted in Javascript onDecember 30, 2013

bind( )方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。

.bind(eventType[, evnetData], Handler(eventObject))

其中,参数eventType是一个字符串,包含一个或多个javaScript事件类型,例如click,submit或自定义事件的名称,指定多个事件类型时用空格分隔各个类型;eventData为Map类型,给出要传递给事件处理程序的数据,handler指定触发该事件时要执行的函数,eventObject表示事件对象。

.bind()方法将事件处理程序handler附加到匹配元素集合中的每个元素的eventType事件上,如果需要,还可以向事件处理程序传递数据。

live( )方法将一个事件处理程序附加到与当前选择器匹配的所有元素(包含现有的或将来添加的)的指定事件上并返回jQuery对象。

.live(eventType,[eventData],handler)

其中,参数eventType是一个字符串,包含一个或多个javaScript事件类型,例如click,keydown或自定义事件的名称,eventData是可选参数,为Map类型,给出要传递给事件处理程序的数据,该参数是在jQuery1.4中添加的;handler是一个函数,当触发该事件时将执行这些函数

.live()方法将事件处理程序handler附加到每个匹配元素(包含当前存在的和将来添加的)的eventType事件上,必要时还可以使用参加eventData向事件处理程序传递数据。

.live()方法是基本的.bind()方法的一个变形,后者可以将事件处理程序附加到元素·,当调用.bind()时,jQuery对象匹配的元素将被附加上事件处理程序,但以后添加的元素并不会被附加该事件处理程序,因此,还需要对这些元素再次调用.bind()方法。

.one()方法将事件处理程序附加到匹配元素的指定事件并返回jQuery对象。所附加的事件处理程序最多只能执行一次。

.one(eventType,[eventData],handler(eventObject))

其中,参数eventType是一个字符串,包含一个或多个javaScript事件类型,例如click,submit或自定义事件的名称,指定多个事件类型时用空格分隔各个类型;eventData为Map类型,给出要传递给事件处理程序的数据,handler指定触发该事件时要执行的函数,eventObject表示事件对象。

.one()方法与.bind()类似,所不同的是,使用.one()绑定的事件处理程序在执行一次之后将自动取消绑定。

.delegate()方法基于一组特定的根元素将处理程序附加到匹配选择器的所有元素(现有的或将来的)的一个或多个事件上。

.delegate(selector,eventType[,eventData],handler)

其中,参数 selector是一个选择器,用于筛选触发事件的元素;eventType是一个字符串,指定一个或多个JavaScript事件类型(多个事件用空格分隔),例如click,keydown或自定义事件名称;eventData为映射类型,表示要传递给事件处理程序的数据;handler表示触发该事件时执行的函数。

.delegate()与.live()类似,可将每个事件的绑定委托给指定的DOM元素。

Javascript 相关文章推荐
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
纯JS实现轮播图
Feb 22 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
小程序实现列表删除功能
Oct 30 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 Javascript
react实现复选框全选和反选组件效果
Aug 25 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 #Javascript
jQuery中.live()方法的用法深入解析
Dec 30 #Javascript
Javasipt:操作radio标签详解
Dec 30 #Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 #Javascript
jquery获得keycode的示例代码
Dec 30 #Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 #Javascript
JS对象转换为Jquery对象实现代码
Dec 29 #Javascript
You might like
PHP+DBM的同学录程序(1)
2006/10/09 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
python访问系统环境变量的方法
2015/04/29 Python
python re模块findall()函数实例解析
2018/01/19 Python
Python 类的特殊成员解析
2018/06/20 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
python实现五子棋人机对战游戏
2020/03/25 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
爱护草坪标语
2014/06/24 职场文书
理财计划书
2014/08/14 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
保研推荐信格式
2015/03/25 职场文书