Tutorial jQuery (Partea 4)

Publicitate

Astăzi vom face o notch și vom arăta cu adevărat unde strălucește jQuery - evenimente. Dacă ați urmat tutorialele anterioare, acum ar trebui să înțelegeți destul de bine aspectele structura de bază a codului jQuery jQuery Tutorial - Noțiuni introductive: Noțiuni de bază și selectoriSăptămâna trecută, am vorbit despre cât de important este jQuery pentru orice dezvoltator web modern și de ce este minunat. Săptămâna aceasta, cred că a venit timpul să ne murdărim cu niște coduri și am învățat cum ... Citeste mai mult (și toate bretelele groaznice cretate care merg cu ea), precum și modul în care se găsesc elemente ale DOM și unele lucruri pe care le puteți face pentru a le manipula Introducere în jQuery (Partea 2): Metode și funcțiiAceasta face parte dintr-o introducere pentru începători în seria de programare web jQuery. Prima parte a abordat elementele de bază ale jQuery despre cum să o incluzi în proiectul tău și selectori. În partea 2, vom continua cu ... Citeste mai mult . V-am arătat, de asemenea, cum să accesați

consola pentru dezvoltatori în Chrome Descoperiți problemele site-ului web cu instrumentele pentru dezvoltatori Chrome sau FirebugDacă ați urmat tutorialele mele jQuery până acum, este posibil să aveți deja probleme cu codul și nu știți cum să le rezolvați. Când este confruntat cu un bit de funcție care nu funcționează, este foarte ... Citeste mai mult și cum îl puteți folosi pentru a depana codul jQuery.

Evenimentele - printre alte utilizări - vă permit să reacționați la lucrurile care se întâmplă pe pagină și la interacțiunile utilizatorilor - făcând clic, defilare și toate aceste lucruri de lux.

Ce este oricum un eveniment?

Pentru cei noi în programare care implică o interfață grafică de un fel, evenimentele se referă la orice tip de interacțiune între utilizator și aplicație; sau poate fi generat intern printr-un alt proces. Aplicațiile aleg ce evenimente trebuie „ascultate” și atunci când evenimentul este declanșat, ele pot reacționa într-un fel.

De exemplu, atingerea pe ecranul iPhone-ului dvs. va genera un singur „eveniment tap” cu o coordonată x, y exactă de unde ați atins. Dacă ați atins un anumit obiect, cum ar fi un buton, este posibil ca butonul să asculte pentru acel eveniment și va efectua unele acțiuni în consecință. Dacă a fost doar o parte goală a interfeței, nimic nu a fost atașat la eveniment și astfel nu se va întâmpla nimic.

Tragerea degetului pe ecran ar genera un alt eveniment, unul care include informații despre punctul de început și final al mișcării de tracțiune și, probabil, viteza. Evenimentele ne oferă un mod ușor de făcut reacționează la lucrurile care se întâmplă.

Ușor: dând clic

Poate că cel mai ușor eveniment de ascultat este evenimentul de clic, tras atunci când un utilizator face clic pe un element. Acesta nu trebuie să fie un „buton” specific - puteți să atașați un ascultător de evenimente la orice lucru de pe ecran, dar în calitate de dezvoltator web, trebuie să faceți acest lucru intuitiv. Crearea unui pseudo-buton din literă A ascuns într-un paragraf de text este posibil, dar oarecum prost.

Metodele de atașare a unui ascultător de evenimente s-au schimbat semnificativ de-a lungul anilor pe măsură ce jQuery s-a dezvoltat, dar aceasta este metoda actuală acceptată, folosind pe():

$(selector).pe(eveniment,acțiune);

Pentru a asculta un „clic”Eveniment pentru orice elemente cu clasa .clickme, apoi conectați un mesaj la consolă care conține text a elementului pe care faceți clic, veți face:

$ ( "Clickme "). Pe (" clic", funcția () { console.log ($ (aceasta) .text ()); });

