当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-08-25

    本文导语:  jQuery是 一款优秀的JavaScript框架,在旧版里主要用bind()方法,在新版里又多了两种One(),Live(),下面介绍这几种方法的使用: 1. bind/Unbind在jquery的事件模型中,有两个基本的事件绑 定函数,bind与unbind,这两个函数的含义就是匹配...

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


    
 
 

您可能感兴趣的文章:

  • nginx将泛解析的匹配域名绑定到子目录配置方法
  • php static延迟静态绑定实例解析
  • 可视化Swing中JTable控件绑定SQL数据源的两种方法深入解析
  • 解析在WTL下使用双缓冲的实现方法
  • 解析使用C++编写无错代码的方法技巧
  • crawler4j抓取页面使用jsoup解析html时的解决方法
  • python解析模块(ConfigParser)使用方法
  • 解析C#中@符号的几种使用方法详解
  • c#使用nsoup解析html乱码解决方法分享 nsoup教程
  • Android中使用Gson解析JSON数据的两种方法
  • 解析如何使用反射调用类型成员 方法,字段,属性
  • 解析Android中使用自定义字体的实现方法
  • java中使用sax解析xml的解决方法
  • Android中使用sax解析xml文件的方法
  • 解析如何正确使用SqlConnection的实现方法
  • Android 使用Pull方法解析XML文件的方法
  • python解析html开发库pyquery使用方法
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • GridView控件事件详细解析
  • C#中委托和事件的区别实例解析
  • windows下tinyxml.dll下载安装使用(c++解析XML库)
  • 请教redhat9下什么命令执行arp解析和逆向arp解析
  • 使用libpcap读取tcpdump抓取的文件并解析c代码实例
  • 如何用libxml2 默认解析器解析HTML文件
  • 基于Python的Html/xml解析库Beautiful Soup 4.2.1发布
  • linux能否成为动态域名解析客户端的动态域名解析服务器?
  • html中<radio>单选按钮控件标签用法解析及如何设置默认选中
  • 配置DNS服务器后,服务器可解析,客户端不能解析。求解
  • Python下Html/xml解析库Beautiful Soup快速入门教程
  • 为什么我在使用nslookup命令的时候,正向解析(域名-》ip)没有问题,反向解析(ip-》域名)怎么查不到呢?
  • 基于Python的html解析库:pyquery最新版主页及pyquery下载
  • 服务器本机能解析域名,其它机子都解析不到,能ping通dns服务器地址,是什么问题?//
  • python下xml解析库lxml最新版下载安装以及代码示例
  • 我有一个DNS服务器,既要解析自己局域网里IP,有要解析外网上的IP,如www.163.com,我该如何设置呢
  • python对XML的解析方法(SAX,DOM,ElementTree)介绍
  • 请问怎样手工的解析XML文件啊.( 不借助任何的xml解析器)急!!!
  • php通过pack和unpack函数实现对二进制数据封装及解析
  • 通过shell解析文件,并根据解析内容生成新的文件。
  • html中<checkbox>标签用法解析及如何设置checkbox复选框的默认选中状态
  • java 公式解析 表达式解析 expression-analyzer
  • html中<select>标签用法解析及如何设置select的默认选中状态
  • 请问各位:我用SUN公司的JAXP开发包解析XML文档,可不知道对XML解析后如何将结果写回文件中。请各位熟悉Java和XML的高手帮忙。


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3