Jquery 为什么“on”事件支持委派，而其“快捷方式”方法不支持委派？

根据，on事件在连接到DOM节点时支持委派。据我所知，这意味着您可以有2个DOM节点，事件从内部节点或其内部某处开始，然后冒泡到外部节点。在此之前，当您只指定一个节点打开时，事件会冒泡到文档的绝对外部节点，称为文档，我相信如果将文档作为外部DOM节点，会发生完全相同的情况。on的快捷方式事件（如单击和更改）似乎没有实现委派，这意味着事件必须一直冒泡到文档顶部。如果我把这个解释弄糟了，我肯定我弄糟了，请纠正我。为什么会这样

例如，我可以

$("form").on("click", "button", function() {
    window.location.href = "submit-page.php";
});

哪一个是授权，还是

$("button").on("click", function() {
    window.location.href = "submit-page.php";
});

事件将从文档中冒泡出来的地方。但是，例如，click似乎只能使用第二个表单

$("button").click(function() {
    window.location.href = "submit-page.php";
});

.on仅在与两个选择器一起使用时支持委派，如中所示：

$("#parent").on("click", "#child", fn);

像.click这样的快捷方式不支持两个选择器语法，因此不支持以相同的方式委派

在您的代码示例中，这两个代码块的行为并不相同：

$("form").on("click", "button", function() {
    window.location.href = "submit-page.php";
});

$("button").on("click", function() {
    window.location.href = "submit-page.php";
});

第一个按钮使用事件委派，并将响应起源于button对象的传播事件，即使该按钮是在添加事件处理程序很久之后添加的。第二种是仅直接事件处理，并且仅将事件处理程序附加到事件处理代码最初运行时存在的对象。这就是直接事件处理和委托事件处理之间的区别

另一个细微的区别是，第一个按钮只响应表单中包含的按钮事件事件事件事件通过表单对象向上传播，而第二个按钮则响应页面中安装事件处理程序时存在的任何按钮的事件，即使这些按钮不在表单中

在您的代码示例中，这两个确实具有相同的行为—都是直接事件处理程序，并且仅对安装事件处理程序时存在的对象起作用：

$("button").on("click", function() {
    window.location.href = "submit-page.php";
});

$("button").click(function() {
    window.location.href = "submit-page.php";
});

.on仅在与两个选择器一起使用时支持委派，如中所示：

$("#parent").on("click", "#child", fn);

像.click这样的快捷方式不支持两个选择器语法，因此不支持以相同的方式委派

在您的代码示例中，这两个代码块的行为并不相同：

$("form").on("click", "button", function() {
    window.location.href = "submit-page.php";
});

$("button").on("click", function() {
    window.location.href = "submit-page.php";
});

第一个按钮使用事件委派，并将响应起源于button对象的传播事件，即使该按钮是在添加事件处理程序很久之后添加的。第二种是仅直接事件处理，并且仅将事件处理程序附加到事件处理代码最初运行时存在的对象。这就是直接事件处理和委托事件处理之间的区别

另一个细微的区别是，第一个按钮只响应表单中包含的按钮事件事件事件事件通过表单对象向上传播，而第二个按钮则响应页面中安装事件处理程序时存在的任何按钮的事件，即使这些按钮不在表单中

在您的代码示例中，这两个确实具有相同的行为—都是直接事件处理程序，并且仅对安装事件处理程序时存在的对象起作用：

$("button").on("click", function() {
    window.location.href = "submit-page.php";
});

$("button").click(function() {
    window.location.href = "submit-page.php";
});

在on存在之前，click函数曾是bind的别名。bind将事件直接附加到指定的元素

有关绑定的更多信息，请参见此处：

看起来他们从未觉得有必要将功能扩展到添加on之后已经存在的功能之外，只是简单地将内部代码移植到on而不是bind上使用

在这两种情况下，我通常只使用on并跳过诸如click之类的快捷方式。

在on存在之前，click函数曾经是bind的别名。bind将事件直接附加到指定的元素

有关绑定的更多信息，请参见此处：

看起来他们从未觉得有必要将功能扩展到添加on之后已经存在的功能之外，只是简单地将内部代码移植到on而不是bind上使用

---

在这两种情况下，我通常只使用on并跳过快捷方式方法，如单击。

非委托方法没有冒泡。它们只是将处理程序附加到绑定它们的特定元素上。冒泡由on的委托表单使用：当您单击按钮时，事件冒泡到表单。然后，附加在那里的泛型处理程序将检查事件的目标是否与选择器参数匹配，在这种情况下，它将运行您提供的处理程序

委派比普通绑定有更多的运行时开销，因为每当在包含元素中的任何位置单击时，内部jQuery处理程序都必须运行—它无法将处理程序附加到更具体的元素，因为在建立绑定时它们可能不存在。自从 这仅在特殊情况下才需要，快捷语法不提供执行此操作的方法

您可能希望向jQuery论坛提交建议。增强快捷方式方法以允许以下语法可能不会太困难：

$("form").click("button", function() { ... });

以下简称：

$("form").on("click", "button", function() { ... });

---

据我所知，这与任何现有语法都没有冲突。

