Perbedaan antara .on ('klik') vs .click ()

526

Apakah ada perbedaan antara kode berikut?

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

dan

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

jquery click bgcode
sumber

762

Saya pikir, perbedaannya ada pada pola penggunaan.

Saya lebih suka .onlebih .clickkarena mantan dapat menggunakan memori kurang dan bekerja untuk elemen dinamis ditambahkan.

Pertimbangkan html berikut:

<html>
    <button id="add">Add new</button>
    <div id="container">
        <button class="alert">alert!</button>
    </div>
</html>

tempat kami menambahkan tombol baru melalui

$("button#add").click(function() {
    var html = "<button class='alert'>Alert!</button>";
    $("button.alert:last").parent().append(html);
});

dan ingin "Waspada!" untuk menampilkan tanda. Kita dapat menggunakan "klik" atau "pada" untuk itu.

Saat kita gunakan `click`

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

dengan di atas, handler terpisah akan dibuat untuk setiap elemen tunggal yang cocok dengan pemilih. Itu berarti

banyak elemen yang cocok akan membuat banyak penangan identik dan dengan demikian meningkatkan jejak memori
item yang ditambahkan secara dinamis tidak akan memiliki handler - yaitu, dalam html di atas "Alert!" yang baru ditambahkan tombol tidak akan berfungsi kecuali Anda memutar ulang pawang.

Saat kita gunakan `.on`

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

dengan yang di atas, penangan tunggal untuk semua elemen yang cocok dengan pemilih Anda, termasuk yang dibuat secara dinamis.

... alasan lain untuk digunakan `.on`

Seperti yang dikomentari Adrien di bawah ini, alasan lain untuk menggunakan .onacara adalah namespace.

Jika Anda menambahkan penangan dengan .on("click", handler)Anda biasanya menghapusnya dengan .off("click", handler)yang akan menghapus penangan itu. Jelas ini hanya berfungsi jika Anda memiliki referensi ke fungsi, jadi bagaimana jika Anda tidak melakukannya? Anda menggunakan ruang nama:

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

dengan unbinding via

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

andreister
sumber

2

Bagaimana dengan: $ ('button.alert'). On ('click', function () {alert (1);}); ?

Matius

8

@andreister: koreksi saya jika saya salah tetapi saya percaya bahwa keuntungan lain adalah penggunaan namespaces saat menggunakan on('click' ...), lihat stackoverflow.com/a/3973060/759452 yaitu. on('click.darkenallothersections' ...)dan pada saat yang sama on('click.displaynextstep' ...), maka saya hanya dapat melepas ikatan yang saya pilih menggunakan.unbind('click.displaynextstep')

Adrien Be

Saya tidak berpikir bahwa handler terpisah dibuat untuk setiap elemen yang cocok dengan pemilih. Saya pikir 1 handler akan dibuat, tetapi overhead berasal dari pengikatan handler ini ke beberapa elemen dan memonitor semua elemen ini. Setidaknya, saya tidak menemukan ini di dokumentasi.

Lacak

7

Adakah yang bisa menjelaskan mengapa .on dapat bekerja untuk item yang ditambahkan secara dinamis tetapi .click tidak bisa?

MengT

2

on()adalah tren di jQuery. Aku harus memperbarui $(window).load(function() {});ke $(window).on("load", function (e) {})ketika saya upgrade ke jQuery 3.

Victor Stoddard

37

Apakah ada perbedaan antara kode berikut?

Tidak, tidak ada perbedaan fungsional antara dua contoh kode dalam pertanyaan Anda. .click(fn)adalah "metode pintas" untuk .on("click", fn). Dari dokumentasi untuk.on() :

Ada metode singkat untuk beberapa peristiwa seperti .click()yang dapat digunakan untuk melampirkan atau memicu penangan acara. Untuk daftar lengkap metode tulisan cepat, lihat kategori acara .

Perhatikan bahwa .on()berbeda dari .click()yang memiliki kemampuan untuk membuat penangan acara yang didelegasikan dengan melewati selectorparameter, sedangkan .click()tidak. Ketika .on()dipanggil tanpa selectorparameter, ia berperilaku persis sama dengan .click(). Jika Anda ingin delegasi acara, gunakan .on().

gilly3
sumber

4

bagaimana dengan masalah kinerja yang ditunjukkan @andreister saya?

rubo77

@ rubo77 diabaikan di terbaik. Kami mengambil milidetik angka tunggal.

Rory McCrossan

1

@RoryMcCrossan itu masalah besar bagi saya - saya mencari ini karena saya punya hingga 3000 pertanyaan pada halaman yang membutuhkan acara. Satu milidetik masing-masing membuat halaman saya membutuhkan waktu 3 detik lebih lama untuk melakukan. Komentar Anda tidak membantu untuk daftar besar.

Randy

11

