jQuery.klik() vs onClick

Menggunakan $('#myDiv').click(function(){ adalah baik karena mengikuti standar pendaftaran acara model. (jQuery internal menggunakan addEventListener dan attachEvent).

Pada dasarnya mendaftarkan sebuah acara di modern adalah mengganggu cara penanganan peristiwa. Juga untuk mendaftar lebih dari satu event listener untuk target anda dapat memanggil 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 mendaftar pendengar acara sebagaimana ditentukan di W3C DOM. Manfaatnya adalah sebagai berikut:

• memungkinkan menambahkan lebih dari satu handler untuk suatu acara. Hal ini sangat berguna untuk DHTML perpustakaan atau Mozilla ekstensi yang perlu bekerja dengan baik bahkan jika perpustakaan lain/ekstensi yang digunakan.
• memberikan anda halus-halus kontrol fase ketika pendengar akan diaktifkan (menangkap vs menggelegak)
• bekerja pada setiap elemen DOM, tidak hanya elemen HTML.

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

Metode lain seperti pengaturan atribut HTML, contoh:

Atau DOM element properties, contoh:

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

tua dan mereka bisa menulis dengan mudah.

HTML atribut harus dihindari karena membuat markup yang lebih besar dan lebih mudah dibaca. Menyangkut isi/struktur dan perilaku tidak baik yang dipisahkan, membuat bug lebih sulit untuk menemukan.

Masalah dengan elemen DOM sifat metode ini adalah bahwa hanya satu event handler dapat terikat ke elemen per acara.

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

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

Untuk kinerja yang lebih baik, menggunakan asli JavaScript. Untuk pengembangan yang lebih cepat, gunakan jQuery. Cek perbandingan dalam kinerja di jQuery vs Native Elemen Kinerja.

I've dilakukan 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 klik peristiwa, check Native Browser peristiwa vs jquery memicu atau jQuery vs Asli Klik Acara Mengikat.

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 ini tidak benar-benar tentang apakah akan menggunakan jQuery atau tidak. It's lebih: Lebih baik untuk mengikat peristiwa inline dalam HTML atau melalui acara pendengar?

Inline mengikat adalah usang. Selain itu cara ini anda hanya dapat mengikat satu fungsi untuk sebuah acara tertentu.

Oleh karena itu saya sarankan menggunakan acara pendengar. Dengan cara ini, anda'akan mampu mengikat banyak fungsi untuk satu acara dan untuk melepaskan mereka nanti jika diperlukan. Pertimbangkan ini murni kode JavaScript:

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

Ini bekerja di sebagian besar browser modern.

Namun, jika anda sudah memiliki jQuery dalam proyek anda — hanya menggunakan jQuery: .pada atau .klik fungsi.

Anda bisa menggabungkan mereka, menggunakan jQuery untuk mengikat fungsi klik

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

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

function divFunction(){
 //some code
}

Pergi untuk ini karena akan memberikan anda berdua standar dan kinerja.

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

Kedua metode ini sederhana kode JavaScript dan lebih cepat dari jQuery. Tapi di sini kinerja akan kurang lebih sama.

$('#myDiv').klik lebih baik, karena memisahkan kode JavaScript dari HTML. Satu harus mencoba untuk menjaga halaman perilaku dan struktur yang berbeda. Ini membantu banyak.

IMHO, onclick adalah metode yang disukai atas .klik hanya jika kondisi berikut terpenuhi:

• ada banyak elemen pada halaman
• hanya satu acara yang akan didaftarkan untuk acara klik
• Anda're khawatir tentang kinerja ponsel/baterai

Saya membentuk pendapat ini karena fakta bahwa mesin JavaScript pada perangkat mobile adalah 4 sampai 7 kali lebih lambat dari rekan-rekan desktop mereka yang dibuat dalam generasi yang sama. Saya benci ketika saya mengunjungi situs pada perangkat seluler saya dan menerima gelisah bergulir karena jQuery adalah mengikat semua peristiwa dengan mengorbankan saya pengalaman pengguna dan baterai. Lain beberapa faktor pendukung, meskipun ini hanya harus menjadi perhatian dengan instansi pemerintah ;) , kami telah IE7 pop-up dengan kotak pesan yang menyatakan bahwa JavaScript adalah proses mengambil untuk panjang...menunggu atau membatalkan proses. Hal ini terjadi setiap kali ada banyak elemen untuk mengikat melalui jQuery.

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

[DEMO][1]

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 apapun secara langsung menggunakan selalu lebih cepat, tapi menggunakan atribut, anda akan dapat menetapkan hanya satu fungsi.

Pemisahan kekhawatiran adalah kunci di sini, dan jadi peristiwa yang mengikat adalah umumnya metode yang diterima. Ini pada dasarnya adalah apa yang banyak ada jawaban harus dikatakan.

Namun don't membuang ide deklaratif markup terlalu cepat. Itu's place, dan dengan kerangka kerja seperti Angularjs, adalah pusat.

Perlu ada pemahaman bahwa seluruh <div id="myDiv" onClick="divFunction()">Beberapa Content</div> dipermalukan begitu berat karena itu disalahgunakan oleh beberapa pengembang. Sehingga mencapai titik asusila proporsi, seperti tabel. Beberapa pengembang benar-benar hindari meja untuk data tabular. It's contoh sempurna dari orang-orang yang bertindak tanpa pemahaman.

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

Dengan cara ini, dengan melirik hanya di markup, anda dapat melihat apa yang terjadi, alih-alih mencoba untuk reverse lookup javascript acara pengikat.

Jadi, sebagai ketiga alternatif tersebut di atas, dengan menggunakan data atribut untuk declarativly mengumumkan perilaku dalam markup. Perilaku ini terus keluar dari pandangan, tapi sekilas anda dapat melihat apa yang terjadi.

Bootstrap contoh:

Click to toggle popover

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

Catatan kelemahan utama dengan contoh kedua adalah polusi global namespace. Hal ini dapat disiasati dengan baik menggunakan ketiga alternatif di atas, atau kerangka kerja seperti Sudut dan mereka ng-klik atribut secara otomatis dengan ruang lingkup.

Tidak seorang pun yang lebih baik ** dalam bahwa mereka dapat digunakan untuk tujuan yang berbeda. onClick (harus benar-benar menjadi onclick) melakukan sangat sedikit lebih baik, tapi saya sangat ragu anda akan melihat perbedaan yang ada.

Perlu dicatat bahwa mereka melakukan hal yang berbeda: .klik dapat terikat untuk setiap jQuery koleksi sedangkan onclick harus digunakan inline pada unsur-unsur yang anda inginkan untuk menjadi terikat. Anda juga dapat mengikat hanya satu acara untuk menggunakan onclick, sedangkan .klik memungkinkan anda melanjutkan untuk mengikat peristiwa.

Menurut pendapat saya, saya akan konsisten tentang hal itu dan hanya digunakan .klik di mana-mana dan tetap semua kode JavaScript saya bersama-sama dan terpisah dari HTML.

Don't menggunakan onclick. Ada isn't alasan apapun untuk menggunakannya kecuali anda tahu apa yang anda're lakukan, dan anda mungkin don't.

onclick, onmouseover, onmouseout, dll. peristiwa yang benar-benar buruk bagi kinerja (di Internet Explorer terutama, go figure). Jika anda menggunakan kode Visual, ketika anda menjalankan sebuah halaman dengan ini, setiap salah satu dari ini akan membuat SCRIPT yang terpisah blok mengambil memori, dan dengan demikian memperlambat kinerja.

Belum lagi anda harus memiliki pemisahan menyangkut: JavaScript dan layout harus dipisahkan!

Itu selalu lebih baik untuk membuat evenHandlers untuk setiap peristiwa ini, salah satu acara yang dapat menangkap ratusan/ribuan item, bukan menciptakan ribuan terpisah script blok untuk masing-masing!

(Juga, segala sesuatu yang orang lain katakan.)

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

Sebagian besar waktu, native JavaScript metode ini adalah pilihan yang lebih baik atas jQuery ketika kinerja adalah satu-satunya kriteria, tetapi jQuery membuat penggunaan JavaScript dan membuat perkembangan yang mudah. Anda dapat menggunakan jQuery seperti itu tidak menurunkan kinerja terlalu banyak. Dalam kasus tertentu, perbedaan kinerja tidak dapat diketahui.

Metode pertama adalah untuk memilih. Ia menggunakan acara lanjutan pendaftaran model[s], yang berarti anda dapat melampirkan beberapa penangan untuk unsur yang sama. Anda dapat dengan mudah mengakses objek peristiwa, dan handler dapat hidup di setiap fungsi's lingkup. Juga, itu adalah dinamis, saya.e itu dapat dipanggil sewaktu-waktu dan sangat cocok untuk dihasilkan secara dinamis elemen. Apakah anda menggunakan jQuery, aplikasi perpustakaan lain atau asli metode langsung tidak benar-benar peduli.

Metode kedua, dengan menggunakan inline atribut, membutuhkan banyak fungsi-fungsi global (yang mengarah ke namespace polusi) dan campuran isi/struktur (HTML) dengan perilaku (JavaScript). Tidak menggunakan itu.

Pertanyaan anda tentang kinerja atau standar dapat't dapat dengan mudah dijawab. Dua metode yang benar-benar berbeda, dan melakukan hal yang berbeda. Yang pertama adalah kuat, sedangkan yang kedua adalah dibenci (dianggap buruk style).

Metode pertama menggunakan onclick tidak jQuery tetapi hanya Javascript, sehingga anda tidak mendapatkan overhead jQuery. JQuery cara yang dapat diperluas melalui penyeleksi jika anda perlu untuk menambahkan unsur-unsur lain tanpa menambahkan event handler untuk masing-masing elemen, tetapi karena anda memiliki sekarang itu hanya sebuah pertanyaan jika anda perlu menggunakan jQuery atau tidak.

Secara pribadi sejak anda menggunakan jQuery aku akan tetap dengan itu karena itu adalah konsisten dan tidak memisahkan markup dari script.

Onclick Fungsi Jquery

$('#selector').click(function(){ //Fungsi Anda });