jQuery-zelfstudie (deel 4) - Eventluisteraars

Advertentie

Vandaag gaan we een tandje bijsteken en laten we echt zien waar jQuery schittert - evenementen . 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 vies maken met wat code en leren hoe ... Lees meer (en alle vreselijke accolades die daarbij horen), en hoe je elementen van de DOM en sommige dingen die je tegenkomt kunt vinden kan 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 lopende 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 geconfronteerd wordt 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 die mooie dingen.

Wat is een evenement eigenlijk?

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 welke gebeurtenissen moeten "luisteren" en wanneer die gebeurtenis wordt geactiveerd, kunnen ze op een of andere manier reageren.

Als u bijvoorbeeld op uw iPhone-scherm tikt, genereert u één 'tikgebeurtenis' met een x, y-coördinaat van precies waar u 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 gemakkelijke manier om te 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 specifieke "knop" te zijn - je kunt een gebeurtenislistener koppelen aan alles op het scherm, maar als een webontwikkelaar moet je dat duidelijk intuïtief maken. Het maken van een pseudo-knop uit de letter een verborgen in een paragraaf 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).on(event, action); 

Als u wilt luisteren naar een "klik" -gebeurtenis op elementen met de klasse .clickme en dan een bericht bij de console aanmeldt dat de tekst bevat van het element waarop is geklikt, doet u het volgende:

 $(".clickme").on("click", function(){ console.log($(this).text()); }); 

Je zou in staat moeten zijn om te zien dat de actie die we hier hebben ingesloten een anonieme functie is die de selector gebruikt (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", function(event){ console.log(event); event.preventDefault(); return false; }); 

Een paar wijzigingen hier - ten eerste houden we vast aan de gebeurtenis indienen in plaats van klikken. Dit is meer geschikt wanneer het om een ​​formulier gaat, aangezien de gebruiker tab-space kan gebruiken, op enter kan drukken of op een submit- knop kan drukken - die allemaal de standaardactie van het formulier zou activeren. We geven ook de gebeurtenisvariabele door aan de anonieme functie, zodat we naar de gebeurtenisgegevens kunnen verwijzen. We hebben vervolgens de event.preventDefault () gebruikt in combinatie met return false om te voorkomen dat alle gebruikelijke acties worden voltooid.

In dit geval logt het alleen het evenement in op de console, maar in werkelijkheid zou je 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 ​​"klik" af te dwingen, 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 over 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 - u kunt een volledige lijst van alle hier beschikbare gebeurtenissen vinden - vergeet niet om preventDefault te gebruiken als het een link of knop is en om te zien welke uitvoer u van de console krijgt over gebeurtenisgegevens.

Ik laat het daar vandaag liggen als we aan het einde van deze mini-serie 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 zijn hieronder welkom feedback, vragen, opmerkingen en problemen.

Afbeelding credit: touchscreen via Shutterstock