解析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 相关文章推荐
把input初始值不写value的具体实现方法
Jul 04 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
jquery实现网页定位导航
Aug 23 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
react-native 封装选择弹出框示例(试用ios&android)
Jul 11 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
JS数组的常用10种方法详解
May 08 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
MySql中正则表达式的使用方法描述
2008/07/30 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
PHP多进程编程实例
2014/10/15 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
vue-axios使用详解
2017/05/10 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
构造方法和其他方法的区别
2016/04/26 面试题
十八届三中全会个人学习材料
2014/02/13 职场文书
教师师德承诺书
2014/03/26 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
小学优秀班主任材料
2014/12/17 职场文书
2015感人爱情寄语
2015/02/26 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang