Inhoudsopgave
Sinds versie 1.7 van jQuery hebben we de methode on () die ons alle benodigde functionaliteit biedt om gebeurtenissen te beheren. Dankzij deze methode hebben we niet langer de oude bind (), live () of delegate () nodig, maar we hebben ook geen blur (), focus (), click (), hover () en andere nodig.
Net zoals er aan () is, hebben we het tegenovergestelde, uit (), waarmee de gebeurtenissen worden verwijderd die zijn toegewezen met aan ().
We gaan een reeks voorbeelden zien om de methode on () beter te begrijpen.
Stel dat we een functie willen uitvoeren wanneer er op een knop wordt geklikt:
(functie () {$ ('knop'). klik op (functie () {// code om uit te voeren});}) ();Het is alsof we het traditioneel zouden doen met klik (). Maar als we naar de jQuery-code kijken, zullen we zien dat wat er feitelijk gebeurt, is dat de methode on () wordt aangeroepen, dus het snelste is om te doen:
(functie () {$ ('knop'). on ('klik', functie () {// code om uit te voeren});}) ();Dit is de meest directe route. En hetzelfde voor andere methoden zoals change (), hover (), mouseenter (), etc … (eigenlijk hover () wat het doet is mouseenter () en mouseleave () aanroepen die op hun beurt de methode on () aanroepen
Laten we eens kijken naar jQuery. Als we versie 1.7 of hoger downloaden en naar de code kijken, zien we het volgende:
jQuery.each ("onscherpte focus focusin focusout laden formaat wijzigen scrollen verwijderen klik dblklik mousedown mouseup mouse move mouseover mouseout mouse enter mouse leave change select submit keydown keypress keyup error contextmenu"). split (""), f function (i, name) {// Gebeurtenisbinding afhandelen jQuery.fn [naam] = functie (data, fn) {if (fn == null) {fn = data; data = null;} return argumenten.length -> 0? This.on (name, null, data, fn): deze.trigger (naam);};Vanaf hier zijn we alleen geïnteresseerd in het zien dat de methoden "blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error en contextmenu "aan het einde eindigen allemaal in" this.on (name, null, data, fn) ".
bind (), live () en delegeren ()
In het verleden werd het ook gedaan:
(functie () {$ ('knop').bind ('klik', functie () {// code die moet worden uitgevoerd wanneer op de knop wordt geklikt});}) ();Of als we wilden dat de gebeurtenis zou werken, zelfs na het toevoegen van nieuwe "knop" -elementen aan het document, dan zouden we de live () methode gebruiken:
(functie () {$ ('knop'). live ('klik', functie () {// code die moet worden uitgevoerd wanneer op de knop wordt geklikt});}) ();Vervolgens introduceerde jQuery "delegate ()", waarmee we een gebeurtenis aan een context konden toewijzen. Als de knop zich bijvoorbeeld bevindt (of zal zijn, als deze later wordt toegevoegd) in een div met de klasse "container":
(function () {$ ('div.container').delegate ('button', 'click', function () {// code die moet worden uitgevoerd wanneer op de knop wordt geklikt});}) ();Maar net als bij de vorige, zowel binden (), live () als delegeren () is het enige wat ze doen de methode on () aanroepen.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven
