Разница между .on (‘click’) vs .click ()

Есть ли разница между следующим кодом?

$('#whatever').on('click', function() { /* your code here */ }); 

а также

 $('#whatever').click(function() { /* your code here */ }); 

Я думаю, разница в шаблонах использования.

Я бы предпочел бы .on выше .click потому что первый может использовать меньше памяти и работать для динамически добавленных элементов.

Рассмотрим следующий html:

   

где мы добавляем новые кнопки через

 $("button#add").click(function() { var html = ""; $("button.alert:last").parent().append(html); }); 

и хотите «Оповестить!» чтобы показать предупреждение. Для этого мы можем использовать «щелчок» или «вкл».


Когда мы используем click

 $("button.alert").click(function() { alert(1); }); 

с вышесказанным, отдельный обработчик создается для каждого элемента, который соответствует селектору. Это значит

  1. многие совпадающие элементы создавали бы много идентичных обработчиков и, следовательно, увеличивали площадь памяти
  2. динамически добавленные элементы не будут иметь обработчик, т. е. в приведенном выше html добавленном «Alert!» кнопки не будут работать, если вы не переустановите обработчик.

Когда мы используем .on

 $("div#container").on('click', 'button.alert', function() { alert(1); }); 

с вышесказанным, один обработчик для всех элементов, которые соответствуют вашему селектору, в том числе созданные динамически.


… еще одна причина использования .on

Как заметил Adrien ниже, другая причина для использования .on – это события с .on .

Если вы добавите обработчик с .on("click", handler) вы обычно удаляете его с помощью .off("click", handler) который удалит этот обработчик. Очевидно, что это работает, только если у вас есть ссылка на функцию, так что, если вы этого не сделаете? Вы используете пространства имен:

 $("#element").on("click.someNamespace", function() { console.log("anonymous!"); }); 

с откреплением через

 $("#element").off("click.someNamespace"); 

Есть ли разница между следующим кодом?

Нет, нет функциональной разницы между двумя примерами кода в вашем вопросе. .click(fn) – это «метод быстрого доступа» для .on("click", fn) . Из документации для .on() :

Существуют короткие методы для некоторых событий, таких как .click() которые могут использоваться для присоединения или запуска обработчиков событий. Полный список сокращенных методов см. В категории событий .

Обратите внимание, что .on() отличается от .click() тем, что имеет возможность создавать делегированные обработчики событий , передавая параметр selector , тогда как .click() не делает этого. Когда .on() вызывается без параметра selector , он ведет себя точно так же, как .click() . Если вы хотите делегировать событие, используйте .on() .

.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() { ... }); 

Как упоминалось в других ответах:

 $("#whatever").click(function(){ }); // is just a shortcut for $("#whatever").on("click", function(){ }) 

Отметив, что .on() поддерживает несколько других комбинаций параметров, которые .click() не позволяет обрабатывать делегирование событий ( .delegate() и .live() ).

(И, очевидно, существуют и другие аналогичные методы быстрого доступа для «keyup», «focus» и т. Д.).

Причина, по которой я отправляю дополнительный ответ, – это указать, что произойдет, если вы вызываете .click() без параметров:

 $("#whatever").click(); // is a shortcut for $("#whatever").trigger("click"); от $("#whatever").click(); // is a shortcut for $("#whatever").trigger("click"); 

Отметив, что если вы используете .trigger() вы также можете передать дополнительные параметры или объект события jQuery, который вы не можете сделать с .click() .

Я также хотел бы упомянуть, что если вы посмотрите на исходный код jQuery (в jquery-1.7.1.js), вы увидите, что внутренняя .click() (или .keyup() и т. Д.) .keyup() вызовет .on() или .trigger() . Очевидно, это означает, что вы можете быть уверены, что они действительно имеют одинаковый результат, но это также означает, что использование .click() имеет немного .click() накладные расходы – ничто не беспокоится или даже не думает об этом в большинстве случаев, но теоретически это может иметь значение в чрезвычайных обстоятельствах.

EDIT: Наконец, обратите внимание, что .on() позволяет связывать несколько событий с одной и той же функцией в одной строке, например:

 $("#whatever").on("click keypress focus", function(){}); 

Нет, нет.
Точка on() – это другие перегрузки и способность обрабатывать события, которые не имеют методов быстрого доступа.

Они выглядят одинаково … Документация из функции click () :

Этот метод является ярлыком для .bind (‘click’, handler)

Документация из функции on () :

Начиная с jQuery 1.7, метод .on () предоставляет всю функциональность, необходимую для прикрепления обработчиков событий. Для получения помощи в преобразовании из старых методов событий jQuery см. .Bind (), .delegate () и .live (). Чтобы удалить события, связанные с .on (), см. .Off ().

.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 }) 

Что касается ileileed из Интернета и некоторых друзей .on () используется, когда вы динамически добавляете элементы. Но когда я использовал его на простой странице входа, где событие click должно отправить AJAX на node.js, а при возврате добавить новые элементы, он начал вызывать вызовы с несколькими AJAX. Когда я изменил его, нажмите () все пошло правильно. На самом деле я раньше не сталкивался с этой проблемой.

$ (‘. UPDATE’). Click (function () {}); V / S $ (document) .on (‘click’, ‘. UPDATE’, function () {});

[введите описание изображения] [10]

  • Почему $ .getJSON бесшумно терпит неудачу?
  • Включает ли Twitter-бутстрап jQuery?
  • jQuery цикл над JSON является результатом успеха AJAX?
  • Добавьте разделитель тысяч в число с Javascript или jQuery?
  • $ .ajax - dataType
  • Должен ли код JQuery идти в верхнем или нижнем колонтитуле?
  • Как изменить выбранное значение выпадающего списка select2 с помощью JqGrid?
  • Draggable возвращается, если вне этого div и внутри других draggables (используя как недопустимые, так и действительные варианты возврата)
  • Событие jQuery: обнаружение изменений в html / text div
  • Форматирование номера JQuery
  • Правильный способ использования JQuery при использовании MasterPages в ASP.NET?
  • Interesting Posts

    Groovy: в чем цель «def» в «def x = 0»?

    Как перемещать невидимые окна => Не удается получить доступ к моему приложению после переключения мониторов

    Как получить предупреждение от Firefox перед тем, как закрыть его, когда идет загрузка?

    Как установить размер изображения с помощью RescaleOp

    Как я могу проверить ввод консоли как целые числа?

    Создание динамической кнопки и размещение их в предопределенном порядке с использованием c #

    В чем смысл алмазного оператора в Java 7?

    «Sdclt.exe / config» завершается с неуказанной ошибкой

    Исключение файлов / каталогов из задачи Gulp

    Как я могу использовать SRT для кэширования не загружаемого жесткого диска?

    Как изменить CurrentCulture во время выполнения?

    Навигация и пользовательский макет

    Создание десериализации свойств, но не сериализация с помощью json.net

    Ошибка миграции Laravel: ошибка синтаксиса или нарушение доступа: 1071 Указанный ключ был слишком длинным; максимальная длина ключа – 767 байт

    Строки Java: compareTo () vs. equals ()

    Давайте будем гением компьютера.