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


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

  • 相关阅读:
    关于范型
    c#.net实体类序列化方法  为什么要序列化
    游标示例
    干掉switch语句
    java面向对象总结(一)
    Java泛型简明教程(转)
    java 成员变量、局部变量、静态变量
    Java 集合类图(转)
    java泛型(擦除)
    java垃圾回收
  • 原文地址:https://www.cnblogs.com/jianglan/p/2105586.html
Copyright © 2020-2023  润新知