Разница между .on ('click') и .click ()
Ответы:
Я думаю, разница в моделях использования.
Я бы предпочел .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);
});и хочу "Оповещение!" чтобы показать предупреждение. Для этого мы можем использовать «клик» или «вкл».
Когда мы используем click
$("button.alert").click(function() {
alert(1);
});с вышеупомянутым, отдельный обработчик создается для каждого отдельного элемента, который соответствует селектору. Это значит
- много соответствующих элементов создаст много идентичных обработчиков и, следовательно, увеличит объем памяти
- динамически добавленные элементы не будут иметь обработчика - то есть, в приведенном выше html недавно добавленное «Alert!» кнопки не будут работать, если вы не перепривязаете обработчик.
Когда мы используем .on
$("div#container").on('click', 'button.alert', function() {
alert(1);
});с вышеупомянутым, один обработчик для всех элементов, которые соответствуют вашему селектору, включая те, которые созданы динамически.
... еще одна причина для использования .on
Как прокомментировал Adrien ниже, еще одна причина использовать .onэто события в пространстве имен.
Если вы добавляете обработчик вместе с .on("click", handler)вами, обычно удаляйте его, .off("click", handler)и этот обработчик удаляется. Очевидно, это работает, только если у вас есть ссылка на функцию, а что, если у вас ее нет? Вы используете пространства имен:
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });с привязкой через
$("#element").off("click.someNamespace");on('click' ...), см. stackoverflow.com/a/3973060/759452 т.е. on('click.darkenallothersections' ...)и в то же время иметь on('click.displaynextstep' ...), то я могу отменить привязку только тот, который я выбрал, используя.unbind('click.displaynextstep')
on()это тенденция в JQuery. Мне пришлось обновляться $(window).load(function() {});до того $(window).on("load", function (e) {})момента, когда я обновился до jQuery 3.
Есть ли разница между следующим кодом?
Нет, между двумя примерами кода в вашем вопросе нет функциональной разницы. .click(fn)является «методом ярлыка» для .on("click", fn). Из документации для.on() :
Для некоторых событий существуют сокращенные методы, например,
.click()которые можно использовать для подключения или запуска обработчиков событий. Полный список сокращенных методов см. В категории событий .
Обратите внимание, что .on()отличается от того, .click()что он имеет возможность создавать делегированные обработчики событий путем передачи selectorпараметра, тогда как .click()нет. Когда .on()вызывается без selectorпараметра, он ведет себя точно так же, как .click(). Если вы хотите делегировать события, используйте .on().
selectorпараметра. Если вы звоните .on()без selectorпараметра, производительность не улучшится по сравнению с использованием .click().
.on()это рекомендуемый способ сделать все привязки вашего события начиная с jQuery 1.7. Он объединяет все функциональные возможности обоих .bind()и .live()в одну функцию, которая изменяет поведение при передаче различных параметров.
Как вы написали свой пример, между ними нет никакой разницы. Оба связывают обработчик с clickсобытием #whatever. on()предлагает дополнительную гибкость, позволяя вам делегировать события, инициируемые потомками, #whateverв одну функцию-обработчик, если вы выберете.
// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });.live()делает? Кроме того, это, кажется, противоречит другим ответам, которые говорят, что он имеет только функциональность .click(), и, следовательно, не относится к будущим событиям.
.on()может делать то, что .click()делает, и делать, .bind()и .live()делать - это зависит от того, с какими параметрами вы его называете. (Некоторые другие ответы тоже упоминали об этом.) Обратите внимание, что «Привязать ко всем ссылкам внутри #whwhat» - это не то .live(), что делает, это то, что .delegate()делает. .live()связывает все внутри, documentа не позволяет вам указать контейнер. Примечание также .live()не рекомендуется с jQuery 1.7 и далее.
Как уже упоминалось в других ответах:
$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })Однако следует отметить, что он .on()поддерживает несколько других комбинаций параметров, которые .click()не поддерживают его, что позволяет ему обрабатывать делегирование событий (superceding .delegate()и .live()).
(И, очевидно, существуют другие похожие методы ярлыков для «keyup», «focus» и т. Д.)
Причина, по которой я публикую дополнительный ответ, состоит в том, чтобы упомянуть, что происходит, если вы звоните .click()без параметров:
$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");Отмечая, что если вы используете .trigger()напрямую, вы также можете передавать дополнительные параметры или объект события jQuery, с которым вы не можете делать .click().
Я также хотел упомянуть, что если вы посмотрите на исходный код jQuery (в jquery-1.7.1.js), вы увидите, что внутренне функция .click()(или .keyup(), и т. Д.) Будет фактически вызывать .on()или .trigger(). Очевидно, это означает, что вы можете быть уверены, что они действительно имеют тот же результат, но это также означает, что использование .click()имеет немного больше накладных расходов - не о чем беспокоиться или даже думать в большинстве случаев, но теоретически это может иметь значение в чрезвычайных обстоятельствах.
РЕДАКТИРОВАТЬ: Наконец, обратите внимание, что .on()позволяет привязать несколько событий к одной и той же функции в одной строке, например:
$("#whatever").on("click keypress focus", function(){});.click().)
Они выглядят одинаково ... Документация от функции click () :
Этот метод является ярлыком для .bind ('click', обработчик)
Документация от функции on () :
Начиная с jQuery 1.7, метод .on () предоставляет все функциональные возможности, необходимые для подключения обработчиков событий. Для получения справки по преобразованию из более старых методов событий jQuery см. .Bind (), .delegate () и .live (). Чтобы удалить события, связанные с .on (), см. .Off ().
.clickvs.on
.click события работают только когда элемент визуализируется и прикрепляются только к элементам, загруженным, когда DOM готов.
.on события динамически присоединяются к элементам DOM, что полезно, если вы хотите прикрепить событие к элементам DOM, которые отображаются по запросу ajax или как-то еще (после того, как DOM готов).
Здесь вы получите список различных способов применения события click. Вы можете выбрать соответственно как подходящий или, если ваш клик не работает, просто попробуйте альтернативу из них.
$('.clickHere').click(function(){
// this is flat click. this event will be attatched
//to element if element is available in
//dom at the time when JS loaded.
// do your stuff
});
$('.clickHere').on('click', function(){
// same as first one
// do your stuff
})
$(document).on('click', '.clickHere', function(){
// this is diffrent type
// of click. The click will be registered on document when JS
// loaded and will delegate to the '.clickHere ' element. This is
// called event delegation
// do your stuff
});
$('body').on('click', '.clickHere', function(){
// This is same as 3rd
// point. Here we used body instead of document/
// do your stuff
});
$('.clickHere').off().on('click', function(){ //
// deregister event listener if any and register the event again. This
// prevents the duplicate event resistration on same element.
// do your stuff
})Насколько ilearned из Интернета и некоторых друзей .on () используется, когда вы динамически добавляете элементы. Но когда я использовал его на простой странице входа, где событие click должно отправить AJAX в node.js, а при возврате добавить новые элементы, он начал вызывать вызовы multi-AJAX. Когда я изменил его, чтобы щелкнуть () все прошло правильно. На самом деле я не сталкивался с этой проблемой раньше.
НОВЫЕ ЭЛЕМЕНТЫ
В качестве дополнения к подробным ответам выше, чтобы выделить критические точки, если вы хотите, чтобы щелчок прикреплялся к новым элементам:
- элементы, выбранные первым селектором, например, $ ("body"), должны существовать во время объявления, иначе нечего присоединять.
- Вы должны использовать три аргумента в функции .on (), включая действительный селектор для ваших целевых элементов в качестве второго аргумента.
$('.UPDATE').click(function(){ }); **V/S**
$(document).on('click','.UPDATE',function(){ });
$(document).on('click','.UPDATE',function(){ });- это более эффективно, чем $ ('. UPDATE'). click (function () {});
- он может использовать меньше памяти и работать с динамически добавляемыми элементами.
- Некоторое время динамически извлекаемые данные с помощью кнопки редактирования и удаления не генерировали событие JQuery во время РЕДАКТИРОВАНИЯ ИЛИ УДАЛЕНИЯ ДАННЫХ строковых данных в форме, это время
$(document).on('click','.UPDATE',function(){ });эффективно работает как те же извлекаемые данные с использованием jquery. кнопка не работает во время обновления или удаления:
