解析jQuery的三种bind/One/Live事件绑定使用方法


Posted in Javascript onDecember 30, 2013

jQuery是 一款优秀的JavaScript框架,在旧版里主要用bind()方法,在新版里又多了两种One(),Live(),下面介绍这几种方法的使用:

1. bind/Unbind
在jquery的事件模型中,有两个基本的事件绑 定函数,bind与unbind,这两个函数的含义就是匹配页面元素进行相关事件的处理。比如我们在JS中经常使用到的 onfocus,onblur,onmouseover,onmousedown等事件都可以作为bind的参数进行传递。

$("#id").bind('click',function(){alert('tt!')});

其中bind的第一个参数代表的含义是:事件类型(注意不需要加on),function中的代码就是你要执行的逻辑 代码
多个事件绑定:bind还允许你绑定多个事件,事件名字之间用空格隔开,例如:

$('a').bind('click mouseover',function(){

在最新的jquery1.4版本中,对bind方法进行了改进,你可以在bind方法传入一个类JSON对象来一次绑定多 个事件处理函数。

$('a').bind({
click:function(){alert('a');},
mouseover:function(){alert('a again!')}

在function函数中,你还可以通过传递一个javaScript对 象给function方法,这个事件对象通常是可以省略的。
bind中还有一个参数data, 该参数一般情况下很少使用,通常为了解决在同一个方法中处理同一个变量时有很好的处理。

var productname="Sports Shoes";
$('#Area').bind('click',function(){
alert(productname);
});

productname="necklace",
$('#Area').bind('click',function(){
alert(productname);
});

由于变量productname被重新赋值,所以输出的消息都是”necklace”,这里不了解可以去查阅下关于JavaScript的变量作用域,要 解决这个问题就必须使用到data参数,

var productname="Sports Shoes";
$('#Area').bind('click',{pn:productname},function(){
alert(event.data.pn);
});
productname="necklace",
$('#Area').bind('click',{pn:productname},function(){
alert(event.data.pn);
});

2. One
为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。该方法与bind方法的参数一样,与bind方法的区别就是只对匹配元素的事 件处理执行一次,执行完之后,以后再也不会执行,当然重新发起web请求时它又会执行一次。

$('a').one('click',function(){
alert('a');
})

单击页面上的a元素后,弹出消息,除非用户发起第二次请求,否则再次点击a元素不会弹出消息对话框。

3. live
该方法主要是能处理动态添加的元素,给那些后添加的元素也一样绑定事件。

$('a').live('click,function(){
alert('show message!');
})

然后如果我添加一个元素,

$('body').appnend('Another Element');

那么该元素也会被触发事件处理函数alert。
另外,jQuery还提供了一些绑定这些标准事件类型的简单方式,比如.click()用于简化.bind(‘click')。

一共有以下这些事件名称:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 等。

Javascript 相关文章推荐
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
JS实现可控制的进度条
Mar 25 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
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 #Javascript
You might like
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
Jquery练习之表单验证实现代码
2010/12/14 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
python实现excel读写数据
2021/03/02 Python
儿童学习python的一些小技巧
2018/05/27 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
Python中and和or如何使用
2020/05/28 Python
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
人力资源管理毕业生自荐信
2014/06/26 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
小学优秀教师材料
2014/12/15 职场文书
秋季运动会开幕词
2015/01/28 职场文书
商务邀请函
2015/01/30 职场文书
云冈石窟导游词
2015/02/04 职场文书
心灵点滴观后感
2015/06/02 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
python实现商品进销存管理系统
2022/05/30 Python