解析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的对话框详解与参数
Mar 08 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
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
php中将数组存到文件里的实现代码
2012/01/19 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
PHP-redis中文文档介绍
2013/02/07 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
Javascript倒计时代码
2010/08/12 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
Python检测生僻字的实现方法
2016/10/23 Python
python MySQLdb使用教程详解
2018/03/20 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
汇科协同Java笔试题
2012/03/31 面试题
毕业生教师求职信
2013/10/20 职场文书
银行实习生的自我评价
2014/01/13 职场文书
质量月活动策划方案
2014/03/10 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
学校捐书活动总结
2015/05/08 职场文书
论语读书笔记
2015/06/26 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers
Android实现图片九宫格
2022/06/28 Java/Android