Javascript 带/不带选择器参数的jquery与jquery委托之间有什么区别？

我使用的是jQuery1.10。我想知道这三种功能之间的区别

哪个功能更好，为什么

委托功能的目的是什么

$(".dropdown-menu").on("click", ".show_opt_menu", function() {
    alert("hello");
});
$(".dropdown-menu .show_opt_menu").on("click", function() {
    alert("hello");
});
$(".dropdown-menu").delegate(".show_opt_menu", "click", function() {
    alert("Delegate");
});

有人能解释一下吗？

第一个是委托事件处理程序。在决定使用提供的选择器（即

.show_opt_menu

）过滤冒泡元素链之前，它会侦听出现在

.dropdown menu

上的冒泡事件。然后，它将您的函数应用于导致事件的任何匹配元素这是首选方式（特别是如果您有动态内容）。

第二个是单个元素上的标准事件侦听器，并导致连接多个事件处理程序。这些元素必须在运行此代码时存在（与事件发生时相反）

最后一种方法与第一种方法相同，但可读性较差，已被jQuery 1.7上的

正式取代：：“从jQuery 1.7开始，.delegate（）已被.on（）方法取代。但是，对于早期版本，它仍然是使用事件委派的最有效方法”

在前两个选项中，我个人的偏好是始终使用委托事件处理程序，因为这样更有效。但是，由于此示例适用于
单击
事件，因此任何解决方案之间的速度差异都可以忽略不计（除非每秒可以单击50000次）。：）
 首先，第三个函数（
.delegate
）已被
.on
（jQuery 1.7以后）取代，因此我不会使用它

第二种方法将运行复杂的选择器“.dropdown menu.show_opt_menu”，这是（相对）昂贵的，因为它首先获得所有
。show_opt_menu
s然后查看哪些具有
。dropdown menu
。然后，它为每个元素绑定一个事件。这是（相对）昂贵的，因为您正在运行一个缓慢的查询，然后可能绑定许多事件

第一种方法是最好的，因为它只将一个事件绑定到
。下拉菜单
，然后每当
单击
事件时，它会检查该事件以查看原始目标是什么。这是一个更便宜的选择，而且因为只有一个事件被绑定，所以性能更高


总结：#1是最好的，#2是常用的，但更糟糕的是，#3是过时的

无论如何，您可能不会注意到任何性能差异，但无论如何都值得注意，因为这是一个很好的实践。在某些时候，您可能需要关注性能。
.delegate（）

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

.delegate（）已被.on（）方法取代

此函数将click事件附加到。当目标元素为。show_opt_menu时，将执行下拉菜单
这意味着当您动态添加另一个。显示选项菜单不需要附加单击功能。父项负责单击操作

$(".dropdown-menu .show_opt_menu").on("click", function() {
alert("hello");
});

此函数将单击事件附加到.show_opt_菜单，因此当您动态添加新的.show_opt_菜单时，您需要将事件单独附加到该菜单

$(".dropdown-menu").delegate(".show_opt_menu", "click", function() {
alert("Delegate");
});

就我所知，on
on
的相同目的是新的
代理
。但是。代理仍在与我一起处理JQUERY1.11不推荐的意思是它仍然存在，只是他们建议您不要使用它
.on
已正式取代它-请参阅
$.on（'evt'，'selector'，callback）
在内部只是转发到
$。上次我检查时，代理
。它并不是真的被弃用，它只是一个简单的例子alias@EliasVanOotegem在这种情况下，我将把答案从弃用改为取代：）这是他们在API知识库中使用的词，我想更合理的是，如果您有许多事件处理程序，并且jquery选择器是document
$（document），您可能不会注意到任何性能差异。on（事件，选择器，fn）；
，您会注意到性能差异，因为建议不要这样做。为了获得最佳性能，请在尽可能靠近目标元素的文档位置附加委派事件。避免对大型文档上的委派事件过度使用document或document.body。
$(".dropdown-menu").delegate(".show_opt_menu", "click", function() {
alert("Delegate");
});