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 相关文章推荐
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 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 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
DOM事件探秘篇
2017/02/15 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
简介Python中用于处理字符串的center()方法
2015/05/18 Python
python先序遍历二叉树问题
2017/11/10 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
python相对企业语言优势在哪
2020/06/12 Python
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
XML文档面试题
2015/08/05 面试题
计算机应用专业毕业生求职信
2014/06/03 职场文书