В чем разница между .on ("click", function () {}) и .click (function () {})?

Я обычно использую его, потому что узнал, что это наиболее правильное назначение события следующим образом:

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

Однако я вижу, что многие разработчики используют следующий синтаксис:

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

Хотя мне сказали, что .on - самый рекомендуемый, я не совсем понял, почему. Итак, на практике, в чем разница в использовании того или другого?

0
0
78
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 не будет подчиняться событию щелчка и поэтому не будет удалена.

Если он был связан через .on с отдельным селектором, он будет подчиняться.

Другие вопросы по теме