Я думаю, разница в моделях использования.
Я бы предпочел .on вместо .click, потому что первый может использовать меньше памяти и работать с динамически добавляемыми элементами.
Рассмотрим следующий html:
<html>
<button id="add">Add new</button>
<div id="container">
<button class="alert">alert!</button>
</div>
</html>
, где мы добавляем новые кнопки через
$("button#add").click(function() {
var html = "<button class='alert'>Alert!</button>";
$("button.alert:last").parent().append(html);
});
и хотим "Alert!"чтобы показать предупреждение.Для этого мы можем использовать «клик» или «вкл».
Когда мы используем click
$("button.alert").click(function() {
alert(1);
});
с вышеуказанным, создается отдельный обработчик для каждого отдельного элемента , которыйсоответствует селектору.Это означает, что
- много совпадающих элементов создаст много идентичных обработчиков и, следовательно, увеличит объем памяти
- динамически добавленные элементы не будут иметь обработчика - т.е. в вышеупомянутом html вновь добавленные элементы "Оповещать!»кнопки не будут работать, если вы не перепривязаете обработчик.
Когда мы используем .on
$("div#container").on('click', 'button.alert', function() {
alert(1);
});
с вышеприведенным, обработчик single для все элементы , соответствующие вашему селектору, в том числе созданные динамически.
... еще одна причина для использования .on
Как прокомментировал Adrien ниже, еще одна причинаиспользовать .on в пространстве имен событий.
Если вы добавляете обработчик с .on("click", handler), вы обычно удаляете его с помощью .off("click", handler), который удаляет этот самый обработчик.Очевидно, это работает, только если у вас есть ссылка на функцию, а что, если у вас ее нет?Вы используете пространства имен:
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });
с отменой привязки через
$("#element").off("click.someNamespace");