解析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 相关文章推荐
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
微信小程序自定义可滑动日历界面
Dec 28 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 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
ThinkPHP的I方法使用详解
2014/06/18 PHP
PHP制作万年历
2015/01/07 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
int在python中的含义以及用法
2019/06/27 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
Python的in,is和id函数代码实例
2020/04/18 Python
10张动图学会python循环与递归问题
2021/02/06 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
预备党员入党思想汇报
2014/01/04 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
经理岗位职责范本
2015/04/15 职场文书
丧事答谢词大全
2015/09/30 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang