.bind () vs. .on () dari jQuery

Saya menemukan dua artikel hebat yang berbicara tentang fungsi baru .on(): jquery4u.com , elijahmanor.com .

Apakah ada cara di mana .bind()masih lebih baik untuk digunakan daripada .on()?

Misalnya, saya memiliki kode contoh yang terlihat seperti ini:

$("#container").click( function( e ) {} )

Anda dapat mencatat bahwa saya hanya memiliki satu item yang diambil oleh pemilih dan dalam kasus saya, <div>namanya #containersudah ada ketika halaman saya dimuat; tidak ditambahkan secara dinamis. Sangat penting untuk menyebutkan bahwa saya menggunakan versi terbaru dari jQuery: 1.7.2.

Untuk sampel itu, haruskah .on()digunakan, .bind()bahkan jika saya tidak menggunakan fitur lain yang disediakan oleh .on()fungsi?

Secara internal, .bindpeta langsung ke .ondalam versi jQuery saat ini. (Hal yang sama berlaku untuk .live.) Jadi ada kinerja kecil tapi praktis tidak signifikan jika Anda menggunakannya .bind.

Namun, .binddapat dihapus dari versi mendatang kapan saja. Tidak ada alasan untuk terus menggunakan .binddan .onsebagai gantinya setiap alasan memilih .

Cuplikan ini semuanya melakukan hal yang persis sama:

element.on('click', function () { ... });
element.bind('click', function () { ... });
element.click(function () { ... });

Namun, mereka sangat berbeda dari ini, yang semuanya melakukan hal yang sama:

element.on('click', 'selector', function () { ... });
element.delegate('click', 'selector', function () { ... });
$('selector').live('click', function () { ... });

Set kedua penangan acara menggunakan delegasi acara dan akan bekerja untuk elemen yang ditambahkan secara dinamis. Penangan acara yang menggunakan delegasi juga jauh lebih hebat. Set pertama tidak akan berfungsi untuk elemen yang ditambahkan secara dinamis, dan jauh lebih buruk untuk kinerja.

on()Fungsi jQuery tidak memperkenalkan fungsionalitas baru yang belum ada, itu hanya upaya untuk membakukan penanganan peristiwa di jQuery (Anda tidak lagi harus memutuskan antara langsung, mengikat, atau mendelegasikan).

Metode langsung dan .delegateAPI unggul untuk.on dan tidak ada niat mencela mereka.

Metode langsung lebih disukai karena kode Anda akan diketik dengan kurang ketat. Anda akan mendapatkan kesalahan langsung ketika Anda salah ketik nama acara daripada bug diam. Menurut pendapat saya, juga lebih mudah untuk menulis dan membacaclick daripadaon("click"

Ini .delegatelebih unggul daripada .onkarena urutan argumen:

$(elem).delegate( ".selector", {
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
});

Anda langsung tahu itu didelegasikan karena, well, katanya delegasi. Anda juga langsung melihat pemilih.

Dengan .onitu tidak segera jelas apakah itu bahkan didelegasikan dan Anda harus melihat pada akhirnya untuk pemilih:

$(elem).on({
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
}, "selector" );

Sekarang, penamaannya .bindbenar-benar mengerikan dan nilainya lebih buruk daripada .on. Tetapi .delegatetidak dapat melakukan acara yang tidak didelegasikan dan ada acara yang tidak memiliki metode langsung, jadi dalam kasus yang jarang seperti ini dapat digunakan tetapi hanya karena Anda ingin membuat pemisahan yang bersih antara acara yang didelegasikan dan yang tidak didelegasikan.

Jika Anda melihat dalam kode sumber untuk $.fn.bindAnda akan menemukan bahwa itu hanya fungsi menulis ulang untuk on:

function (types, data, fn) {
    return this.on(types, null, data, fn);
}

http://james.padolsey.com/jquery/#v=1.7.2&fn=$.fn.bind

Dari dokumentasi jQuery:

Pada jQuery 1.7, metode .on () adalah metode yang disukai untuk melampirkan penangan acara ke dokumen. Untuk versi sebelumnya, metode .bind () digunakan untuk melampirkan pengendali event secara langsung ke elemen. Handler dilampirkan ke elemen yang saat ini dipilih di objek jQuery, sehingga elemen-elemen itu harus ada pada saat panggilan ke .bind () terjadi. Untuk pengikatan acara yang lebih fleksibel, lihat diskusi delegasi acara di .on () atau .delegate ().

http://api.jquery.com/bind/

Pada Jquery 3.0 dan di atas .bind telah ditinggalkan dan mereka lebih suka menggunakan .on sebagai gantinya. Seperti @Blazemonger menjawab sebelumnya bahwa itu mungkin dihapus dan pasti akan dihapus. Untuk versi yang lebih lama .bind juga akan memanggil .on secara internal dan tidak ada perbedaan di antara mereka. Silakan juga melihat api untuk lebih detail.

Dokumentasi jQuery API untuk .bind ()