解析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 输入框内容格式验证代码
Feb 11 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
vue+canvas实现移动端手写签名
May 21 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
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
react native与webview通信的示例代码
2017/09/25 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
利用Hyperic调用Python实现进程守护
2018/01/02 Python
浅析python协程相关概念
2018/01/20 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
python 实现表情识别
2020/11/21 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
详解rem 适配布局
2018/10/31 HTML / CSS
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
门卫岗位职责
2013/11/15 职场文书
一年级评语大全
2014/04/23 职场文书
论文评语大全
2014/04/29 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
会计岗位职责范本
2015/04/02 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书