对于非委托方法没有冒泡。它们只是将处理程序附加到绑定它们的特定元素上。冒泡由on的委托表单使用：当您单击按钮时，事件冒泡到表单。然后，附加在那里的泛型处理程序将检查事件的目标是否与选择器参数匹配，在这种情况下，它将运行您提供的处理程序

委派比普通绑定有更多的运行时开销，因为每当在包含元素中的任何位置单击时，内部jQuery处理程序都必须运行—它无法将处理程序附加到更具体的元素，因为在建立绑定时它们可能不存在。因为这只在特殊情况下才需要，所以快捷语法没有提供实现这一点的方法

您可能希望向jQuery论坛提交建议。增强快捷方式方法以允许以下语法可能不会太困难：

$("form").click("button", function() { ... });

以下简称：

$("form").on("click", "button", function() { ... });

---

---

据我所知，这与任何现有语法都没有冲突。

您的第一段和第二段代码不相同。这就是为什么你会看到不同的行为。.click最初的目的不是委托，而是将事件处理程序附加到特定对象。老实说，我不太明白您的要求。你想知道快捷方式是如何实现的吗？或者事件委托一般是如何工作的？顺便说一句，这3个代码示例应该是表单提交的一个极其简单的表示形式，以防有人没有得到它。@FelixKling我在问为什么on有这两个变体，但click没有，但我猜答案，因为它经常是，比这更复杂，它们并不完全相同。事实上，我认为这是由于API的发展。click最初是bind的快捷方式，我们有live和更高版本的事件委托。但通过这一点，API变得相当零碎。现在，有了on，我们有了一个方法来绑定所有类型的事件处理程序，但仍然可以像以前一样使用click。扩展单击以支持事件委派是没有意义的，因为它已经过载了。但我不是jquery的贡献者，这正是我要解释的。您的第一段和第二段代码并不完全相同。这就是为什么你会看到不同的行为。.click最初的目的不是委托，而是将事件处理程序附加到特定对象。老实说，我不太明白您的要求。你想知道快捷方式是如何实现的吗？或者事件委托一般是如何工作的？顺便说一句，这3个代码示例应该是表单提交的一个极其简单的表示形式，以防有人没有得到它。@FelixKling我在问为什么on有这两个变体，但click没有，但我猜答案，因为它经常是，比这更复杂，它们并不完全相同。事实上，我认为这是由于API的发展。click最初是bind的快捷方式，我们有live和更高版本的事件委托。但通过这一点，API变得相当零碎。现在，有了on，我们有了一个方法来绑定所有类型的事件处理程序，但仍然可以像以前一样使用click。扩展单击以支持事件委派是没有意义的，因为它已经过载了。但我不是jquery的贡献者，这正是我要解释的。委派比普通绑定有更多的开销，这并不是那么简单。您可能有1k个元素和一个带委托的处理程序，或者每个元素有1k个不带委托的处理程序。我考虑的是运行时开销，也就是说，由于您单击了容器而不是特定的元素，所以处理程序必须一直不必要地运行。当程序员懒惰并且使用$document作为容器时尤其如此。运行时开销更大，但不一定是您如何描述的。无论是否使用事件委派，如果事件发生在元素中的某个位置，则始终执行事件处理程序。事件委派的不同之处在于，将执行额外的检查，以确定事件路径中的节点是否与第二个选择器匹配。明确地说，我的意思是如果事件处理程序绑定到同一个元素。当然，将处理程序直接绑定到元素或委托元素（这似乎是您的意思）之间有区别。但是对于非委托事件，您将处理程序附加到更具体的元素，例如按钮，而不是表单。所以，如果你点击按钮外的表单，什么也不会发生。是的，编辑了我的评论以反映这一点。我想有j

---

这两个方向是如何比较处理程序的。委派比普通绑定有更多的开销，这并不是那么简单。您可能有1k个元素和一个带委托的处理程序，或者每个元素有1k个不带委托的处理程序。我考虑的是运行时开销，也就是说，由于您单击了容器而不是特定的元素，所以处理程序必须一直不必要地运行。当程序员懒惰并且使用$document作为容器时尤其如此。运行时开销更大，但不一定是您如何描述的。无论是否使用事件委派，如果事件发生在元素中的某个位置，则始终执行事件处理程序。事件委派的不同之处在于，将执行额外的检查，以确定事件路径中的节点是否与第二个选择器匹配。明确地说，我的意思是如果事件处理程序绑定到同一个元素。当然，将处理程序直接绑定到元素或委托元素（这似乎是您的意思）之间有区别。但是对于非委托事件，您将处理程序附加到更具体的元素，例如按钮，而不是表单。所以，如果你点击按钮外的表单，什么也不会发生。是的，编辑了我的评论以反映这一点。我想你可以从这两个方向来比较处理者。我知道我在某种程度上歪曲了解释。不过，我有点不好意思，我把整个区别都搞错了。谢谢你更好的描述：。我知道我在某种程度上破坏了这个解释。不过，我有点不好意思，我把整个区别都搞错了。谢谢你更好的描述：。我通常也会跳过快捷方式，因为我喜欢委派的想法&看到一些东西说在某些地方委派更好/更快。我只是想知道为什么他们不以同样的方式支持委派。我通常也会跳过快捷方式，因为我喜欢委派的想法&看到一些东西说在某些地方委派更好/更快。我只是想知道为什么他们不以同样的方式支持授权。