解析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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
捕获关闭窗口的脚本
Jan 10 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 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模板引擎SMARTY
2006/10/09 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
JS的get和set使用示例
2014/02/20 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
python中的五种异常处理机制介绍
2014/09/02 Python
wxPython事件驱动实例详解
2014/09/28 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
香港礼品网站:GiftU eshop
2017/09/01 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
金融管理毕业生求职信
2014/03/03 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
经理岗位职责范本
2015/04/15 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
安全教育片观后感
2015/06/17 职场文书
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技