Fork me on GitHub

jq绑定事件的方法以及区别与使用技巧

　　jQuery提供了多种绑定事件的方式，而每种方式各有其特点，了解它们之间的异同点，有助于我们在写代码的时候进行正确的选择，从而写出更容易维护和理解的代码。

　　jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。

　　第一种：bind()        向被选元素添加的一个或多个事件，以及当事件发生时运行的函数。

函数调用形式：$("selector").bind(event,[data],function)     （data是可选的，规定传递到函数的额外数据）

<body>
    <ul id="list">
        <li>手机</li>
        <li>电脑</li>
        <li>电视</li>
    </ul>
    <button>添加</button>
</body>
<script>

　　$("button").click(function(){
　　　　var inner=$("#list").html();
　　　　inner+="<li>增加</li>";
　　　　$("#list").html(inner);
　　})

</script>
 

一对一：

    $("li").bind("click",function(){
        $(this).css({"background":"red"})
    })

一对多：

$("li").bind("click mouseout dbclick",function(){  
        $(this).css({"background":"red"})
 });

多对多：

 $("li").bind({"click":function(){  
        $(this).css({"background":"red"});
 },"mouseout":function(){  
        $(this).css({"color":"white"})
 }});

第二种：live()     用法可参考bind，这里需要注意一点，bind只能给已经存在的元素绑定事件，而live还能给未来的元素绑定事件

    $("li").live("click",function(){
        $(this).css({"background":"red"});
    })

jQuery官方已宣布在1.7版本开始废弃live，改用其他方式代替。

第三种 : delegate()    

函数调用形式： delegate(childSelector,event,data,function)

实际上，这就是事件委托，可以理解为把子元素的活委托给父元素，并且这种方式也可以绑定未来元素（脚本生成的元素）

  $("ul").delegate("li","click",function(){  
     $(this).css({"background":"red"});  
  });

第四种：on()

函数调用形式： on(event,childSelector,data,function);

实际上，就是把delegate的俩个参数位置调换了，实例如下：

 $("ul").on("click","li",function(){  
     $(this).css({"background":"red"}); 
 });

 on 绑定多个事件 并且调用不同函数

$(document).ready(function(){
      $("p").on({"click":function(){  
        $(this).css({"background":"yellow"});
     },"mouseover":function(){  
        $(this).css({"color":"red"})
     }});  
});

 

总结一些：

bind是比较早的一种绑定事件的方式，1，7后官方并不推荐使用，并且除了bind以外，live、delegate、on都支持对未来元素的绑定。

live 比 delegate性能差些，on现在使用比较多。

　

 

posted @ 2017-06-02 17:18  leeyen  阅读(911)  评论(0)  编辑  收藏  举报