Perbedaan antara .on ('klik') vs .click ()
Jawaban:
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");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')
on()adalah tren di jQuery. Aku harus memperbarui $(window).load(function() {});ke $(window).on("load", function (e) {})ketika saya upgrade ke jQuery 3.
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().
selectorparameter. Jika Anda menelepon .on()tanpa selectorparameter, tidak ada peningkatan kinerja saat menggunakan .click().
.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() { ... });
.live()? Juga, ini tampaknya bertentangan dengan jawaban lain yang mengatakan bahwa itu hanya memiliki fungsi .click(), dan karena itu tidak berlaku untuk acara mendatang.
.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.
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(){});.click().)
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 ().
.clickvs.on
.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).
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
})
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.
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.
$('.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:
