jQuery Tutorial (4. dio) - Slušatelji događanja

Danas ćemo to otvoriti i stvarno pokazati gdje jQuery sjaji - događaji. Ako ste pratili prošle tutorijale, sada biste trebali poprilično dobro razumjeti osnovnu strukturu koda jQuery tutorial jQuery - Prvi koraci: Osnove i selektori jQuery Tutorial - Prvi koraci: Osnove i selektori Prošli tjedan, govorio sam o tome koliko je jQuery važan bilo kojem modernom web programeru i zašto je to sjajno. Ovaj tjedan mislim da je došlo vrijeme da se umažemo rukama s nekim kodom i naučimo kako ... (i sve one užasne kovrčave narukvice koje idu uz to), kao i kako pronaći elemente DOM-a i neke stvari koje možete učiniti da manipulirate Uvod u jQuery (2. dio): Metode i funkcije Uvod u jQuery (2. dio): Metode i funkcije Ovo je dio stalnog uvođenja početnika u seriju web programa za jQuery. Prvi dio je pokrenuo osnove jQueryja o tome kako ga uključiti u svoj projekt i odabire. U drugom dijelu, nastavit ćemo s…. Također sam vam pokazao kako pristupiti konzoli za razvojne programere u Chromeu. Otkrivanje problema s web-lokacijama s alatima za razvojne programere Chrome ili Firebug otkrivanje problema s web-lokacijama s alatima za razvojne programere Chrome ili Firebug Ako ste dosad pratili moje tutorijale jQuery, možda ste već naišli na neke probleme s kodom i nije poznato kako ih riješiti. Kad se suočite s nefunkcionalnim bitnim kodom, vrlo je… i kako ga možete koristiti za uklanjanje pogrešaka svog jQuery koda.

Događaji - između ostalog - omogućuju vam da reagirate na stvari koje se događaju na stranici i interakcije korisnika - klikanje, pomicanje i sve te maštovite stvari.

Što je uopće događaj?

Za one nove u programiranju koji uključuju neku vrstu grafičkog sučelja, događaji se odnose na bilo kakvu interakciju između korisnika i aplikacije; ili se mogu generirati interno nekim drugim postupkom. Aplikacije biraju koje događaje želite “slušaj”, i kad se taj događaj pokrene, mogu reagirati na neki način.

Na primjer, dodirivanjem zaslona iPhone uređaja generirat će se singl “taknite događaj” s x, y koordinatom točno mjesta na kojem ste dodirnuli. Ako ste dodirnuli određeni objekt, poput gumba, vjerovatno je da je gumb slušao taj događaj i da će prema tome izvršiti neku radnju. Ako je to samo prazan dio sučelja, ništa se nije priključilo događaju i tako se ništa neće dogoditi.

Povlačenje prsta po zaslonu stvorilo bi još jedan događaj, koji uključuje podatke o početnoj i krajnjoj točki pokreta povlačenja, a možda i brzini. Događaji nam pružaju jednostavan način reagiraju na stvari koje se događaju.

Jednostavno: Klik

Možda je najlakši događaj za slušanje događaj klika koji se pokreće kad korisnik klikne na element. Ovo ne treba biti specifično “dugme” - možete priključiti slušatelja događaja na bilo što na ekranu, ali kao web programer to očito trebate učiniti intuitivnim. Stvaranje pseudo gumba iz pisma skriven u odlomku teksta moguće je, ali pomalo glupo.

Načini povezivanja slušatelja događaja značajno su se mijenjali tijekom godina kako se jQuery razvijao, ali ovo je trenutno prihvaćena metoda korištenjem na ():

$ (Selektor) .Na (događaj, akcija);

Slušati za “klik” događaj na bilo kojim elementima s predavanjem .clickme, a zatim prijavite poruku na konzolu koja sadrži tekst elementa na koji ste kliknuli, učinili biste:

$ (". clickme"). on ("klik", funkcija () console.log ($ (ovo) .text ()););

Trebali biste moći vidjeti da je radnja koju smo ovdje ugradili anonimna funkcija koja koristi ovaj selektor (koji se odnosi na koji se predmet jQuery trenutno bavi) - u ovom slučaju stvar na koju su kliknuli. Zatim izvučemo tekst tog kliknutog objekta i zabilježimo ga na konzoli. Lako, zar ne?

Zaustavljanje zadane radnje:

U nekom ćete trenutku htjeti priložiti nešto poput veze ili gumba za slanje obrasca, što obično čini nešto drugo. U tom slučaju, vrlo je vjerovatno da ne želite da se izvede ta originalna radnja - umjesto toga, želite napraviti neki fantastični AJAX ili posebnu jQuery magiju.

Da spriječimo da se zadana radnja ne dogodi, imamo zgodnu metodu koja se zove prevenDefault. Očito. Pogledajmo kako bi to funkcioniralo kada se bavimo gumbom za predaju obrasca

$ ("# myForm"). on ("predaj", funkcija (događaj) console.log (događaj); event.preventDefault (); return false;);

Nekoliko promjena ovdje - prvo, pridajemo tome podnijeti događaj umjesto klika. To je prikladnije kada se bavite obrascem kakav korisnik može kartica-prostor, pogoditi Unesi, ili pogoditi podnijeti gumb - a sve bi to pokrenulo zadanu radnju forme. Također prosljeđujemo varijablu događaja u anonimnu funkciju, tako da možemo uputiti na podaci o događajima. Tada smo to iskoristili event.preventDefault () u kombinaciji sa vratiti lažno da zaustavim dovršenje svih uobičajenih radnji.

U ovom slučaju događaj je samo prijava na konzolu, ali u stvarnosti biste ovdje vjerojatno imali AJAX handler, kojeg ćemo riješiti u sljedećoj lekciji.

Događaji vas mogu pokrenuti i vi

U prethodna dva primjera koristili smo metodu on za slušanje događaja, ali možete ručno pokrenuti događaj tako što ćete ga nazvati kao metodu. Teško je vidjeti zašto biste to mogli koristiti za prisiljavanje a “klik”, ali ima više smisla ako pogledamo događaj u fokusu.

Fokus se obično koristi s poljem za unos za ispuštanje poruke kada korisnik klikne na okvir za upis teksta - upute s uputama u formatu koji se upotrebljava. Ali možete ga koristiti i za prisiljavanje korisnika u polje korisničkog imena kada se stranica učita - tako da mogu odmah početi upisivati ​​detalje o prijavi..

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

Ako ste na to korisničko polje dodali i slušatelja događaja fokusa, ono bi se pokrenulo i kada ste forsirali fokus. Događaji se, dakle, mogu pokrenuti i preslušati.

Za sada vježbajte dodavanjem raznih događaja na stranici - možete pronaći puni popis svih dostupnih događaja ovdje - ne zaboravite koristiti prevenDefault ako je veza ili gumb i pogledajte kakav izlaz dobivate s konzole o podacima događaja.

Ostavit ću ga danas danas kad se bliži kraj ove mini serije tutorijala o jQueryju. Na kraju biste trebali biti dovoljno sigurni da bacite jQuery na svoju stranicu i natjerate ga da nešto učini. Sljedeći tjedan ćemo pogledati AJAX - važan dio modernog weba koji omogućuje učitavanje i slanje zahtjeva u pozadini bez ometanja korisnika.

Kao i uvijek, dolje su dobrodošli komentari, pitanja, komentari i problemi.

Kreditna slika: Zaslon osjetljiv na dodir putem Shutterstoka