Question

我试图找出

之间的区别

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

和

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

我无法找到关于这两者之间是否存在任何差异的任何信息，如果是，那么这可能是什么区别。

有人可以解释是否有任何差异？

Answer 1

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

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

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

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

Answer 2

考虑以下代码

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

摘要：

.on()和.click()之间的区别在于.click()与.click()事件相关联的DOM元素在以后动态添加时.on()可能不起作用{ {1}}可用于可能在以后动态生成与.on()调用关联的DOM元素的情况。