解析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 相关文章推荐
jQuery 选择器理解
Mar 16 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
js实现导航吸顶效果
Feb 24 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
微信小程序滑动选择器的实现代码
Aug 10 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
微信小程序入门之绘制时钟
Oct 22 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
element-ui点击查看大图的方法示例
Dec 14 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入门
2007/01/04 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
详解python 发送邮件实例代码
2016/12/22 Python
浅谈对yield的初步理解
2017/05/29 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
深入理解Django的中间件middleware
2018/03/14 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
如何基于python操作excel并获取内容
2019/12/24 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
做人民满意的公务员活动方案
2014/08/25 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis