$（document）.on（'click'，'#id'，function（）{}）vs $（'＃id'）。on（'click'，function（）{}）[关闭]

我试图找出两者之间的区别

$(document).on('click', '#id', function(){});

和

$('#id').on('click', function(){});

我无法找到有关两者之间是否有任何区别的信息，如果有的话，那有什么区别。

有人可以解释一下是否有任何区别吗？

第一个示例演示事件委托。事件处理程序绑定到DOM树上方的一个元素（在本例中为document），并在事件到达某个元素（源于与选择器匹配的元素）到达该元素时执行。

这是可能的，因为大多数DOM事件都从起源点冒泡到树上。如果您单击该#id元素，则会生成一个click事件，该事件将在所有祖先元素之间冒泡（注意：实际上，在此之前存在一个阶段，称为“捕获阶段”，当事件从树上下降到目标）。您可以在任何这些祖先上捕获事件。

第二个示例将事件处理程序直接绑定到元素。事件仍然会冒泡（除非您在处理程序中阻止该事件），但是由于处理程序已绑定到目标，因此您将看不到此过程的效果。

通过委派事件处理程序，可以确保对绑定时DOM中不存在的元素执行该事件处理程序。如果您的#id元素是在第二个示例之后创建的，则处理程序将永远不会执行。通过绑定到您知道在执行时肯定在DOM中的元素，可以确保处理程序实际上将附加到某些东西上，并可以在以后适当时执行。

考虑以下代码

<ul id="myTask">
  <li>Coding</li>
  <li>Answering</li>
  <li>Getting Paid</li>
</ul>

现在，区别就在这里

// Remove the myTask item when clicked.
$('#myTask').children().click(function () {
  $(this).remove()
});

现在，如果我们再次添加myTask怎么办？

$('#myTask').append('<li>Answer this question on SO</li>');

单击此myTask项不会将其从列表中删除，因为它没有绑定任何事件处理程序。如果相反，我们将使用.on，那么新项目就可以正常工作了。.on版本的外观如下：

$('#myTask').on('click', 'li', function (event) {
  $(event.target).remove()
});

概要：

与之间的区别是，当与事件关联的DOM元素在以后动态添加时，可能不会起作用；而在与调用关联的DOM元素可能在稍后的位置动态生成的情况下，可以使用.on()和之间的区别。.click().click().click().on().on()