Met de nieuwe jQuery-functie .on() die .live() vervangt, heb ik verschillende manieren gezien om het te gebruiken. Hier bekijk ik het belangrijkste verschil tussen het gebruik van hoofdtekst of document als het gebonden element in gebeurtenisdelegatie. Als u nieuw bent bij het delegeren van gebeurtenissen, biedt het de mogelijkheid om gebeurtenissen toe te voegen aan elementen die nog niet zijn gemaakt, met ook een lagere overhead bij het koppelen van gebeurtenissen aan meerdere elementen van hetzelfde type. Voor meer informatie, en als je je afvraagt waarom .live() slecht verouderd was, kijk dan eens naar jQuery .live() vs .on() review.
De meeste browsergebeurtenissen bubbelen of verspreiden zich vanaf het diepste, binnenste element (het gebeurtenisdoel) in het document waar ze plaatsvinden tot aan de hoofdtekst en het documentelement. In Internet Explorer 8 en lager zijn een aantal gebeurtenissen, zoals wijzigen en indienen niet van nature bubbelend, maar jQuery patcht deze om te bubbelen en consistent gedrag tussen verschillende browsers te creëren.
Bron:http://api.jquery.com/on/
De instantie gebruiken als de afgevaardigde
Voeg voor de beste prestaties gedelegeerde gebeurtenissen toe op een documentlocatie zo dicht mogelijk bij de doelelementen. Vermijd overmatig gebruik van document of document.body voor gedelegeerde evenementen op grote documenten.
HTML verwerkt de slepen-en-neerzetten-gebeurtenissen:
$('body').on('dragover', filesDragged).on('drop', filesDropped);Document gebruiken als gemachtigde
Het documentelement is beschikbaar in de kop van het document voordat een andere HTML wordt geladen, dus het is veilig om gebeurtenissen daar toe te voegen zonder te wachten tot het document gereed is.
Standaard borrelen de meeste gebeurtenissen op van het oorspronkelijke gebeurtenisdoel naar het documentelement.
Het draait allemaal om snelheid!?
Zoals je in deze jsperf kunt zien, is het gebruik van een document sneller dan het gebruik van body als de gemachtigde van de gebeurtenis.
Opnieuw presteert het document beter, maar er is niet veel verschil tussen .on() en .delegate() - de laatste roept de eerste aan.
jQuery-bron.
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},Conclusie
Vraag het aan Paul Irish. Maar ik denk dat het niet veel verschil maakt, ik heb de neiging om body te gebruiken, want dat staat in de officiële jQuery API-documentatie.
Correct gebruik:
Bijvoorbeeld in plaats van:
$("body").on("click", "#commentForm .addNew", addComment)Gebruik:
$("#commentForm").on("click", ".addNew", addComment).Wanneer moet je evenementdelegatie gebruiken?
1. Wanneer u een gemeenschappelijke handler bindt voor meer elementen die dezelfde functionaliteit nodig hebben. (Bijvoorbeeld:tabelrij zweven)
* Als u in het voorbeeld alle rijen zou moeten binden met directe binding, zou u uiteindelijk n handler maken voor n rijen in die tabel. Door de delegatiemethode te gebruiken, zou je uiteindelijk al die in 1 eenvoudige handler kunnen afhandelen.
2. Wanneer u vaker dynamische inhoud toevoegt in DOM (bijvoorbeeld:rijen toevoegen/verwijderen uit een tabel)
Waarom zou je geen evenementdelegatie gebruiken?
1. Het delegeren van evenementen is langzamer in vergelijking met het rechtstreeks aan een element binden van het evenement.
* Het vergelijkt de doelselector op elke bel die het raakt, de vergelijking zal even duur als ingewikkeld zijn.
2. Geen controle over het borrelen van de gebeurtenis totdat het het element raakt waaraan het is gebonden.
PS:Zelfs voor dynamische inhoud hoeft u de methode voor het delegeren van gebeurtenissen niet te gebruiken als u de handler bindt nadat de inhoud in DOM is ingevoegd. (Als de dynamische inhoud niet vaak wordt verwijderd/opnieuw toegevoegd)
Verdere lezing:
Gebeurtenisdelegatie is een techniek om uw handlers te schrijven voordat het element daadwerkelijk in DOM bestaat. Deze methode heeft zijn eigen nadelen en mag alleen worden gebruikt als u dergelijke vereisten heeft.
Bron:http://stackoverflow.com/questions/12824549/should-all-jquery-events-be-bound-to-document