jquery .bind() vs .live() vs .delegate() vs .on()

baukh789 发布于2019-08-20 17:23 / 1518人阅读

摘要：但是当我们点击新添加的元素也就是时，却没有把这个加给它。它的原理是利用事件冒泡最终代理给最顶层的。对于动态生成的元素也生效因为其实是绑定在上的。

假设我们有这样一段html：


    book 1
    book 2

1: .bind()
.bind方法的用法是这样的：targetElment.bind("eventType", eventHandler)
所以假入我们要给

元素绑定一个click事件，那就这样写：

$(document).ready(function(){
    $(".bookList li").bind("click", function(event){
        $(this).addClass("red");
    })
    
    $("button").bind("click", function(event){
        $(".bookList").append("book 3");

    })
})

最开始只有两个

元素，点击

的时候会往当前被点击的

上面添加一个名为‘red’的class。通过点击‘add a li’这个button, 添加一个新的

元素。但是当我们点击新添加的

元素（也就是"book 3"）时，却没有把"red"这个class加给它。所以可以看到bind()有的缺点是：

1: 对于动态添加的元素不会绑定事件
2: 它会给每一个满足条件的dom元素都绑定这个eventHandler
3: 它会带来性能问题
4: 对应解绑方法为：.unbind()

2: .live()
.live方法的用法是这样的：targetElment.live("eventType", eventHandler)
live()的写法和bind是一样，但是它们的功能和实现原理却不一样，不同点有：

1: live()把eventHandler绑定在document上，而不是某个特定的元素节点上。它的原理是利用事件冒泡最终代理给最顶层的document。
2: 对于动态生成的元素也生效（因为eventHandler其实是绑定在document上的）。
3: jQuery 1.7之后live()就被废弃了，用.on()替代
4: 对应的解绑方法为 .die()

3: .delegate()
.delegate方法的用法是这样的：delegatedObject.delegate("targetElment","eventType", eventHandler)
比方说仍然针对我们开头的那段代码，我们把对

的点击事件，委托给它的父节点

$(".bookList").delegate(".bookList li","click", function(event){
        $(this).addClass("red");
 })

.delegate()和live()都用了事件的委托，不用之处在于：

1: delegate()可以自己选择委托给特定的元素，而不是只能是document
2: jQuery 1.7之后.delegate()也被废弃了，要用.on()替换
3: 对应的解绑方法为 .undelegate()

4: .on()
.on()的语法：delegateObject.on("eventType", "targetElement", eventHandler)
jQuery 1.7之后，上面的三个方法都被on取而代之，而用on的不同写法就可以达到跟它们相同的效果：

// Bind
$( ".bookList li" ).bind( "click", function( e ) {} ); 
$( ".bookList li" ).on( "click", function( e ) {} ); 

// Live
$( ".bookList li" ).live( "click", function( e ) {} );
$( document ).on( "click", ".bookList li", function( e ) {} ); 

// Delegate
$( "#bookList" ).delegate( "li", "click", function( e ) {} );
$( ".bookList" ).on( "click", "li", function( e ) {} );

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83555.html

[译] Jquery中 .bind() .live() .delegate() 和 .on() 之间

摘要：方法将事件类型和一个事件处理函数直接注册到了被选中的元素中。方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素即。通过将事件信息注册到上，这个事件处理函数将允许所有冒泡到的事件调用它例如委托型传播型事件。简介我了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑。这些疑惑通常是关于它们之间...

terasum 2019-08-20 18:27 评论0 收藏0
jquery 给动态添加元素实现点击事件

摘要：方法用到了事件委托的概念来处理事件的绑定。可以用在动态添加的元素上缺点需要查找那个那个元素上发生了那个事件了，尽管比少很多了，不过，你还是得浪费时间来查找。当我们试图绑定一些事件到DOM元素上的时候，通常会使用以下的四个方法bind(),on(),live(),delegate()大家应该用的较多的是前两种方法。下面是我对四种方法的理解： Bind()： .bind()是最直接的绑定...

DataPipeline 2019-08-22 17:30 评论0 收藏0
深入理解JQuery中的on方法（事件委派机制）

摘要：它是一个过滤器的作用，只有被选中元素的后代元素才会触发事件。替换是引入的，目的是通过祖先元素来代理委派后代元素的事件绑定问题，某种程度上和优点相似。相关资料深入理解新的绑定事件机制方法的使用新的事件绑定机制前言在开发项目的时候，JQuery的使用极其广泛，如果脑海中没有一点JQuery的基础知识，随性编写，那么就有可能造成bug问题。JQuery 1.4版本之后新增了on方法，这个...

ckllj 2019-06-27 14:17 评论0 收藏0
深入理解JQuery中的on方法（事件委派机制）

摘要：它是一个过滤器的作用，只有被选中元素的后代元素才会触发事件。替换是引入的，目的是通过祖先元素来代理委派后代元素的事件绑定问题，某种程度上和优点相似。相关资料深入理解新的绑定事件机制方法的使用新的事件绑定机制前言在开发项目的时候，JQuery的使用极其广泛，如果脑海中没有一点JQuery的基础知识，随性编写，那么就有可能造成bug问题。JQuery 1.4版本之后新增了on方法，这个...

jindong 2019-08-20 10:22 评论0 收藏0
深入理解JQuery中的on方法（事件委派机制）

摘要：它是一个过滤器的作用，只有被选中元素的后代元素才会触发事件。替换是引入的，目的是通过祖先元素来代理委派后代元素的事件绑定问题，某种程度上和优点相似。相关资料深入理解新的绑定事件机制方法的使用新的事件绑定机制前言在开发项目的时候，JQuery的使用极其广泛，如果脑海中没有一点JQuery的基础知识，随性编写，那么就有可能造成bug问题。JQuery 1.4版本之后新增了on方法，这个...

ralap 2019-08-14 14:30 评论0 收藏0