jQuery Tutorial (Partea 4) - Ascultarea evenimentelor

Astăzi o vom lovi cu piciorul și vom arăta cu adevărat unde jQuery strălucește - evenimente. Dacă ați urmat tutorialele trecute, ar trebui să aveți acum o înțelegere destul de bună a structurii codului de bază al jQuery jQuery Tutorial - Noțiuni de bază: Elementele de bază și selectorii jQuery Tutorial - Noțiuni de bază: Elementele de bază și selectorii Săptămâna trecută am vorbit despre cât de important este jQuery la orice dezvoltator web modern și de ce este minunat. În această săptămână, cred că este timpul să ne murdărim mâinile cu un anumit cod și să învățăm cum ... Citește mai mult (și toate ortogonalele oribile care merg cu el), precum și cum găsești elemente ale DOM și câteva lucruri pe care le poți face pentru a le manipula Introducere La jQuery (Partea 2): Metode și funcții Introducere În jQuery (Partea 2): Metode și funcții Aceasta este o parte a unei introduceri incipiente a serverelor de programare web jQuery. Partea 1 a acoperit elementele de bază ale jQuery cu privire la modul de includere a acestora în proiect și selectori. În partea a doua, vom continua cu ... Citește mai mult. De asemenea, v-am arătat cum să accesați consola pentru dezvoltatori în Chrome Imagine Aflați probleme la site-urile Web cu ajutorul instrumentelor pentru dezvoltatori Chrome sau Firebug Imaginează-ți problemele site-ului cu ajutorul instrumentelor pentru dezvoltatori Chrome sau Firebug Dacă ați urmat tutorialele mele jQuery până acum, unele probleme de cod și nu se știe cum să le rezolvați. În cazul în care se confruntă cu un bit non-funcțional de cod, este foarte ... Citește mai mult și cum ați putea să-l utilizați pentru a depana codul dvs. jQuery.

Evenimentele - printre alte utilizări - vă permit să reacționați la lucrurile care se întâmplă pe pagina și interacțiunile utilizatorilor - faceți clic, derulați și toate lucrurile de care aveți nevoie.

Ce este oricum un eveniment?

Pentru cei noi de programare care implică o interfață grafică de un fel, evenimentele se referă la orice fel de interacțiune între utilizator și aplicație; sau pot fi generate intern printr-un alt proces. Aplicațiile aleg la care evenimente să “asculta”, iar atunci când evenimentul este declanșat, ei pot reacționa într-un fel.

De exemplu, atingerea pe ecranul iPhone va genera un singur “atingeți evenimentul” cu o coordonate x, y de exact unde ați apăsat. Dacă ați apăsat pe un anumit obiect, ca un buton, probabil că butonul asculta pentru acel eveniment și va efectua o acțiune în consecință. Dacă era doar o parte necorespunzătoare a interfeței, nimic nu a fost atașat evenimentului și astfel nimic nu se va întâmpla.

Glisarea degetului pe ecran va genera un alt eveniment, unul care include informații despre punctul de început și sfârșit al mișcării de tragere și, probabil, viteza. Evenimentele ne oferă o cale ușoară reacționează la lucrurile care se întâmplă.

Ușor: Apăsând

Poate că cel mai simplu eveniment pe care îl puteți asculta este evenimentul de clic, declanșat ori de câte ori un utilizator face clic pe un element. Aceasta nu trebuie să fie specifică “buton” - puteți atașa un ascultător de evenimente pentru orice pe ecran, dar ca dezvoltator de web, evident, trebuie să faceți acest lucru intuitiv. Crearea unui pseudo-buton din literă A ascuns într-un paragraf de text este posibil, dar oarecum stupid.

Metodele de atașare a unui ascultător de evenimente s-au modificat semnificativ în decursul anilor, deoarece jQuery sa dezvoltat, dar aceasta este metoda curent acceptată, folosind pe ():

$ (Selector) .ON (eveniment, acțiune);

