jquery on方法带/不带选择器参数和jquery delegate方法有什么区别？

Question

jquery on方法带/不带选择器参数和jquery delegate方法有什么区别？

7

我正在使用jquery 1.10。我想知道这三个函数之间的区别。

哪个函数更好，为什么？

delegate函数的目的是什么？

$(".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");
});

有人能为我解释一下吗？

- soccer7

2

据我所知，“on”是新的“delegate”。 - harpax

4个回答

7

第一种是“委托事件处理程序”。它监听在冒泡到`.dropdown-menu`的事件，然后使用提供的选择器（即`.show_opt_menu`）过滤冒泡元素链。然后将你的功能应用于任何匹配的元素“造成事件”。这是首选方式（特别是如果你有动态内容）。 第二种是标准事件监听器，适用于单个元素，并导致连接多个事件处理程序。这些元素必须存在于代码运行时（与事件发生时不同）。

最后一种与第一种相同，但不太可读，已被正式取代为`on`: http://api.jquery.com/delegate/: “自jQuery 1.7版本以来，`.delegate()`已被`.on()`方法取代。但在较早版本中，它仍然是使用事件委托的最有效方法。”

在前两个选项中，我个人偏爱始终使用“委派事件处理程序”，因为它更有效率。但是，由于此示例旨在处理“click”事件，因此任何解决方案之间的速度差异都可以忽略不计（除非您每秒可以点击50000次）。 :)

- Gone Coding

2

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

这个函数将点击事件附加到 .dropdown-menu，当目标元素是 .show_opt_menu 时执行。这意味着当您动态添加另一个 .show_opt_menu 时，不需要附加点击函数。父元素负责点击操作。

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

这个函数将点击事件附加到.show_opt_menu，所以当您动态添加新的.show_opt_menu时，需要单独附加事件。

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

同on的作用相同

- vimalpt

0

.delegate()

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

.delegate() 已被 .on() 方法取代。

- Prashant Tapase

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joe · Accepted Answer

首先，第三个函数（.delegate）已经被 .on（jQuery 1.7 及以上版本）取代，因此不建议使用它。

第二种方法将运行复杂的选择器“.dropdown-menu .show_opt_menu”，这是相对较昂贵的，因为它首先获取所有的.show_opt_menu，然后查看哪些元素的父元素是.dropdown-menu。它然后为每个元素绑定一个事件。由于你运行了一次缓慢的查询，然后可能绑定了许多事件，所以这是相对较昂贵的。

第一种方法是最好的，因为它只绑定了一个事件到.dropdown-menu，然后每当一个click事件冒泡到它时，它会检查事件以查看原始目标是什么。这是一个更便宜的选项，而且由于只有一个事件被绑定，所以它的性能更好。

总结：#1 是最好的，#2 是通常做法但更劣，#3 已经过时。

你可能不会注意到任何性能差异，但还是值得关注，因为这是良好的实践。在某些情况下，你可能需要关注性能。