jQuery中 .bind() .live(). delegate() . on() 的区别

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery中 .bind() .live(). delegate() . on() 的区别相关的知识,希望对你有一定的参考价值。

jQuery中   .bind()    .live().   delegate() .   on()  的区别

 
这几种方法都是绑定事件用到的,但是他们之间有些差别

bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数

例如:
<ul>
          <a href="#"><li>1111111</li></a>
          <a href="#"><li>22222</li></a>
          <a href="#"><li>33333</li></a>
          <a href="#"><li>44444</li></a>
          <a href="#"><li>555555</li></a>
      </ul>
<script>
    $("a").bind("click",function(){
        alert("ok")
    });
</script>


例如当我们用bind为a元素绑定事件时,有多少a元素,就是绑定多少次事件 ,这样比较消费性能

这种绑定方式有以下缺点:

1)它会绑定事件到所有选出来的元素上 ,例如上面的a元素

2)当页面加载完成是,才可以进行bind(),所以效率较低

3) 不可以为动态创建的html元素绑定事件,即动态创建的html用bind绑定是无效的



live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的

以上面的例子为例:

$("a").live("click",function(){
        alert("ok")
    });

delegate(selector,[type],[data],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数

<ul>
          <a href="#"><li>1111111</li></a>
          <a href="#"><li>22222</li></a>
          <a href="#"><li>33333</li></a>
          <a href="#"><li>44444</li></a>
          <a href="#"><li>555555</li></a>
      </ul>
      <input type="button" id="btnAdd" value="添加新的元素" />

点击添加新元素按钮,添加一个li元素,并为新添加的li元素绑定事件,代码如下:

$("#btnAdd").on("click",function(){
        $("ul").append("<a id=‘ltLast‘ href=‘#‘‘><li>我是后添加的了哦</li></a>");
        
    });

     //动态创建的html绑定事件需要用到delegate方法
    $("ul").delegate("#ltLast","click",function(){
            alert("可以点击我么");
        });

 

以上是关于jQuery中 .bind() .live(). delegate() . on() 的区别的主要内容,如果未能解决你的问题,请参考以下文章

jQuery中bind函数用法

jquery的bind跟on绑定事件的区别

jquery的bind跟on绑定事件的区别

vue 点击当前元素改变样式

Jquery中bind和live的区别

在 jQuery 中使用 BIND 或 ON 函数的最佳实践 [重复]