解析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 的一个progressbar widge
Oct 29 Javascript
Javascript事件热键兼容ie|firefox
Dec 30 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
详解封装基础的angular4的request请求方法
Jun 05 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 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
多人战的战术与战略
2020/03/04 星际争霸
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
js获取Get值的方法
2016/09/29 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
通过Pandas读取大文件的实例
2018/06/07 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
Django url 路由匹配过程详解
2021/01/22 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
MADE法国:提供原创设计师家具
2018/09/18 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
大学生个人推荐信范文
2013/11/25 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
专业见习报告范文
2014/11/03 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
公司承诺函范文
2015/01/21 职场文书
调任通知
2015/04/21 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript