Question

jQuery中delegate()和live()方法背后的内容是什么，使他们能够为页面中的当前和未来元素工作？

Answer 1

Answer 2

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

这样的DOM结构

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

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

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

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

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

Answer 3

delegate和live事件连接在父元素或body元素上，而不是发生在它上面的特定元素。

当您单击元素时，click事件会冒泡到元素的父元素并进一步朝向body元素，直到有一个onclick处理程序来处理它。如果您使用live来挂钩click事件，它将等到事件冒泡到body元素，然后它将检查事件源自的元素是否与您指定的选择器匹配。

delegate（）和live（）方法的背后是什么？

3 个答案: