.on ( "click" ， function () {}) 和 .click (function () {}) 有什么区别？

Question

我通常使用它，因为我了解到这是最正确的事件分配，如下所示：

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

但是，我看到许多开发人员使用以下语法：

$('selector').click(function () {});

虽然他们告诉我.on是最推荐的，但我不太明白为什么。那么，在实践中，使用其中一种有什么区别呢？

Answer 1

这基本上是与元素进行关联的方式。 .click 适用于当前 DOM，而 .on(使用委托(将继续对事件关联后添加到 DOM 的新元素有效。

哪个更好用，我会说这取决于情况。

例：

<ul id="todo">
   <li>Do 1</li>
   <li>Do 2</li>
   <li>To do 3</li>
   <li>Do 4</li>
</ul>

.单击事件：

$("li").click(function () {
   $(this).remove ();
});

事件 .on：

$("#todo").on("click", "li", function () {
   $(this).remove();
});

请注意，我已经在 .on 中分隔了选择器。我会解释为什么。

让我们假设在此关联之后，让我们执行以下操作：

$("#todo").append("<li>Do 5</li>");

这就是您会注意到差异的地方。

如果事件是通过 .click 关联的，则任务 5 将不遵守 click 事件，因此不会将其删除。

如果它通过 .on 关联，则选择器分开，它将服从。