解析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 相关文章推荐
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 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
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
js实现图片局部放大效果详解
2019/03/18 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
Django卸载之后重新安装的方法
2017/03/15 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
python 实现多线程下载视频的代码
2019/11/15 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
社区综治工作汇报
2014/10/27 职场文书
给领导的感谢信范文
2015/01/23 职场文书
怎样写观后感
2015/06/19 职场文书
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android