jQuery.click() vs onClick

Het gebruik van $('#myDiv').click(function(){ is beter omdat het het standaard event registratie model volgt. (jQuery intern gebruikt addEventListener en attachEvent).

In principe is het registreren van een gebeurtenis op moderne manier de onopvallende manier van het afhandelen van gebeurtenissen. Ook om meer dan een event listener voor het doel te registreren kun je addEventListener() voor hetzelfde doel aanroepen.

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/

Waarom addEventListener gebruiken? (Van MDN)

addEventListener is de manier om een event listener te registreren zoals gespecificeerd in W3C DOM. De voordelen zijn als volgt:

• Het maakt het mogelijk om meer dan een enkele handler voor een event toe te voegen. Dit is vooral nuttig voor DHTML bibliotheken of Mozilla extensies die goed moeten werken, zelfs als andere bibliotheken/extensies worden gebruikt.
• Het geeft je fijnmaziger controle over de fase waarin de listener wordt geactiveerd (capturing vs. bubbling)
• Het werkt op elk DOM element, niet alleen HTML elementen.

Meer over Modern event registration -> http://www.quirksmode.org/js/events_advanced.html

Andere methoden zoals het instellen van de HTML attributen, voorbeeld:

Of DOM element eigenschappen, voorbeeld:

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

zijn oud en ze kunnen gemakkelijk overschreven worden.

HTML attribuut moet vermeden worden omdat het de markup groter en minder leesbaar maakt. Inhoud/structuur en gedrag zijn niet goed van elkaar gescheiden, waardoor een bug moeilijker te vinden is.

Het probleem met de DOM element properties methode is dat er maar één event handler per event aan een element gebonden kan worden.

Meer over traditionele event afhandeling -> http://www.quirksmode.org/js/events_tradmod.html

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

Je zou ze kunnen combineren, jQuery gebruiken om de functie te binden aan de klik

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

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

function divFunction(){
 //some code
}

De eerste methode verdient de voorkeur. Het maakt gebruik van het geavanceerde gebeurtenisregistratiemodel[s], wat betekent dat je meerdere handlers aan hetzelfde element kunt koppelen. Je kunt gemakkelijk toegang krijgen tot het event object, en de handler kan in elke functie's scope leven. Ook is het dynamisch, d.w.z. het kan op elk moment worden aangeroepen en is bijzonder geschikt voor dynamisch gegenereerde elementen. Of je nu jQuery, een andere bibliotheek of de native methodes rechtstreeks gebruikt, maakt niet echt uit.

De tweede methode, het gebruik van inline attributen, heeft veel globale functies nodig (wat leidt tot namespace vervuiling) en mengt de inhoud/structuur (HTML) met het gedrag (JavaScript). Gebruik dat niet.

Je vraag over prestaties of standaarden kan'niet gemakkelijk beantwoord worden. De twee methoden zijn gewoon totaal verschillend, en doen verschillende dingen. De eerste is machtiger, terwijl de tweede wordt veracht (beschouwd als slechte stijl).