jQuery.click () vs onClick

Saya memiliki aplikasi jQuery besar, dan saya menggunakan dua metode di bawah ini untuk acara klik.

Metode pertama

HTML

<div id="myDiv">Some Content</div>

jQuery

$('#myDiv').click(function(){
    //Some code
});

Metode kedua

HTML

<div id="myDiv" onClick="divFunction()">Some Content</div>

Panggilan fungsi JavaScript

function divFunction(){
    //Some code
}

Saya menggunakan metode pertama atau kedua dalam aplikasi saya. Mana yang lebih baik? Lebih baik untuk kinerja? Dan standar?

Menggunakan $('#myDiv').click(function(){ini lebih baik karena mengikuti model pendaftaran acara standar. (jQuery secara internal menggunakan addEventListenerdan attachEvent).

Pada dasarnya mendaftarkan suatu acara dengan cara modern adalah cara penanganan acara yang tidak mengganggu . Juga untuk mendaftarkan lebih dari satu pendengar acara untuk target yang dapat Anda panggil addEventListener()untuk target yang sama.

var myEl = document.getElementById('myelement');

myEl.addEventListener('click', function() {
    alert('Hello world');
}, false);

myEl.addEventListener('click', function() {
    alert('Hello world again!!!');
}, false);

http://jsfiddle.net/aj55x/1/

Mengapa menggunakan addEventListener? (Dari MDN)

addEventListener adalah cara untuk mendaftarkan pendengar acara seperti yang ditentukan dalam W3C DOM. Manfaatnya adalah sebagai berikut:

• Ini memungkinkan menambahkan lebih dari satu penangan tunggal untuk suatu acara. Ini sangat berguna untuk perpustakaan DHTML atau ekstensi Mozilla yang perlu berfungsi dengan baik bahkan jika perpustakaan / ekstensi lain digunakan.
• Ini memberi Anda kontrol fase yang lebih halus ketika pendengar diaktifkan (menangkap vs menggelegak)
• Ia bekerja pada elemen DOM apa pun, bukan hanya elemen HTML.

Lebih lanjut tentang pendaftaran acara modern -> http://www.quirksmode.org/js/events_advanced.html

Metode lain seperti mengatur atribut HTML , contoh:

<button onclick="alert('Hello world!')">

Atau properti elemen DOM , contoh:

myEl.onclick = function(event){alert('Hello world');}; 

sudah tua dan mudah ditulis.

Atribut HTML harus dihindari karena itu membuat markup lebih besar dan kurang dapat dibaca. Kekhawatiran konten / struktur dan perilaku tidak dipisahkan dengan baik, membuat bug lebih sulit ditemukan.

Masalah dengan metode properti elemen DOM adalah bahwa hanya satu pengendali peristiwa yang dapat diikat ke elemen per peristiwa.

Lebih lanjut tentang penanganan acara Tradisional -> http://www.quirksmode.org/js/events_tradmod.html

Referensi MDN: https://developer.mozilla.org/en-US/docs/DOM/event

Untuk kinerja yang lebih baik, gunakan JavaScript asli. Untuk pengembangan yang lebih cepat, gunakan jQuery. Periksa perbandingan kinerja di jQuery vs Kinerja Elemen Asli .

Saya telah melakukan tes di Firefox 16.0 32-bit pada Windows Server 2008 R2 / 7 64-bit

$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec

Untuk acara klik, periksa Peristiwa Peramban Asli vs pemicu jquery atau jQuery vs Pengikat Peristiwa Klik Asli .

Pengujian di Chrome 22.0.1229.79 32-bit pada Windows Server 2008 R2 / 7 64-bit

$('#jquery a').click(window.testClickListener); // 2,957 operations/second

[].forEach.call( document.querySelectorAll('#native a'), function(el) {
    el.addEventListener('click', window.testClickListener, false);
}); // 18,196 operations/second

Dari apa yang saya mengerti, pertanyaan Anda sebenarnya bukan tentang apakah akan menggunakan jQuery atau tidak. Lebih tepatnya: Apakah lebih baik untuk mengikat acara inline dalam HTML atau melalui pendengar acara?

Ikatan sebaris sudah tidak digunakan lagi. Selain itu dengan cara ini Anda hanya dapat mengikat satu fungsi ke acara tertentu.

Karena itu saya sarankan menggunakan pendengar acara. Dengan cara ini, Anda akan dapat mengikat banyak fungsi ke satu acara dan melepaskannya nanti jika diperlukan. Pertimbangkan kode JavaScript murni ini:

querySelector('#myDiv').addEventListener('click', function () {
    // Some code...
});

Ini berfungsi di sebagian besar browser modern.

Namun, jika Anda sudah memasukkan jQuery dalam proyek Anda - cukup gunakan jQuery: .onatau .clickfungsi.

Anda dapat menggabungkan mereka, gunakan jQuery untuk mengikat fungsi ke klik

<div id="myDiv">Some Content</div>

$('#myDiv').click(divFunction);

function divFunction(){
 //some code
}

$('#myDiv').clicklebih baik, karena memisahkan kode JavaScript dari HTML . Seseorang harus mencoba untuk menjaga perilaku dan struktur halaman berbeda . Ini sangat membantu.

Lakukan ini karena akan memberi Anda standar dan kinerja.

 $('#myDiv').click(function(){
      //Some code
 });

Karena metode kedua adalah kode JavaScript sederhana dan lebih cepat dari jQuery. Tetapi di sini kinerjanya kira-kira sama.

IMHO, onclick adalah metode yang disukai daripada .click hanya ketika kondisi berikut ini terpenuhi:

• ada banyak elemen di halaman
• hanya satu acara yang didaftarkan untuk acara klik
• Anda khawatir dengan kinerja seluler / daya tahan baterai

Saya membentuk pendapat ini karena fakta bahwa mesin JavaScript pada perangkat seluler 4 hingga 7 kali lebih lambat daripada rekan-rekan desktop mereka yang dibuat pada generasi yang sama. Saya benci ketika saya mengunjungi situs di perangkat seluler saya dan menerima pengguliran gelisah karena jQuery mengikat semua acara dengan mengorbankan pengalaman pengguna dan masa pakai baterai. Faktor pendukung lain baru-baru ini, meskipun ini hanya harus menjadi perhatian dengan lembaga pemerintah;), kami memiliki IE7 pop-up dengan kotak pesan yang menyatakan bahwa proses JavaScript terlalu lama ... menunggu atau membatalkan proses. Ini terjadi setiap kali ada banyak elemen yang harus diikat melalui jQuery.

Perbedaan dalam karya. Jika Anda menggunakan klik (), Anda dapat menambahkan beberapa fungsi, tetapi jika Anda menggunakan atribut, hanya satu fungsi yang akan dieksekusi - yang terakhir.

DEMO

HTML

<span id="JQueryClick">Click #JQuery</span> </br>
<span id="JQueryAttrClick">Click #Attr</span> </br>

JavaScript

$('#JQueryClick').click(function(){alert('1')})
$('#JQueryClick').click(function(){alert('2')})

$('#JQueryAttrClick').attr('onClick'," alert('1')" ) //This doesn't work
$('#JQueryAttrClick').attr('onClick'," alert('2')" )

Jika kita berbicara tentang kinerja, dalam hal apa pun penggunaan langsung selalu lebih cepat, tetapi menggunakan atribut, Anda hanya dapat menetapkan satu fungsi.

Pemisahan masalah adalah kunci di sini, sehingga pengikatan acara adalah metode yang diterima secara umum. Ini pada dasarnya adalah apa yang dikatakan oleh banyak jawaban yang ada.

Namun jangan membuang ide markup deklaratif terlalu cepat. Memiliki tempat itu, dan dengan kerangka kerja seperti Angular, adalah pusatnya.

Perlu ada pemahaman bahwa keseluruhannya <div id="myDiv" onClick="divFunction()">Some Content</div>sangat dipermalukan karena disalahgunakan oleh beberapa pengembang. Jadi itu mencapai titik proporsi asusila, seperti tables. Beberapa pengembang sebenarnya menghindari tablesdata tabular. Ini adalah contoh sempurna dari orang yang bertindak tanpa pengertian.

Meskipun saya suka ide menjaga perilaku saya terpisah dari pandangan saya. Saya tidak melihat ada masalah dengan markup yang menyatakan apa yang dilakukannya (bukan bagaimana melakukannya, itu adalah perilaku). Ini mungkin dalam bentuk atribut onClick aktual, atau atribut khusus, seperti komponen javascript bootstraps.

Dengan cara ini, dengan melihat sekilas pada markup, Anda dapat melihat apa yang dilakukan, alih-alih mencoba membalikkan pengikat acara javascript.

Jadi, sebagai alternatif ketiga di atas, menggunakan atribut data untuk secara deklaratif mengumumkan perilaku di dalam markup. Perilaku dihindarkan dari pandangan, tetapi sekilas Anda dapat melihat apa yang terjadi.

Contoh bootstrap:

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Sumber: http://getbootstrap.com/javascript/#popovers

Catatan Kerugian utama dengan contoh kedua adalah polusi namespace global. Ini dapat dielakkan dengan menggunakan alternatif ketiga di atas, atau kerangka kerja seperti Angular dan atribut ng-klik mereka dengan cakupan otomatis.

Tidak ada yang lebih baik karena mereka dapat digunakan untuk tujuan yang berbeda. onClick(seharusnya benar-benar onclick) tampil sangat sedikit lebih baik, tapi saya sangat ragu Anda akan melihat perbedaan di sana.

Perlu dicatat bahwa mereka melakukan hal-hal yang berbeda: .clickdapat diikat ke koleksi jQuery mana pun sedangkan onclickharus digunakan sebaris pada elemen yang Anda inginkan untuk diikat. Anda juga dapat mengikat hanya satu acara untuk digunakan onclick, sedangkan .clickmemungkinkan Anda terus mengikat acara.

Menurut pendapat saya, saya akan konsisten tentang hal itu dan hanya menggunakan di .clickmana-mana dan menyimpan semua kode JavaScript saya bersama-sama dan terpisah dari HTML.

Jangan gunakan onclick. Tidak ada alasan untuk menggunakannya kecuali Anda tahu apa yang Anda lakukan, dan Anda mungkin tidak.

<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

onclick, onmouseover, onmouseout, dll. peristiwa sebenarnya buruk untuk kinerja ( terutama di Internet Explorer , lihat gambar). Jika Anda menggunakan Visual Studio , ketika Anda menjalankan halaman dengan ini, masing-masing akan membuat blok SCRIPT terpisah mengambil memori, dan dengan demikian memperlambat kinerja.

Belum lagi Anda harus memiliki pemisahan kekhawatiran : JavaScript dan tata letak harus dipisahkan!

Itu selalu lebih baik untuk membuat evenHandlers untuk semua acara ini, satu acara dapat menangkap ratusan / ribuan item, daripada membuat ribuan blok skrip terpisah untuk masing-masing!

(Juga, semua orang lain katakan.)

Nah, salah satu ide utama di balik jQuery adalah untuk memisahkan JavaScript dari kode HTML jahat . Metode pertama adalah cara untuk pergi.

Sebagian besar waktu, metode JavaScript asli adalah pilihan yang lebih baik daripada jQuery ketika kinerja adalah satu-satunya kriteria, tetapi jQuery memanfaatkan JavaScript dan membuat pengembangannya mudah. Anda dapat menggunakan jQuery karena tidak menurunkan kinerja terlalu banyak. Dalam kasus spesifik Anda, perbedaan kinerja diabaikan.

Metode pertama yang digunakan onclickbukan jQuery tetapi hanya Javascript, jadi Anda tidak mendapatkan overhead jQuery. Cara jQuery dapat diperluas melalui penyeleksi jika Anda perlu menambahkannya ke elemen lain tanpa menambahkan event handler ke setiap elemen, tetapi seperti yang Anda miliki sekarang, itu hanya pertanyaan jika Anda perlu menggunakan jQuery atau tidak.

Secara pribadi karena Anda menggunakan jQuery saya akan tetap menggunakannya karena konsisten dan tidak memisahkan markup dari skrip.

Metode pertama adalah memilih. Ia menggunakan model registrasi acara tingkat lanjut [s] , yang berarti Anda dapat melampirkan banyak penangan ke elemen yang sama. Anda dapat dengan mudah mengakses objek acara, dan pawang dapat hidup dalam lingkup fungsi apa pun. Juga, itu dinamis, yaitu dapat dipanggil kapan saja dan sangat cocok untuk elemen yang dihasilkan secara dinamis. Apakah Anda menggunakan jQuery, perpustakaan lain atau metode asli secara langsung tidak masalah.

Metode kedua, menggunakan atribut inline, membutuhkan banyak fungsi global (yang mengarah pada polusi namespace) dan mencampur konten / struktur (HTML) dengan perilaku (JavaScript). Jangan gunakan itu.

Pertanyaan Anda tentang kinerja atau standar tidak dapat dijawab dengan mudah. Kedua metode ini sama sekali berbeda, dan melakukan hal yang berbeda. Yang pertama lebih kuat, sedangkan yang kedua dihina (dianggap gaya buruk).

Fungsi Jquery Onclick

$('#selector').click(function(){ //Your Functionality });