解析jQuery的三种bind/One/Live事件绑定使用方法_jquery

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 等。

时间: 2024-10-31 04:46:25

解析jQuery的三种bind/One/Live事件绑定使用方法_jquery的相关文章

三种取消选中单选框radio的方法_jquery

本文提供了三种取消选中radio的方式,代码示例如下: 本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的. <!DOCTYPE HTML> <html> <head> <title>单选按钮取消选中的三种方式</title> <script type="text/javascript" src="http://lib.sinaapp.com/js/jqu

ff下JQuery无法监听input的keyup事件的解决方法_jquery

复制代码 代码如下: $(document).ready(function(){    $('#news_title').bind('input',fun).bind('keyup',fun);}); //function listvar fun=function(){    value=$(this).val();    $('.prev').text(value);} 注: bind('input',fun)  用于ff下keyup bind('keyup',fun) 用于ie

解析云服务三种模式的安全策略

对于不同的云服务模式,安全关注点是不一样的;当然,也有一些是这3种模式需要共同关注的,即无论是IaaS.PaaS,还是SaaS,都应该关注的安全,如:数据安全.加密和密钥管理.身份识别和访问管理. 安全事件管理.业务连续性等等.IaaS层安全策略:IaaS涵盖了从机房设备到其中的硬件平台等所 有的基础设施资源层面.IaaS层的安全,主要包括物理与环境安全. 主机安全.网络安全. 虚拟化安全.接口安全.1.物理安全:是指保护云计算平台免遭地震.水灾.火灾等事故以及人为行为导致的破坏.2.主机安全:

总结三种ASP.Net中上传文件的方法

ASP.Net的WebForm开发模式中,封装了FileUpload控件,可以方便的进行文件上传操作.但有时,你可能不希望使用ASP.Net中的服务器控件,仅仅使用Input标签来实现文件上传.当然也是可以的.下面总结在项目中使用过的上传文件的方式. 本文我们总结了三种ASP.Net中上传文件的方法. 一.使用Asp.Net中的FileUpload服务器端控件实现上传 使用asp.net中的服务器端控件FileUpload上传文件非常方便.FileUpload对上传操作进行了封装,你只需要调用S

三种类型的DNS攻击以及应对方法

本文讲的是 :   三种类型的DNS攻击以及应对方法 ,   [IT168 方案] DNS服务器能够将IP地址翻译成域名,这就是为什么你可以在浏览器输入cnw.com.cn来访问我们的网站,而不需要记住IP地址. 当DNS被攻击时,可能发生各种情况,不过,攻击者经常使用两种方法来利用被攻击的DNS服务器.首先,攻击者可以做的第一件事情是重定向所有入站流量到他们选择的服务器.这使他们能够发动更多的攻击,或者收集包含敏感信息的流量日志. 攻击者可以做的第二件事情是捕捉所有入站电子邮件.更重要的是,第

三种asp.net页面跳转的方法_实用技巧

第一种方法:response.redirect这个跳转页面的方法跳转的速度不快,因为它要走2个来回(2次postback),但它可以跳转到任何页面,没有站点页面限制(即可以由雅虎跳到新浪),同时不能跳过登录保护.但速度慢是其最大缺陷!redirect跳转机制:首先是发送一个http请求到客户端,通知需要跳转到新页面,然后客户端在发送跳转请求到服务器端.需要注意的是跳转后内部空间保存的所有数据信息将会丢失,所以需要用到session.代码如下  using System; using System

jQuery学习笔记之DOM操作、事件绑定(2)

jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https://github.com/iyun/jQueryDemo.git --------------------学习目录------------------------ 4.DOM操作(节点增删改查) 节点查找:节点分为三种类型:元素节点.属性节点.文本节点 创建节点 创建元素节点 使用 jQuery

jquery移除了live()、die(),新版事件绑定on()、off()的方法_jquery

我蛋疼了快10分钟,怎么调用都是报错,最后一查,原来jquery已经移除了live()和die()方法.使用了新的事件绑定方法on().解除绑定方法off(). 新的绑定方法on()和比live()相比,效率比之前的高.因为live()是固定在document节点上的.如果绑定的元素嵌套在很深的层中,那么事件一级级的传递必将影响到效率.而on()是绑定在$()选择的元素上,嵌套深度可自由选择. on()的参数 on( events [, selector ] [, data ], handler

Android解析XML的三种方式SAX、Pull、Dom_Android

在android开发中,经常用到去解析xml文件,常见的解析xml的方式有一下三种:SAX.Pull.Dom解析方式.最近做了一个android版的CSDN阅读器,用到了其中的两种(sax,pull),本文对android解析xml的这三种方式进行一次总结. 今天解析的xml示例(channels.xml)如下: <?xml version="1.0" encoding="utf-8"?> <channel> <item id=&quo