Jeg har en stor jQuery-applikasjon, og jeg bruker de to metodene nedenfor for klikkhendelser.
Første metode
<div id="myDiv">Some Content</div>
$('#myDiv').click(function(){
//Some code
});
Andre metode
<div id="myDiv" onClick="divFunction()">Some Content</div>
function divFunction(){
//Some code
}
Jeg bruker enten den første eller den andre metoden i søknaden min. Hvilken er best? Bedre for ytelse? Og standard?
Å bruke $('#myDiv').click(function(){
er bedre ettersom det følger standard hendelsesregistreringsmodell. (jQuery internt bruker addEventListener
og attachEvent
).
I utgangspunktet er registrering av en hendelse på moderne måte den lite påtrengende måten å håndtere hendelser på. For å registrere mer enn én hendelseslytter for målet kan du også kalle addEventListener()
for det samme målet.
var myEl = document.getElementById('myelement');
myEl.addEventListener('click', function() {
alert('Hello world');
}, false);
myEl.addEventListener('click', function() {
alert('Hello world again!!!');
}, false);
Hvorfor bruke addEventListener? (Fra MDN)
addEventListener er måten å registrere en hendelseslytter på som spesifisert i W3C DOM. Fordelene er som følger:
- Det gjør det mulig å legge til mer enn en enkelt hendelsesbehandler for en hendelse. Dette er spesielt nyttig for DHTML-biblioteker eller Mozilla-utvidelser som må fungere godt selv om andre biblioteker/utvidelser brukes.
- Det gir deg finkornet kontroll over fasen når lytteren blir aktivert (fange vs. boblende)
- Det fungerer på alle DOM-elementer, ikke bare HTML-elementer.
Mer om moderne hendelsesregistrering - > http://www.quirksmode.org/js/events_advanced.html
Andre metoder som å sette HTML-attributter, for eksempel:
<button onclick="alert('Hello world!')">
Eller DOM-elementegenskaper, eksempel:
myEl.onclick = function(event){alert('Hello world');};
er gamle og kan lett overskrives.
HTML-attributtet bør unngås fordi det gjør markeringen større og mindre lesbar. Problemer med innhold/struktur og oppførsel er ikke godt atskilt, noe som gjør det vanskeligere å finne en feil.
Problemet med metoden DOM element properties er at bare én hendelsesbehandler kan knyttes til et element per hendelse.
Mer om tradisjonell hendelseshåndtering -> http://www.quirksmode.org/js/events_tradmod.html
MDN-referanse: https://developer.mozilla.org/en-US/docs/DOM/event
Den første metoden er å foretrekke. Den bruker advanced event registration model[s], som betyr at du kan knytte flere handlere til samme element. Du kan enkelt få tilgang til hendelsesobjektet, og behandleren kan leve i hvilken som helst funksjons omfang. Det er også dynamisk, dvs. det kan påkalles når som helst og er spesielt godt egnet for dynamisk genererte elementer. Om du bruker jQuery, et annet bibliotek eller de innfødte metodene direkte spiller ingen rolle.
Den andre metoden, som bruker inline-attributter, trenger mange globale funksjoner (som fører til navneromsforurensning) og blander innholdet/strukturen (HTML) med atferden (JavaScript). Ikke bruk det.
Spørsmålet ditt om ytelse eller standarder kan ikke enkelt besvares. De to metodene er bare helt forskjellige, og gjør forskjellige ting. Den første er mektigere, mens den andre er foraktet (ansett som dårlig stil).