Masalah yang lebih besar adalah mengapa Anda memiliki 3000 pertanyaan pada satu halaman. Jika Anda mengikuti pola UI yang baik, Anda seharusnya tidak memiliki informasi sebanyak itu pada satu halaman. Lihatlah paging, atau pemuatan malas. Bahkan menggunakan delegasi acara untuk memiliki pengendali acara tunggal untuk semua elemen itu akan lebih baik.

Rory McCrossan

5

@ rubo77 - Keuntungan kinerja hanya terlihat saat menggunakan delegasi acara dengan melewatkan selectorparameter. Jika Anda menelepon .on()tanpa selectorparameter, tidak ada peningkatan kinerja saat menggunakan .click().

gilly3

23

.on()adalah cara yang disarankan untuk melakukan semua acara Anda mengikat pada jQuery 1.7. Ini menggulung semua fungsionalitas keduanya .bind()dan .live()menjadi satu fungsi yang mengubah perilaku saat Anda memberikan parameter yang berbeda.

Seperti yang telah Anda tuliskan contoh Anda, tidak ada perbedaan di antara keduanya. Keduanya mengikat seorang pawang ke clickacara #whatever. on()menawarkan fleksibilitas tambahan untuk memungkinkan Anda mendelegasikan acara yang dipecat oleh anak-anak #whateverke fungsi penangan tunggal, jika Anda mau.

// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });

Interrobang
sumber

"Ikat semua tautan di dalam # apa pun, bahkan yang baru dibuat nanti." Bukankah itu tepatnya apa .live()? Juga, ini tampaknya bertentangan dengan jawaban lain yang mengatakan bahwa itu hanya memiliki fungsi .click(), dan karena itu tidak berlaku untuk acara mendatang.

bgcode

3

@babonk - Ini tidak bertentangan dengan jawaban yang lain, karena seperti yang Interrobang katakan pada paragraf pertama .on()dapat melakukan apa yang .click()dilakukan dan melakukan apa .bind()dan .live()melakukan - itu tergantung pada parameter apa Anda menyebutnya. (Beberapa jawaban lain juga menyebutkan hal ini.) Perhatikan bahwa "Bind ke semua tautan di dalam # apa pun " bukan yang berfungsi .live(), itu yang menentukan .delegate(). .live()mengikat semua bagian dalam documentdaripada membiarkan Anda menentukan wadah. Catatan juga .live()sudah usang dari jQuery 1.7 dan seterusnya.

nnnnnn

+1 untuk acara yang didelegasikan: "Dengan memilih elemen yang dijamin akan hadir pada saat pengendali acara yang didelegasikan dilampirkan, Anda dapat menggunakan acara yang didelegasikan untuk menghindari perlunya sering melampirkan dan menghapus penangan acara." api.jquery.com/on

jimasp

19

Seperti yang disebutkan oleh jawaban lain:

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

Memperhatikan bahwa itu .on()mendukung beberapa kombinasi parameter lain yang .click()tidak, memungkinkannya untuk menangani delegasi acara (superceding .delegate()dan .live()).

(Dan jelas ada metode pintas serupa lainnya untuk "keyup", "fokus", dll.)

Alasan saya memposting jawaban tambahan adalah untuk menyebutkan apa yang terjadi jika Anda menelepon .click()tanpa parameter:

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

Memperhatikan bahwa jika Anda menggunakan .trigger()secara langsung, Anda juga dapat memberikan parameter tambahan atau objek acara jQuery, yang tidak dapat Anda lakukan .click().

Saya juga ingin menyebutkan bahwa jika Anda melihat kode sumber jQuery (di jquery-1.7.1.js) Anda akan melihat bahwa secara internal fungsi .click()(atau .keyup(), dll.) Akan benar-benar memanggil .on()atau .trigger(). Jelas ini berarti Anda dapat yakin bahwa mereka benar-benar memiliki hasil yang sama, tetapi itu juga berarti bahwa menggunakan .click()memiliki biaya overhead yang sedikit lebih - tidak ada yang perlu dikhawatirkan atau bahkan dipikirkan dalam sebagian besar keadaan, tetapi secara teoritis itu mungkin penting dalam keadaan luar biasa.

EDIT: Akhirnya, perhatikan yang .on()memungkinkan Anda untuk mengikat beberapa acara ke fungsi yang sama dalam satu baris, misalnya:

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

nnnnnn
sumber

Bukankah metode keduanya dimuat dalam memori untuk digunakan? Jadi tidak masalah? Dan untuk keterbacaan mungkin lebih mudah?

Vince V.

@VinceV. - Iya. Untuk penangan kejadian yang tidak didelegasikan "standar", kedua metode melakukan hal yang sama dan perbedaan kinerja dapat diabaikan, sehingga metode mana yang Anda gunakan benar-benar merupakan masalah pilihan pribadi. (Saya biasanya akan memilih .click().)

nnnnnn

9

Tidak, tidak ada.
Intinya on()adalah kelebihan lainnya, dan kemampuan untuk menangani acara yang tidak memiliki metode pintas.

Slaks
sumber

1

@arigold: Itu adalah kelebihan lainnya.

SLaks

