Ik heb een enorme jQuery-applicatie en ik gebruik de onderstaande twee methoden voor klikgebeurtenissen.
eerste methode
HTML
<div id="myDiv">Some Content</div>
jQuery
$('#myDiv').click(function(){
//Some code
});
tweede methode
HTML
<div id="myDiv" onClick="divFunction()">Some Content</div>
JavaScript-functie-oproep
function divFunction(){
//Some code
}
Ik gebruik de eerste of tweede methode in mijn toepassing. Welke is beter? Beter voor prestaties? En standaard?
Antwoord 1, Autoriteit 100%
Gebruik $('#myDiv').click(function(){is beter omdat het standaard gebeurtenisregistratiemodel volgt. (JQuery Intern gebruikt addEventListeneren attachEvent).
Een evenement in feite registreren in moderne manier is de onopvallend manier van handelen van evenementen. Ook om meer dan één evenement-luisteraar te registreren voor het doel dat u kunt bellen addEventListener()voor hetzelfde doelwit.
var myEl = document.getElementById('myelement');
myEl.addEventListener('click', function() {
alert('Hello world');
}, false);
myEl.addEventListener('click', function() {
alert('Hello world again!!!');
}, false);
Waarom addEventListener gebruiken?(Van MDN)
addEventListener is de manier om een gebeurtenislistener te registreren zoals gespecificeerd
in W3C DOM. De voordelen zijn als volgt:
- Hiermee kunt u meer dan één handler voor een gebeurtenis toevoegen. Dit is vooral handig voor DHTML-bibliotheken of Mozilla-extensies die:
moeten goed werken, zelfs als andere bibliotheken/extensies worden gebruikt.- Het geeft je een fijnmazigere controle over de fase waarin de luisteraar wordt geactiveerd (vastleggen versus borrelen)
- Het werkt op elk DOM-element, niet alleen op HTML-elementen.
Meer over moderne evenementregistratie -> http://www.quirksmode.org/js/events_advanced.html
Andere methoden, zoals het instellen van de HTML-kenmerken, voorbeeld:
<button onclick="alert('Hello world!')">
Of DOM-elementeigenschappen, voorbeeld:
myEl.onclick = function(event){alert('Hello world');};
zijn oud en ze kunnen gemakkelijk worden geschreven.
HTML-kenmerk moet worden vermeden omdat het de markup groter en minder leesbaar maakt. Bezorgdheid van inhoud / structuur en gedrag zijn niet goed gescheiden, waardoor een bug moeilijker is om te vinden.
Het probleem met de Eigenschappen DOM-elementen -methode is dat slechts één gebeurtenishandler kan worden gebonden aan een element per evenement.
Meer over traditionele evenementenbehandeling – & GT; http://www.quirksmode.org/js/events_tradmod.html
MDN Reference: https://developer.mozilla.org/en-us/docs/dom/ gebeurtenis
Antwoord 2, Autoriteit 11%
Gebruik het native javascript voor betere prestaties. Gebruik voor een snellere ontwikkeling jQuery. Controleer de vergelijking in de prestaties op jQuery vs native element prestaties .
Ik heb een test gedaan in Firefox 16.0 32-bits op Windows Server 2008 R2 / 7 64-BIT
$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec
Voor klikgebeurtenissen, controleer Native browser Evenementen versus jQuery trigger of jQuery vs native klik gebeurtenisbinding .
Testen in chroom 22.0.1229.79 32-bits op 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
Antwoord 3, autoriteit 7%
Voor zover ik begrijp, gaat uw vraag niet echt over het al dan niet gebruiken van jQuery. Het is eerder: Is het beter om gebeurtenissen inline in HTML te binden of via gebeurtenislisteners?
Inline-binding is verouderd. Bovendien kun je op deze manier maar één functie aan een bepaalde gebeurtenis binden.
Daarom raad ik aan om gebeurtenislisteners te gebruiken. Op deze manier kunt u veel functies aan een enkele gebeurtenis binden en deze later indien nodig ongedaan maken. Overweeg deze pure JavaScript-code:
querySelector('#myDiv').addEventListener('click', function () {
// Some code...
});
Dit werkt in de meeste moderne browsers.
Als u echter al jQuery in uw project opneemt, gebruik dan gewoon de functie jQuery: .onof .click.
Antwoord 4, autoriteit 3%
Je zou ze kunnen combineren, jQuery gebruiken om de functie aan de klik te binden
<div id="myDiv">Some Content</div>
$('#myDiv').click(divFunction);
function divFunction(){
//some code
}
Antwoord 5, autoriteit 3%
Ga hiervoor, want het geeft je zowel standaard als prestaties.
$('#myDiv').click(function(){
//Some code
});
Omdat de tweede methode eenvoudige JavaScript-code is en sneller is dan jQuery. Maar hier zullen de prestaties ongeveer hetzelfde zijn.
Antwoord 6, autoriteit 3%
$('#myDiv').clickis beter, omdat het JavaScript-code scheidt van HTML. Men moet proberen de pagina gedrag en structuur verschillendte houden. Dit helpt enorm.
Antwoord 7, autoriteit 2%
IMHO, onclick heeft alleen de voorkeur boven .click als aan de volgende voorwaarden is voldaan:
- er zijn veel elementen op de pagina
- slechts één gebeurtenis die moet worden geregistreerd voor de klikgebeurtenis
- Je maakt je zorgen over de mobiele prestaties/batterijduur
Ik heb deze mening gevormd vanwege het feit dat de JavaScript-engines op mobiele apparaten 4 tot 7 keer langzamer zijn dan hun desktop-tegenhangers die in dezelfde generatie zijn gemaakt. Ik haat het wanneer ik een site op mijn mobiele apparaat bezoek en zenuwachtig scrollen omdat de jQuery alle gebeurtenissen bindt ten koste van mijn gebruikerservaring en levensduur van de batterij. Een andere recente ondersteunende factor, hoewel dit alleen een punt van zorg zou moeten zijn bij overheidsinstanties 😉 , we hadden een IE7-pop-up met een berichtvenster waarin stond dat het JavaScript-proces te lang duurt…het proces wachten of annuleren. Dit gebeurde elke keer als er veel elementen waren om aan te binden via jQuery.
Antwoord 8, autoriteit 2%
Verschil in werken. Als je click() gebruikt, kun je verschillende functies toevoegen, maar als je een attribuut gebruikt, wordt er maar één functie uitgevoerd – de laatste.
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')" )
Als we het over prestaties hebben, is in elk geval direct gebruik altijd sneller, maar met behulp van een attribuut, kunt u slechts één functie toewijzen.
Antwoord 9, Autoriteit 2%
Sneeming van zorgen is hier de sleutel, en dus is de gebeurtenisbinding de algemeen geaccepteerde methode. Dit is eigenlijk wat veel van de bestaande antwoorden hebben gezegd.
Echter gooi het idee van declaratieve markup niet te snel weg. Het is plaats, en met frameworks zoals Angularjs, is het middelpunt.
Er moet inzicht zijn dat de hele <div id="myDiv" onClick="divFunction()">Some Content</div>was zo zwaar omdat het werd misbruikt door sommige ontwikkelaars. Het bereikte dus het punt van heilige proporties, net als tables. Sommige ontwikkelaars Eigenlijk vermijden tablesvoor tabelgegevens. Het is het perfecte voorbeeld van mensen die handelen zonder begrip.
Hoewel ik het idee houd om mijn gedrag van mijn mening te houden. Ik zie geen probleem met de markup die verklaart wat het doet (niet hoe het doet het, dat is gedrag). Het is mogelijk in de vorm van een actueel onclickattribuut of een aangepast attribuut, net zoals Bootstraps JavaScript-componenten.
Op deze manier, door net bij de markup te kijken, kunt u zien wat er is, in plaats van opzoeken van Lookup JavaScript-evenementenbinders te proberen.
Dus, als derde alternatief voor het bovenstaande, het gebruik van gegevensattributen om het gedrag binnen de opmaak declaratief aan te kondigen. Gedrag wordt buiten beeld gehouden, maar in één oogopslag zie je wat er gebeurt.
Bootstrap-voorbeeld:
<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>
Bron: http://getbootstrap.com/javascript/#popovers
OpmerkingHet grootste nadeel van het tweede voorbeeld is de vervuiling van de globale naamruimte. Dit kan worden omzeild door ofwel het derde alternatief hierboven te gebruiken, of frameworks zoals Angular en hun ng-click-attributen met automatisch bereik.
Antwoord 10
<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />
onclick, onmouseover, onmouseout, etc.gebeurtenissen zijn eigenlijk slecht voor de prestaties(voornamelijk in Internet Explorer, zie figuur). Als u codeert met behulp van Visual Studio, zal elk van deze maak een apart SCRIPT-blok dat geheugen in beslag neemt en dus de prestaties vertraagt.
Om nog maar te zwijgen over een scheiding van zorgen: JavaScript en lay-outs moeten worden gescheiden!
Het is altijd beter om evenHandlers te maken voor elk van deze evenementen, één evenement kan honderden/duizenden items vastleggen, in plaats van duizenden afzonderlijke scriptblokken voor elk te maken!
(Ook alles wat iedereen zegt.)
Antwoord 11
Geen van beide is beteromdat ze voor verschillende doeleinden kunnen worden gebruikt. onclick(zou eigenlijk onclickmoeten zijn) presteert iets beter, maar ik betwijfel ten zeerste of je daar een verschil zult merken.
Het is vermeldenswaard dat ze verschillende dingen doen: .clickkan worden gebonden aan elke jQuery-verzameling, terwijl onclickinline moet worden gebruikt op de elementen die u wilt gebonden. U kunt ook slechts één gebeurtenis binden met onclick, terwijl u met .clickgebeurtenissen kunt blijven binden.
Naar mijn mening zou ik er consequent in zijn en gewoon overal .clickgebruiken en alvan mijn JavaScript-code bij elkaar houden en gescheiden houden van de HTML.
Gebruik onclickniet. Er is geen enkele reden om het te gebruiken, tenzij je weet wat je doet, en waarschijnlijk ook niet.
Antwoord 12
Nou, een van de belangrijkste ideeën achter jQueryis om JavaScript te scheiden van het vervelende HTML-code. De eerste methode is de juiste keuze.
Antwoord 13
Meestal zijn native JavaScript-methoden een betere keuze dan jQuery wanneer prestaties het enige criterium zijn, maar jQuery maakt gebruik van JavaScript en maakt de ontwikkeling eenvoudig. U kunt jQuery gebruiken omdat het de prestaties niet te veel verslechtert. In uw specifieke geval is het prestatieverschil te verwaarlozen.
Antwoord 14
De eerste methode om onclickte gebruiken is niet jQuery maar gewoon Javascript, dus je krijgt niet de overhead van jQuery. De jQuery-manier kan worden uitgebreid via selectors als je het aan andere elementen moet toevoegen zonder de gebeurtenishandler aan elk element toe te voegen, maar zoals je het nu hebt, is het gewoon een vraag of je jQuery moet gebruiken of niet.
Persoonlijk, aangezien je jQuery gebruikt, zou ik me eraan houden omdat het consistent is en de opmaak loskoppelt van het script.
Antwoord 15
De eerste methode is om de voorkeur te geven. Het gebruikt het geavanceerde gebeurtenisregistratiemodel[s], wat betekent dat je meerdere handlers kunt koppelen aan hetzelfde onderdeel. U kunt eenvoudig toegang krijgen tot het gebeurtenisobject en de handler kan in het bereik van elke functie leven. Het is ook 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 methoden gebruikt, maakt niet echt uit.
De tweede methode, die gebruik maakt van inline attributen, heeft veel globale functies nodig (wat leidt tot vervuiling van de naamruimte) en vermengt de inhoud/structuur (HTML) met het gedrag (JavaScript). Gebruik dat niet.
Uw vraag over prestaties of normen kan niet eenvoudig worden beantwoord. De twee methoden zijn gewoon totaal verschillend en doen verschillende dingen. De eerste is machtiger, terwijl de tweede wordt veracht (beschouwd als een slechte stijl).
Antwoord 16
Onclick Functie JQuery
$('#selector').click(function(){
//Your Functionality
});
Antwoord 17
Prestaties
Er zijn hier echter al veel goede antwoorden, auteurs noemen soms prestaties, maar eigenlijk heeft niemand het nog onderzocht – dus ik zal me hier op dit aspect concentreren. Vandaag voer ik een test uit op Chrome 83.0, Safari 13.1 en Firefox 77.0 voor de genoemde oplossingen en daarnaast enkele alternatieve oplossingen (sommige werden genoemd in andere antwoorden).
Resultaten
Ik vergelijk hier oplossingen A-H omdat ze werken op elementen id. Ik laat ook resultaten zien voor oplossingen die class(I,J,K) als referentie gebruiken.
- oplossing op basis van html-inline handlerbinding (B) is snel en het snelst voor Chrome en het snelst voor een klein aantal elementen
- oplossingen op basis van
getElementById(C,D) zijn snel en voor een groot aantal elementen het snelst in Safari en Firefox - Referentieoplossingen op basis van I,J zijn het snelst voor een groot aantal elementen, dus het is de moeite waard om in dit geval
classte gebruiken in plaats van eenid-aanpak - oplossing op basis van jQuery.click (A) is het langzaamst
Details
Eigenlijk was het niet eenvoudig om een prestatietest voor deze vraag te ontwerpen. Ik merk dat voor alle geteste oplossingen de prestaties van het activeren van gebeurtenissen voor 10K div-s snel waren en dat ik handmatig geen verschillen tussen beide kon detecteren (u kunt het onderstaande fragment uitvoeren om het zelf te controleren). Dus ik concentreer me op het meten van de uitvoeringstijd van het genereren van html en het binden van gebeurtenishandlers voor twee gevallen