javascript - .on ("click"、 function () {}) 和 .click (function () {}) 之间有什么区别？

Question

这个问题已经有答案了:

What is DOM Event delegation? (10 个回答)

Event binding on dynamically created elements? (23 个回答)

已关闭 4 年前。

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

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

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

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

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

Answer 1

这基本上就是与元素进行关联的方式。 .click 适用于当前 DOM，而 .on(使用委托(delegate))对于事件关联后添加到 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 关联的，并且选择器是独立的，它将服从。