delegate() 和 live() 方法的背后是什么？答案

【问题标题】：what is behind of delegate() and live() method?delegate() 和 live() 方法的背后是什么？
【发布时间】：2010-12-20 07:36:43
【问题描述】：

jQuery 中 delegate() 和 live() 方法的背后是什么让它们能够处理页面中当前和未来的元素？

【问题讨论】：

标签： jquery-selectors jquery event-delegation jquery-delegate

【解决方案1】：

jQuery Live() Method And Event Bubbling

【讨论】：

【解决方案2】：

jQuerys .live() 和 .delegate() 方法的工作原理是事件可能会在 DOM 树中“冒泡”。这就是短篇小说，听起来很简单，其实很简单。拥有像

这样的DOM结构

<html>
    <body>
        <div>
            <span>Foobar</span>
        </div>
    </body>
 </html>

例如，如果单击span，您的浏览器会检查是否有任何event handlers 绑定到该跨度节点。如果是这样，他们将被解雇。如果这些事件处理程序不停止称为event propagation 的事件，则事件正在冒泡。这意味着您的浏览器将检查父 div node 是否有任何事件处理程序用于附加到它的 click 等等...

在冒泡的任何时候，事件处理程序都可能调用名为.stopPropagation() 的方法，这将阻止此事件进一步冒泡。

现在 jQuery 的 .live() 方法将始终将事件处理程序（例如“点击”）绑定到 <body> 元素。这意味着在页面某处发生的任何click 事件（因为所有其他节点都是document.body 的子节点）将冒泡到<body>，无论在调用.live() 时节点是否已经存在或被添加稍后。

.delegate() 方法更进一步。如果您正在处理一个非常庞大和深邃的 DOM 结构，那么让每个事件冒泡到整个树中似乎在性能方面很昂贵（而且确实如此！）。您可以告诉.delegate() 新创建节点的公共父节点。例如，如果我们正在处理一个添加新的li 节点的无序列表，那么将任何事件处理程序附加到该<ul> 节点就足够了。所有li 节点都是子节点，因此它们的事件正在冒泡。

【讨论】：

其实context.delegate(selector, event, handler)和$(selector, context).live(event, handler)是一模一样的。
@Tgr：是的。 .delegate() 只会调用 .live() 并设置上下文。

【解决方案3】：

delegate 和 live 事件与父元素或 body 元素相关联，而不是与发生它的特定元素相关联。

例如，当您单击一个元素时，单击事件会冒泡到元素的父元素并进一步向 body 元素冒泡，直到有一个处理它的 onclick 处理程序。如果您使用live 来连接点击事件，它会一直等到事件冒泡到 body 元素，在此它会检查事件起源的元素是否与您指定的选择器匹配。

【讨论】：