JQuery委托 - 为什么有两个选择器？

Question

我刚刚发现委托看起来非常有用，但即使阅读完文档后我仍然对某些内容感到困惑。

以前我绑定了所有这些事件：

$("#myTextBox").on("input", control.Search);

现在我按照这样的文档来做这件事：

$("#myDiv").delegate("#myTextBox", "input", control.Search);

为什么委托使用两个选择器？为什么不呢：

$("#myTextBox").delegate("input", control.Search);

Answer 1

第一个选择器是您用作“root”或“base”元素的元素，第二个选择器是您要将事件处理程序附加到的元素。它的目的是允许您将事件处理程序附加到较低级别的元素（较低级别意味着DOM下方的元素），但让它在更高级别处理。它的用处是当你有动态DOM时，就像一个TABLE，你要添加一堆行，这些行有按钮来删除行或其他东西。

您还可以使用on()方法执行相同的交易。

Answer 2

来自jQuery docs .delegate：

  

为所有匹配的元素附加处理程序到一个或多个事件   选择器，现在或将来，基于一组特定的根   元素

.on仅绑定调用.on时存在的元素的事件：

  

将一个或多个事件的事件处理函数附加到   选定的元素

您还应该注意根据文档：

  

从jQuery 1.7开始，.delegate（）已被.on（）方法取代

Answer 3

JQuery的文档解释得很好：http://api.jquery.com/delegate/ 此外，自JQuery 1.7以来，委托已被弃用。

Answer 4

.delegate()用于使用事件委派来注册事件处理程序...

当使用正常事件注册时，它仅将处理程序注册到执行注册代码时存在于dom中的那些元素。当我们可能不得不处理动态添加的元素时，这种方法可能是不可行的。

在事件委托模型中，处理程序注册到祖先元素，当页面加载了一个选择器以过滤掉源元素时，该元素将出现。这利用了事件传播 - 元素中发生的事件传播到所有祖先元素（像焦点事件这样的例外）。因此，元素中发生的事件会传播到其中一个元素中的祖先元素，然后处理器被注册，然后事件源元素（event.target）及其祖先与作为第二个参数传递的选择器匹配，如果满足则处理程序已执行。 http://api.jquery.com/on/#direct-and-delegated-events

因此，在delegate()的情况下，事件处理程序被添加到调用delegate()方法的元素集中，以及当input事件从其后代冒泡到当选择器用于确定是否执行事件的处理程序时。