Pentru a asculta a “clic” eveniment pe orice element cu clasa .clickme, apoi conectați un mesaj la consola care conține text a elementului pe care ați făcut clic, ați face:

("click") pe ("faceți clic", funcția () console.log ($ (this) .text ()););

Ar trebui să puteți vedea că acțiunea pe care am încorporat-o aici este o funcție anonimă care utilizează funcția acest selector (care se referă la orice obiect în care se confruntă în prezent jQuery) - în acest caz, chestiunea la care a fost făcut clic. Apoi extragem textul acelui obiect clickat și îl logăm în consola. Ușor, corect?

Opriți acțiunea prestabilită:

La un moment dat, veți dori să vă atașați la un buton de trimitere sau de formular care, de obicei, face altceva. În acest caz, este destul de probabil să nu doriți ca acțiunea originală să fie efectuată - în schimb, doriți să faceți o fantezie AJAX sau magie specială jQuery.

Pentru a preveni întâmplarea acțiunii implicite, avem o metodă utilă numită prevenDefault. Evident. Să vedem cum ar funcționa atunci când se ocupă de un buton de trimitere pentru un formular

$ ("# myForm") la ("trimite", functie (eveniment) console.log (eveniment);

Câteva schimbări aici - în primul rând, ne atașăm a depune eveniment în loc de clic. Acest lucru este mai adecvat atunci când se ocupă de un formular pe măsură ce utilizatorul ar putea tab-spațiu, lovit introduce, sau a lovit a a depune buton - toate acestea ar declanșa acțiunea implicită a formularului. De asemenea, transmitem variabila evenimentului în funcția anonimă, astfel încât să putem face referire la datele evenimentului. Apoi am folosit event.preventDefault () in combinatie cu return false pentru a opri toate acțiunile obișnuite de la finalizare.

În acest caz, este doar logarea evenimentului la consola, dar în realitate probabil că veți avea un handler AJAX aici, pe care îl vom aborda în următoarea lecție.

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 declanșa manual un eveniment, numindu-l în schimb ca metodă. Este greu de văzut de ce ați putea folosi acest lucru pentru a forța a “clic”, dar are mai mult sens dacă ne uităm la evenimentul de focalizare.

În mod obișnuit, focalizarea se utilizează cu câmpurile de introducere pentru a declanșa un mesaj atunci când utilizatorul face clic în casetă pentru a introduce text - un mesaj instructiv cu privire la formatul de utilizat, de exemplu. Dar, de asemenea, le puteți folosi pentru a forța utilizatorul să intre în câmpul de nume de utilizator când pagina a fost încărcată - astfel încât să poată începe imediat tastarea detaliilor de conectare.

$ (document) .ready (funcție () $ ('# username'.focus (););

Dacă ați atașat, de asemenea, un ascultător de evenimente focalizate pe acel câmp de nume de utilizator, acesta ar fi declanșat și atunci când ați forțat focalizarea. Prin urmare, evenimentele pot fi declanșate și ascultate.

Pentru moment, practică prin atașarea la diverse evenimente de pe pagină - puteți găsi o listă completă a tuturor evenimentelor disponibile aici - nu uitați să utilizați preventDefault dacă este vorba despre un link sau un buton și pentru a vedea ce ieșire obțineți de la consola cu privire la datele evenimentului.

O să-i las acolo astăzi pe măsură ce ne apropiem de sfârșitul acestei mini-serii de tutoriale jQuery. Ar trebui, până la capăt, să fii suficient de încrezător să arunci niște jQuery pe pagina ta și să faci ceva. Săptămâna viitoare vom examina AJAX - o parte importantă a web-ului modern care vă permite să încărcați și să trimiteți cereri în fundal fără a întrerupe utilizatorul.

Ca întotdeauna, răspunsurile, întrebările, comentariile și problemele pot fi întâmpinate mai jos.

Credit de imagine: Ecran tactil prin Shutterstock

Explorați mai multe despre: JavaScript, jQuery, Programare, Dezvoltare Web.