9

Mereka tampaknya sama ... Dokumentasi dari fungsi click () :

Metode ini adalah cara pintas untuk .bind ('click', handler)

Dokumentasi dari fungsi on () :

Pada jQuery 1.7, metode .on () menyediakan semua fungsi yang diperlukan untuk melampirkan penangan acara. Untuk bantuan dalam mengonversi dari metode acara jQuery yang lebih lama, lihat .bind (), .delegate (), dan .live (). Untuk menghapus acara yang terikat dengan .on (), lihat .off ().

dana
sumber

Kedua pandangan Anda harus digabungkan. Click () adalah jalan pintas untuk .Bind () dan .On () ... Sesuai JQUERY 1.7.0 +, ini juga merupakan jalan pintas untuk Trigger ('klik'). [ api.jquery.com/click/]

Dhanasekar

Ini adalah penjelasan yang cukup langsung dari dokumen, tetapi jawaban di bawah ini memiliki contoh yang baik mengapa yang satu lebih baik daripada yang lain dalam .clickvs.on

phatskat

@ phatskat - Kebetulan saya setuju dengan Anda :)

dana

8

.click acara hanya berfungsi ketika elemen diberikan dan hanya dilampirkan ke elemen yang dimuat saat DOM siap.

.on peristiwa secara dinamis dilampirkan ke elemen DOM, yang membantu ketika Anda ingin melampirkan acara ke elemen DOM yang diberikan pada permintaan ajax atau sesuatu yang lain (setelah DOM siap).

Ramesh kumar
sumber

5

Di sini Anda akan mendapatkan daftar berbagai cara menerapkan acara klik. Anda dapat memilih sesuai sebagai ramah atau jika klik Anda tidak berfungsi, coba saja alternatif dari ini.

$('.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
})

Mustkeem K
sumber

3

Mereka sekarang sudah tidak lagi mengklik (), jadi yang terbaik adalah pada ('klik')

tw0shoes
sumber

Jadi apa yang Anda lakukan jika Anda ingin perilaku klik lama () sekarang?

bgcode

1

Sejauh ilearned dari internet dan beberapa teman .on () digunakan saat Anda menambahkan elemen secara dinamis. Tetapi ketika saya menggunakannya di halaman login sederhana di mana acara klik harus mengirim AJAX ke node.js dan sebaliknya menambahkan elemen baru itu mulai memanggil panggilan multi-AJAX. Ketika saya mengubahnya untuk mengklik () semuanya berjalan dengan baik. Sebenarnya saya tidak pernah menghadapi masalah ini sebelumnya.

Alper Bilgil
sumber

0

UNSUR BARU

Sebagai tambahan untuk jawaban komprehensif di atas untuk menyoroti poin-poin penting jika Anda ingin klik untuk dilampirkan ke elemen baru:

elemen yang dipilih oleh pemilih pertama, mis. $ ("body") harus ada pada saat deklarasi dibuat, jika tidak, tidak ada yang dilampirkan.
Anda harus menggunakan tiga argumen dalam fungsi .on () termasuk pemilih yang valid untuk elemen target Anda sebagai argumen kedua.

Beruang Astra
sumber

-1

$('.UPDATE').click(function(){ }); **V/S**    
$(document).on('click','.UPDATE',function(){ });

$(document).on('click','.UPDATE',function(){ });

ini lebih efektif daripada $ ('. PEMBARUAN') .klik (fungsi () {});
itu dapat menggunakan lebih sedikit memori dan bekerja untuk elemen yang ditambahkan secara dinamis.
beberapa waktu dinamis mengambil data dengan tombol edit dan hapus tidak menghasilkan acara JQuery pada saat EDIT ATAU HAPUS DATA data baris dalam bentuk, waktu $(document).on('click','.UPDATE',function(){ });itu secara efektif bekerja seperti data yang diambil sama dengan menggunakan jquery. tombol tidak berfungsi saat memperbarui atau menghapus:

Sewa Devang
sumber

$ (dokumen) .on ('klik', '. UPDATE', function () {}); 1) lebih efektif daripada $ ('. PEMBARUAN') .klik (fungsi () {}); 2) dapat menggunakan lebih sedikit memori dan bekerja untuk elemen yang ditambahkan secara dinamis. 3) beberapa waktu dinamis mengambil data dengan tombol edit dan hapus tidak menghasilkan peristiwa JQuery pada saat EDIT ATAU HAPUS DATA data baris dalam bentuk, waktu itu $ (dokumen) .on ('klik', '. UPDATE', fungsi () {}); bekerja secara efektif. [seperti data yang diambil dengan menggunakan jquery. tombol tidak berfungsi saat memperbarui atau menghapus

Devang Hire

Perbedaan antara .on ('klik') vs .click ()

Jawaban:

Saat kita gunakan click

Saat kita gunakan .on

... alasan lain untuk digunakan .on

Saat kita gunakan `click`

Saat kita gunakan `.on`

... alasan lain untuk digunakan `.on`