解析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 相关文章推荐
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
js中创建对象的几种方式
Feb 05 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
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
PHP7 echo和print语句实例用法
2019/02/15 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
Python日志处理模块logging用法解析
2020/05/19 Python
python如何实现图片压缩
2020/09/11 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
生物制药毕业生自荐信
2013/10/16 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
大学信息公开实施方案
2014/03/09 职场文书
爱与责任演讲稿
2014/05/20 职场文书
小组名称和口号
2014/06/09 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
活动简报范文
2015/07/22 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python