Gebeurtenisafhandeling met jQuery

De evenementen zijn situaties die voorkomen in ons document HTML, kan worden geactiveerd door situaties van het systeem zelf of door gebruikersacties. In beide gevallen, wanneer een gebeurtenis plaatsvindt, is het mogelijk om een ​​nabewerking uit te voeren met behulp van jQuery, zodat we betere effecten in onze programma's kunnen bereiken.
Dit is van het grootste belang, aangezien we dit aspect kennen en met behulp van het raamwerk onze webpagina's en applicaties meer dynamiek kunnen geven.
Dit is het eerste dat we moeten beantwoorden als we werken met evenementen in jQuery, We hadden al gezegd dat gebeurtenissen acties of situaties zijn die worden geactiveerd door het systeem of door de gebruiker, bijvoorbeeld wanneer het document klaar is met laden, het systeem de gebeurtenis activeert klaar of klaar, wanneer een gebruiker op een element klikt, wordt een gelijknamige gebeurtenis geactiveerd.
Met deze kleine voorbeelden in het achterhoofd, kunnen we dan de basissyntaxis zien om elk type gebeurtenis af te handelen, namelijk de volgende:

$ (selector) .on ("eventName", functie () {….})

Laten we onthouden of verduidelijken dat de selector de naam is waarmee we het element in ons document gaan lokaliseren, dan met behulp van de methode .Aan () We kunnen het dan vertellen naar welke gebeurtenis het moet luisteren en wanneer het het detecteert, kan het een anonieme functie uitvoeren in onze scriptsectie van de HTML.
Iets interessants dat we kunnen benadrukken, is dat we a . kunnen gebruiken handler voor verschillende evenementenMet andere woorden, we kunnen dezelfde actie uitvoeren voor verschillende situaties, we hoeven alleen de verschillende gebeurtenissen op te sommen waarnaar moet worden geluisterd, de syntaxis lijkt erg op degene die we zojuist hebben gezien.
$ (selector) .on ("gebeurtenisnaam1 gebeurtenisnaam2 gebeurtenisnaam3….", functie () {….})
Omdat we de meest elementaire kennen, moeten we ook beginnen te weten dat jQuery Het zal ons leven als ontwikkelaars altijd gemakkelijker maken, dus het heeft een aantal snelkoppelingen gegeven om gebeurtenis-handlers te maken, hiermee hoeven we niet de volledige verklaring af te leggen zoals we in het vorige deel zagen, maar we passen deze snelkoppelingen rechtstreeks toe op de selector.
Laten we eens kijken naar enkele van de meest interessante snelkoppelingen die door ontwikkelaars worden gebruikt, het moet worden opgemerkt dat dit niet de volledige lijst is van de beschikbare snelkoppelingen. Om deze lijst te verkrijgen, is het beter om rechtstreeks naar de officiële documentatie te gaan, maar om een ​​klein begin te maken met de onderwerp, deze zijn meer dan genoeg.
klaar ()Wordt uitgevoerd wanneer alle elementen van het document ZON ze worden geladen, dat wil zeggen, wanneer de site gereed is, vandaar de naam. Opgemerkt moet worden dat dit een systeemgebeurtenis is.
indienen ()Het gebeurt wanneer we een formulier indienenHet interessante is dat wanneer het formulier voorkomt, het niet op de traditionele manier verzendt, maar eerder wacht op wat deze gebeurtenis het vertelt, zodat we het kunnen gebruiken als een tussenpunt voor veldvalidaties om een ​​voorbeeld van het gebruik ervan te noemen.
Klik ()Het wordt uitgevoerd wanneer de gebruiker dat doet Klik met de muisaanwijzer op een element, kan het afkomstig zijn uit een invoertypeveld, om elementen op te nemen zoals: of de ankers . Hoe we konden zien, is een gebeurtenis die door de gebruiker is geactiveerd.
vervagen ()Het treedt op wanneer het element waarop we ons op dit moment bevinden onscherp is, we schrijven bijvoorbeeld in een tekstveld en gaan naar een volgend veld, in dit geval heeft het eerste veld de focus verloren en wordt deze gebeurtenis uitgevoerd.
focussen ()In tegenstelling tot de vorige gebeurtenis, gebeurt dit net wanneer we ons op een element concentreren.
zweven ()Deze gebeurtenis vindt plaats wanneer we de muisaanwijzer over een element van de ZON, kan meestal worden toegepast op en ankers .
selecteer ()Treedt op wanneer we een element in een veld selecteren selecteerWe hebben bijvoorbeeld een vervolgkeuzelijst en we kiezen een item uit de inhoud ervan.
verandering ()Treedt op wanneer de waarde of status van een element verandert, bijvoorbeeld binnen een veld selecteer, wanneer we de optie wijzigen die we daar weerspiegeld zien.
Omdat we een beetje weten over de meest gebruikte gebeurtenissen, gaan we een klein document genereren dat sommige ervan in de praktijk brengt, hetzij in hun volledige syntaxis of met voorbeelden, zodat we met beide vormen kunnen experimenteren.
In de volgende code zullen we zien hoe we in eerste instantie gaan schrijven met console.log () als we het document binnen hebben klaar (), dan zullen we een ander bericht toepassen wanneer we de muisaanwijzer over a . bewegen om te bevestigen hoe het werkt zweven, eindelijk zullen we zien hoe te gebruiken Klik () Y focussen () om andere berichten weer te geven. Laten we eens kijken naar de code die het bovenstaande beschrijft:

 Evenement voorbeeld 1
Beweeg met de muis over deze Div !!

Schrijf hier iets:
Focus op mij:
$ (document) .ready (function () {console.log ("De ready-gebeurtenis is gebeurd !!");}); $ ("# hover-gebeurtenis"). hover (functie () {console.log ("Hover-gebeurtenis is gebeurd!");}); $ ("# Click-gebeurtenis"). click (function () {console.log ("we hebben een Click-gebeurtenis geactiveerd") VERGROTEN
Dit gebeurt wanneer we willen dat een element verschillende bijbehorende gebeurtenissen heeft, op deze manier kunnen we onze code beter organiseren en meerdere functionaliteiten aan ons element bieden.
Er zijn twee mogelijkheden, het uitvoeren van dezelfde actie voor meerdere gebeurtenissen of het uitvoeren van een andere actie voor elke gebeurtenis, hoe we ook willen, we zullen de volledige syntaxis moeten gebruiken, de eerste die we al aan het begin hebben gedefinieerd.
Laten we eens kijken hoe we verschillende acties kunnen koppelen aan verschillende gebeurtenissen voor hetzelfde element. Hiervoor moeten we een basissyntaxis gebruiken zoals de volgende:

 $ (selector) .on ({EventName1: function () {…}, EventName2: function () {…}}); 

Zoals we kunnen zien, vermijden we bij het gebruik van deze vorm van syntaxis dat we iets als het volgende moeten doen:

 $ (kiezer) .ShortcutEvent1 (functie () {}); $ (kiezer) .ShortcutEvent2 (functie () {}); 

Wat ons in staat stelt om meer georganiseerd te zijn, maar beide zijn geldig en het is aan de ontwikkelaar om degene toe te passen die het beste bij hem past.
Omdat we weten hoe we meerdere evenementen aan een element kunnen koppelen, gaan we het in de praktijk brengen, we gaan de evenementen selecteren Klik () Y focussen () Voor dit voorbeeld gaan we ze toepassen op twee elementen, in het eerste element gaan we voor elk van hen dezelfde respons genereren en in de tweede zal elke gebeurtenis zijn eigen respons hebben. Laten we eens kijken naar de code die we moeten uitvoeren om ons doel te bereiken:

 Evenement voorbeeld 2
Hetzelfde resultaat meerdere gebeurtenissen:

Verschillende resultaten per evenement:
$ ("# element1"). op ("klik focus", functie () {console.log ("we laten hetzelfde zien voor 3 gebeurtenissen!");}); $ ("# element2"). op ({klik: function () {console.log ("we hebben op element2 geklikt");}, focus: function () {console.log ("we hebben ons gericht op element2") ;}}); 

Hier zien we dat we voorzichtig moeten zijn met de tweede vorm van verschillende reacties voor verschillende gebeurtenissen, aangezien de gebeurtenissen niet tussen aanhalingstekens gaan zoals wanneer we het in de eerste vorm doen, ook dat we tussen haakjes moeten plaatsen {} alles binnen de methode .Aan (), dit is een fout die heel vaak kan voorkomen, dus met deze voorzorgsmaatregel kunnen we deze voorkomen. Laten we nu eens kijken hoe ons voorbeeld eruitziet wanneer we het in onze browser uitvoeren:

VERGROTEN
We noteren de teller met een nummer 2 wanneer de gebeurtenissen op het eerste element plaatsvinden, betekent dit dat we dezelfde actie twee keer hebben gedaan als we hadden gepland. In het tweede element merken we dat we de twee bepaalde acties in de console afdrukken, hoewel we ook zien dat ze in een andere volgorde plaatsvinden dan de volgorde waarin we ze hebben geplaatst, dit komt omdat de gebeurtenis van focus gebeurt voordat de Klik in de gebeurtenishiërarchie, vooral als we de sleutel gebruiken TAB om tussen de velden te bewegen.
Aan het einde van deze tutorial hebben we geleerd hoe we aan de slag kunnen in de wereld van event handling met jQueryDit is slechts een mondopener, maar met deze kleine functies kunnen we veel bereiken in onze toepassingen.

Heeft deze tutorial je geholpen?
Als niet

HELP DEZE TUTORIAL TE VERBETEREN!
Denk je dat je deze tutorial kunt corrigeren of verbeteren? U kunt uw editie opsturen met de wijzigingen die u nuttig acht.
0 gebruikers hebben deze tutorial bewerkt. Bewerk en word een erkende expert!
Deze zelfstudie bewerken

VERGELIJKBARE TUTORIALS

Afbeeldingen slepen en pakken met JQuery UIHoe maak je een Spinner of laadpictogram met JQueryJQuery-plug-ins en bibliotheken voor webontwikkelingFlexigrid dynamisch raster met JQuery en PHPJSON-afhandeling met Node.jsGebeurtenisafhandeling in Node.jsOmgaan met buffers in Node.jsReguliere expressies met JQuery
Geen reacties, wees de eerste!
Wacht niet langer en ga naar SolveticLaat uw opmerkingen achter en profiteer van het gebruikersaccount Doe mee!

Maak accountMeld u GRATIS aan om uw Solvetic-account te hebbenRegistreer een account
IdentificerenHeeft u al een account? Meld je hier aanIdentificeer mij in mijn account




Informatie

 gepubliceerd 12 december 2014 14:44
 Bijgewerkt 14 dec 2014 05:44
 bezoeken 3.7K
 NiveauProfessioneel


Laatste JavaScript-zelfstudies

NPM bijwerken met PowerShell in Windows 10
Afbeeldingen slepen en pakken met JQuery UI
Hoe maak je een Spinner of laadpictogram met JQuery
Hoe een website in meerdere talen te laten vertalen

Meer zien van JavaScript