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

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

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

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

Ответ 1

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

Я бы предпочел .on over .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", либо "on".

Когда мы используем `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");

Ответ 2

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

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

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

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

Ответ 3

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

Ответ 4

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

$("#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() имеет немного меньшие накладные расходы - ничто не беспокоится или даже не думает об этом в большинстве случаев, но теоретически это может иметь значение в чрезвычайные обстоятельства.

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

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

Ответ 5

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

Ответ 6

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

Этот метод является ярлыком для .bind('click', обработчик)

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

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

Ответ 7

.click события работают только тогда, когда элемент получает визуализацию и прикрепляются только к элементам, загружаемым, когда DOM готов.

.on события динамически привязаны к элементам DOM, что полезно, когда вы хотите присоединить событие к элементам DOM, которые отображаются в ajax-запросе или что-то еще (после того, как DOM готов).

Ответ 8

Здесь вы получите список различных способов применения события 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
})

Ответ 9

.click события работают только тогда, когда элемент получает визуализацию и прикрепляются только к элементам, загружаемым, когда dom готов.

Привязать обработчик события к событию JavaScript "click" или вызвать это событие для элемента.

.on события динамически привязаны к элементам dom, что полезно, когда вы хотите присоединить событие к элементам dom, которые отображаются в ajax-запросе или что-то еще (после того, как dom готов).

Прикрепите функцию обработчика событий для одного или нескольких событий к выбранным элементам. [...] Немного больше по странице. Делегированные события имеют то преимущество, что они могут обрабатывать события из элементов-потомков , которые добавляются к документ в более позднее время.

прежде чем jquery 1.7.live используется вместо .on, но у живого события есть так много проблем, поэтому он устарел в более новых версиях, и теперь он используется для него. очень хорошая документация по событиям

очень хорошая документация по событиям events = > Документация API jQuery

Ответ 10

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

Ответ 11

Теперь они устарели click(), так что лучше всего продолжать с ('click')

Ответ 12

$('.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. кнопка не работает во время обновления или удаления: