解析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实用技巧(一)
Aug 16 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
解决layui checkbox 提交多个值的问题
Sep 02 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
理解javascript对象继承
2016/04/17 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
使用python去除图片白色像素的实例
2019/12/12 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
向领导表决心的话
2014/03/11 职场文书
花坛标语大全
2014/06/30 职场文书