Ar trebui să puteți vedea că acțiunea în care am fost încorporate aici este o funcție anonimă care utilizează acest selector (care se referă la orice obiect cu care se ocupă jQuery) - în acest caz, lucrul pe care s-a dat clic. Extragem apoi textul acelui obiect pe care l-am făcut clic și îl înregistrăm în consolă. Ușor, nu?

Opriți acțiunea implicită:

La un moment dat, veți dori să vă atașați la ceva precum un link sau un buton de trimitere a formularului, care face de obicei altceva. În acest caz, este foarte probabil să nu doriți să se efectueze acea acțiune inițială - în schimb, doriți să faceți ceva AJAX fantezist sau magie specială jQuery.

Pentru a preveni ca această acțiune implicită să se întâmple, avem o metodă utilă numită preventDefault. Evident. Să vedem cum ar funcționa acest lucru atunci când aveți de-a face cu un buton de trimitere pentru un formular

$ ("# myForm"). on ("trimite", funcție (eveniment) { console.log (eveniment); event.preventDefault (); returnare falsă; });

Câteva modificări aici - în primul rând, ne atașăm la Trimite eveniment în loc de clic. Acest lucru este mai adecvat atunci când se ocupă cu un formular, așa cum ar putea fi utilizatorul tab-spațiu, lovit introduce, sau a lovit un Trimite buton - toate acestea vor declanșa acțiunea implicită a formularului. De asemenea, trecem variabila de eveniment în funcția anonimă, așa că ne putem referi la date despre eveniment. Apoi am folosit event.preventDefault () in combinatie cu returnează fals să oprească finalizarea tuturor acțiunilor obișnuite.

În acest caz, este doar înregistrarea evenimentului la consolă, dar, în realitate, probabil că veți avea aici un handler AJAX, pe care îl vom aborda în lecția următoare.

Evenimentele pot fi, de asemenea, declanșate de dvs.

În ultimele două exemple, am folosit metoda on pentru a asculta un eveniment, dar puteți, de asemenea, să declanșați manual un eveniment apelând la el ca metodă. Este dificil să vezi de ce s-ar putea să folosești acest lucru pentru a forța un „clic”, dar are mai mult sens dacă ne uităm la evenimentul focalizat.

Focalizarea este de obicei folosită cu câmpuri de intrare pentru a declanșa un mesaj atunci când utilizatorul face clic în caseta pentru a introduce text - un mesaj de instrucțiune pe formatul de utilizat, de exemplu. Puteți utiliza, de asemenea, pentru a forța utilizatorul în câmpul de utilizator atunci când pagina a fost încărcată - astfel încât să poată începe imediat să tastați detaliile de autentificare.

$ (document) .ready (funcție () { $ ( '# Username'.focus (); });

Dacă ați atașat și un ascultător de evenimente focus la acel câmp de utilizator, acesta va fi, de asemenea, declanșat atunci când focalizați forțat. Prin urmare, evenimentele pot fi declanșate și ascultate.

Deocamdată, practicați atașând la diverse evenimente pe pagină - puteți găsi o listă completă a tuturor evenimente disponibile aici - nu uitați să folosiți preventDefault dacă este un link sau un buton și vedeți ce ieșire obțineți de la consolă despre datele despre evenimente.

O voi lăsa acolo astăzi, aproape de sfârșitul acestei mini-serii de tutoriale jQuery. Ar trebui, până la sfârșitul acesteia, să fiți suficient de încrezători pentru a arunca niște jQuery pe pagina dvs. și a face să facă ceva. Săptămâna viitoare ne vom uita la AJAX - o parte importantă a web-ului modern care vă permite să încărcați și să trimiteți cereri în fundal fără să întrerupeți utilizatorul.

Ca întotdeauna, feedback-ul, întrebările, comentariile și problemele sunt binevenite mai jos.

Credit imagine: Ecran tactil prin Shutterstock