.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 关联的，并且选择器分开，它将服从。