解析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 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
ES6数组的扩展详解
Apr 25 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
在React中如何优雅的处理事件响应详解
Jul 24 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
angular动态表单制作
Feb 23 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
原生js实现滑块区间组件
Jan 20 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
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
pandas string转dataframe的方法
2018/04/11 Python
Python logging模块用法示例
2018/08/28 Python
Python自动抢红包教程详解
2019/06/11 Python
python中p-value的实现方式
2019/12/16 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
高校生生产实习自我鉴定
2013/09/21 职场文书
争做文明公民倡议书
2014/08/29 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
MongoDB支持的索引类型
2022/04/11 MongoDB