Різниця між .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 щойно доданий "Попередження!" кнопки не працюватимуть, якщо ви не зв’яжете обробник.
Коли ми використовуємо .on
$("div#container").on('click', 'button.alert', function() {
alert(1);
});з вищезазначеним - єдиний обробник для всіх елементів, які відповідають вашому вибору, включаючи створені динамічно.
... ще одна причина використання .on
Як прокоментував Адріен нижче, ще однією причиною використання .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()робити - це залежить від того, з якими параметрами ви його викликаєте. (Деякі інші відповіді також згадували це.) Зауважте, що "Прив’язати до всіх посилань всередині # що завгодно" - це не те, що .live()робить, це те, що .delegate()робить. .live()прив'язується до всіх всередині, documentа не дозволяє вказувати контейнер. Примітка також .live()застаріла від jQuery 1.7.
Як згадують інші відповіді:
$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })Зауваживши, що це .on()підтримує декілька інших комбінацій параметрів, що .click()не дозволяє, дозволяючи йому обробляти делегування подій (заміщення .delegate()та .live()).
(І очевидно, є й інші подібні способи швидкого доступу для "клавіатури", "фокусування" тощо)
Причиною, яку я публікую додаткову відповідь, є зазначення того, що станеться, якщо ви телефонуєте .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(){});.click().)
Вони здаються однаковими ... Документація з функції click () :
Цей метод є ярликом для .bind ('click', обробник)
Документація з функції on () :
Станом на jQuery 1.7, метод .on () забезпечує всю функціональність, необхідну для приєднання обробників подій. Щоб отримати допомогу в перетворенні від старих методів подій jQuery, див. .Bind (), .delegate () та .live (). Щоб видалити події, пов'язані з .on (), див. .Off ().
.clickпорівнянні.on
.click події працюють лише тоді, коли елемент відображається і прикріплюються лише до елементів, завантажених, коли DOM готовий.
.on події динамічно приєднуються до елементів DOM, що корисно, коли ви хочете приєднати подію до елементів DOM, які відображаються на запит ajax або щось інше (після того, як DOM буде готовий).
Тут ви отримаєте список різних способів застосування події клацання. Ви можете вибрати це як підходяще або якщо ваш клік не працює, просто спробуйте альтернативну з них.
$('.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
})Зараз вони застаріли click (), тому найкраще продовжувати ("click")
Що стосується навчання в Інтернеті та деяких друзів .on () використовується, коли ви динамічно додаєте елементи. Але коли я використовував його на простій сторінці входу, де подія натискання повинна надсилати AJAX на node.js, а при поверненні додавати нові елементи, вона почала викликати мульти-AJAX дзвінки. Коли я змінив його, щоб натиснути (), все пішло правильно. Насправді я раніше не стикався з цією проблемою.
НОВІ ЕЛЕМЕНТИ
Як додаток до вичерпних відповідей вище, щоб виділити критичні моменти, якщо ви хочете, щоб натискання додалося до нових елементів:
- елементи, вибрані першим селектором, наприклад, $ ("body"), повинні існувати в момент, коли заява зроблена, інакше нічого не можна прикріплювати.
- ви повинні використовувати три аргументи у .on () функції, включаючи дійсний селектор для ваших цільових елементів, як другий аргумент.
$('.UPDATE').click(function(){ }); **V/S**
$(document).on('click','.UPDATE',function(){ });
$(document).on('click','.UPDATE',function(){ });- це ефективніше, ніж $ ('. UPDATE'). click (функція () {});
- він може використовувати менше пам'яті та працювати для динамічно доданих елементів.
- деякий час динамічні дані, отримані за допомогою кнопки редагування та видалення, не створюють події JQuery під час редагування або видалення даних даних про рядки у формі, що час
$(document).on('click','.UPDATE',function(){ });ефективно працює як ті самі вилучені дані, використовуючи jquery. кнопка не працює під час оновлення чи видалення:
