jQuery-zelfstudie (deel 4) - gebeurtenisluisteraars

Vandaag gaan we een tandje bijsteken en laten we echt zien waar jQuery schittert - events. Als je de eerdere tutorials hebt gevolgd, zou je nu een redelijk goed begrip moeten hebben van de basiscodestructuur van jQuery jQuery Tutorial - Aan de slag: Basics & Selectors jQuery Tutorial - Aan de slag: Basics & Selectors Vorige week sprak ik over hoe belangrijk jQuery is voor elke moderne webontwikkelaar en waarom het geweldig is. Deze week denk ik dat het tijd wordt dat we onze handen vuil maken met wat code en leren hoe ... Lees meer (en alle vreselijke accolades die daarbij horen), evenals hoe elementen van de DOM te vinden zijn en sommige dingen die je kunt doen om ze te manipuleren Inleiding tot jQuery (deel 2): ​​methoden en functies Inleiding tot jQuery (deel 2): ​​methoden en functies Dit maakt deel uit van een doorlopende introductie voor beginners van jQuery-webprogrammaseries. Deel 1 behandelde de jQuery-basisprincipes van hoe deze in uw project moest worden opgenomen, en selectors. In deel 2 gaan we verder met ... Lees meer. Ik heb je ook laten zien hoe je toegang kunt krijgen tot de ontwikkelaarsconsole in Chrome. Zoek uit naar websiteproblemen met Chrome-ontwikkelaarstools of Firebug ontdek websiteproblemen met Chrome-ontwikkelaarstools of Firebug Als je mijn jQuery-tutorials tot nu toe hebt gevolgd, ben je misschien al tegen het lijf gelopen sommige codeproblemen en niet bekend hoe ze te repareren. Wanneer u wordt geconfronteerd met een niet-functioneel stukje code, is het zeer ... Lees meer en hoe u het zou kunnen gebruiken om uw jQuery-code te debuggen.

Gebeurtenissen - onder andere toepassingen - laten u reageren op dingen die op de pagina gebeuren en gebruikersinteracties - klikken, scrollen en al dat mooie spul.

Wat is een evenement hoe dan ook?

Voor degenen die nieuw zijn in programmeren en die een grafische interface van een soort hebben, verwijzen gebeurtenissen naar elke vorm van interactie tussen de gebruiker en de toepassing; of kan intern worden gegenereerd door een ander proces. Toepassingen kiezen voor welke evenementen “luister voor”, en wanneer die gebeurtenis wordt geactiveerd, kunnen ze op een of andere manier reageren.

Als u bijvoorbeeld tikt op uw iPhone-scherm, genereert u een single “tik op evenement” met een x, y-coördinaat van precies waar je hebt getikt. Als u op een bepaald object tikt, zoals een knop, is de knop waarschijnlijk naar die gebeurtenis aan het luisteren en voert hij dienovereenkomstig een actie uit. Als het slechts een leeg gedeelte van de interface was, was er niets aan de gebeurtenis gehecht en gebeurt er dus niets.

Als u uw vinger over het scherm sleept, wordt er een andere gebeurtenis gegenereerd, een die informatie bevat over het begin- en eindpunt van de sleepbeweging en misschien de snelheid. Evenementen bieden ons een eenvoudige manier om dit te doen reageren op dingen die gebeuren.

Eenvoudig: klikken

Misschien is de klikgebeurtenis de gemakkelijkste gebeurtenis om te luisteren, telkens wanneer een gebruiker op een element klikt. Dit hoeft geen specifiek te zijn “knop” - je kunt een gebeurtenislistener koppelen aan alles op het scherm, maar als een webontwikkelaar moet je dat duidelijk intuïtief maken. Een pseudo-knop maken uit de brief een verborgen in een alinea van de tekst is mogelijk, maar enigszins dom.

De methoden voor het koppelen van een gebeurtenislistener zijn in de loop van de jaren aanzienlijk veranderd, zoals jQuery heeft ontwikkeld, maar dit is de huidige geaccepteerde methode, waarbij on () wordt gebruikt:

$ (Selector) .Op (gebeurtenis, handeling);

Luisteren naar een “Klik” evenement over elementen met de klas .Klik hier, en log dan een bericht in op de console die de bevat tekst van het element waarop is geklikt, zou u het volgende doen:

$ (". clickme"). on ("klik", functie () console.log ($ (this) .text ()););

Je zou moeten kunnen zien dat de actie die we hier hebben ingesloten een anonieme functie is die de deze selector (die verwijst naar het object waar jQuery momenteel mee te maken heeft) - in dit geval het ding waarop is geklikt. Vervolgens extraheren we de tekst van dat geklikte object en loggen het in op de console. Makkelijk, toch?

Stop de standaardactie:

Op een gegeven moment wil je een link toevoegen aan een link of een formulier verzenden knop die meestal iets anders doet. In dat geval is het zeer waarschijnlijk dat je niet wilt dat die originele actie wordt uitgevoerd - in plaats daarvan, wil je wat chique AJAX of speciale jQuery-magie doen.

Om te voorkomen dat die standaardactie plaatsvindt, hebben we een handige methode genaamd preventDefault. Duidelijk. Laten we eens kijken hoe dat zou werken als het gaat om een ​​submit-knop voor een formulier

$ ("# myForm"). on ("submit", functie (event) console.log (event); event.preventDefault (); return false;);

Een paar veranderingen hier - ten eerste, we zijn gehecht aan de voorleggen evenement in plaats van klik. Dit is meer geschikt als het om een ​​formulier gaat zoals de gebruiker dat zou kunnen tab-space, raken invoeren, of druk op a voorleggen knop - die allemaal de standaardactie van het formulier zou activeren. We geven ook de gebeurtenisvariabele door aan de anonieme functie, zodat we kunnen verwijzen naar de evenement gegevens. We hebben toen de event.preventDefault () in combinatie met return false om te voorkomen dat alle gebruikelijke acties worden voltooid.

In dit geval logt het alleen de gebeurtenis in op de console, maar in werkelijkheid zou je hier waarschijnlijk een AJAX-handler hebben, die we in de volgende les zullen behandelen.

Evenementen kunnen ook door jou worden geactiveerd

In de voorgaande twee voorbeelden hebben we de methode Aan gebruikt om naar een gebeurtenis te luisteren, maar u kunt ook handmatig een gebeurtenis activeren door deze als een methode te gebruiken. Het is moeilijk te begrijpen waarom je dit zou kunnen gebruiken om een ​​te forceren “Klik”, maar het is logischer als we kijken naar de focusgebeurtenis.

Focus wordt meestal gebruikt met invoervelden om een ​​bericht af te vuren wanneer de gebruiker in het vak klikt om tekst in te voeren - een instructiebericht op het formaat dat moet worden gebruikt, bijvoorbeeld. Maar u kunt het ook gebruiken om de gebruiker in het veld voor de gebruikersnaam te dwingen wanneer de pagina is geladen, zodat ze onmiddellijk kunnen beginnen met het typen van hun inloggegevens.

$ (document) .ready (function () $ ('# username'.focus (););

Als je ook een focusgebeurtenislistener aan dat gebruikersnaamveld had gekoppeld, zou dit ook worden geactiveerd wanneer je de focus hebt geforceerd. Gebeurtenissen kunnen daarom zowel worden geactiveerd als beluisterd.

Voor nu oefenen door te bevestigen aan verschillende evenementen op de pagina - je kunt een volledige lijst van alle hier beschikbare gebeurtenissen vinden - onthoud om preventDefault te gebruiken als het een link of knop is, en kijk welke uitvoer je krijgt van de console over evenementgegevens.

Ik laat het daar vandaag liggen als we aan het einde van deze minireeks van jQuery-zelfstudies komen. Je zou aan het einde ervan genoeg zelfvertrouwen moeten hebben om wat jQuery op je pagina te gooien en ervoor te zorgen dat het iets doet. Volgende week zullen we kijken naar AJAX - een belangrijk onderdeel van het moderne web waarmee je verzoeken op de achtergrond kunt laden en verzenden zonder de gebruiker te onderbreken.

Zoals altijd, welkom hieronder feedback, vragen, opmerkingen en problemen.

Afbeelding credit: touchscreen via Shutterstock

Ontdek meer over: JavaScript, jQuery, Programming, Web Development.