✅ Upravljanje događajima s jQueryjem

Sadržaj

Je li vam ovaj vodič pomogao?

The događajima su situacije koje se dešavaju unutar našeg dokumenta HTML, mogu se pokrenuti situacijama samog sustava ili radnjama korisnika. U oba slučaja, kada se dogodi događaj, moguće je izvršiti naknadnu obradu pomoću jQuery, tako da možemo postići bolje učinke u našim programima.
To je od iznimne važnosti, budući da poznavajući ovaj aspekt i uz pomoć okvira možemo našim web stranicama i aplikacijama dati više dinamike.
Ovo je prvo na što bismo trebali odgovoriti pri radu s događajima u jQuery, Već smo rekli da su događaji radnje ili situacije koje pokreće sustav ili korisnik, na primjer, kada dokument završi s učitavanjem, sustav pokreće događaj spreman ili spremno, kada korisnik klikne na element, aktivira se homonimni događaj.
Imajući na umu ove male primjere, tada možemo vidjeti osnovnu sintaksu za rukovanje bilo kojom vrstom događaja, a to je sljedeće:

$ (selector) .on ("eventName", function () {….})

Sjetimo se ili razjasnimo da je birač ime s kojim ćemo locirati element u našem dokumentu, a zatim uz pomoć metode .on () Tada mu možemo reći koji događaj treba slušati i kada ga otkrije može izvršiti anonimnu funkciju unutar našeg odjeljka skripti u HTML.
Nešto zanimljivo što možemo istaknuti je da možemo koristiti a voditelj za razne događajeDrugim riječima, istu radnju možemo izvesti za nekoliko situacija, samo moramo navesti različite događaje koje moramo slušati, sintaksa je vrlo slična onoj koju smo upravo vidjeli.
$ (selector) .on ("eventname1 eventname2 eventname3….", function () {….})
Budući da znamo najosnovnije, moramo to i početi spoznavati jQuery Uvijek će nam olakšati život kao razvojnim programerima, pa je osigurao neke prečace za stvaranje rukovatelja događajima, pri čemu ne moramo donositi potpunu deklaraciju kao što smo vidjeli u prethodnom dijelu, već ove prečace primjenjujemo izravno na birač.
Pogledajmo neke od najzanimljivijih prečaca koje koriste programeri. Valja napomenuti da to nije potpuni popis dostupnih. Za dobivanje ovog popisa bolje je otići izravno u službenu dokumentaciju, međutim, da biste malo započeli subjekta, to je više nego dovoljno.
spreman ()Pokreće se kada svi elementi dokumenta SUNCE učitavaju se, odnosno kada je stranica spremna, otuda i njezin naziv. Valja napomenuti da se radi o sustavnom događaju.
podnijeti ()To se događa kada napravimo a podnošenje obrascaZanimljivo je da kada se obrazac pojavi, ne šalje se na tradicionalan način, već čeka da ono što mu ovaj događaj kaže, pa ga možemo koristiti kao međutočku za provjere valjanosti polja kako bismo spomenuli primjer njegove uporabe.
kliknite ()Pokreće se kad to učini korisnik klik s pokazivačem miša na elementu, može biti iz polja za unos, za uključivanje elemenata kao što su ili sidra . Kako bismo mogli reći je li događaj pokrenuo korisnik.
zamućenje ()Događa se kada element na kojem se trenutno nalazimo nije fokusiran, na primjer pišemo u tekstualno polje i idemo na sljedeće polje, u ovom slučaju prvo polje je izgubilo fokus i ovaj se događaj izvršava.
usredotočenost ()Za razliku od prethodnog događaja, to se događa upravo kad se usredotočimo na element.
lebdjeti ()Događaj se događa kada pokazivač miša zadržimo iznad nekog elementa datoteke SUNCE, obično se može primijeniti na i sidra .
Izaberi ()Pojavljuje se kada odaberemo element unutar polja IzaberiNa primjer, imamo padajući popis i biramo stavku iz njezinog sadržaja.
promijeniti ()Pojavljuje se kada se promijeni vrijednost ili stanje elementa, na primjer unutar polja Izaberi, kada promijenimo opciju za koju vidimo da se tu odražava.
Budući da znamo malo o najčešće korištenim događajima, generirat ćemo mali dokument koji neke od njih provodi u praksi, bilo u njihovoj punoj sintaksi ili s primjerima, tako da možemo eksperimentirati s oba oblika.
U sljedećem kodu vidjet ćemo kako ćemo u početku pisati console.log () kad imamo dokument unutra spreman (), tada ćemo primijeniti drugu poruku kada mišem pređemo preko a kako biste potvrdili kako radi lebdjeti, konačno ćemo vidjeti kako se koristi kliknite () Y usredotočenost () za prikaz drugih poruka. Pogledajmo kod koji opisuje gore navedeno:

 Primjer događaja 1
Pokažite miša nad ovim Divom !!

Napišite nešto ovdje:
Fokusiraj se na mene:
$ (document) .ready (function () {console.log ("Događaj spremnosti se dogodio !!");}); $ ("# hover event"). hover (function () {console.log ("Događaj lebdenja se dogodio!");}); $ ("# Click event"). Click (function () {console.log ("aktivirali smo događaj Click POVEĆAJTE
To se događa kada želimo da element ima različite povezane događaje, na taj način možemo bolje organizirati svoj kôd i omogućiti više funkcija našem elementu.
Postoje dvije mogućnosti, izvršavanje iste radnje za nekoliko događaja ili izvršavanje različite radnje za svaki, na bilo koji način koji ćemo htjeti morat ćemo upotrijebiti cijelu sintaksu, prvu koju smo već definirali na početku.
Pogledajmo kako povezati različite radnje s različitim događajima za isti element. Za to moramo koristiti osnovnu sintaksu poput ove:

 $ (selector) .on ({EventName1: function () {…}, EventName2: function () {…}}); 

Kao što vidimo, kada koristimo ovaj oblik sintakse, izbjegavamo da moramo učiniti nešto poput sljedećeg:

 $ (selektor) .ShortcutEvent1 (function () {}); $ (selektor) .ShortcutEvent2 (function () {}); 

Ono što nam omogućuje da budemo organiziraniji, međutim oboje je valjano i na razvojnom programeru je da primijeni ono što mu najviše odgovara.
Budući da znamo povezati više događaja s elementom, mi ćemo to provesti u praksu, mi ćemo odabrati događaje kliknite () Y usredotočenost () Za ovaj primjer, tada ćemo ih primijeniti na dva elementa, u prvom ćemo generirati isti odgovor za svaki od njih, a u drugom će svaki događaj imati svoj vlastiti odgovor. Pogledajmo kôd koji moramo izvesti da bismo postigli svoj cilj:

 Primjer događaja 2
Isti rezultat više događaja:

Različiti rezultati po događaju:
$ ("# element1"). on ("fokus fokusa", funkcija () {console.log ("prikazujemo isto za 3 događaja!");}); $ ("# element2"). on ({click: function () {console.log ("kliknuli smo na element2");}, focus: function () {console.log ("usredotočili smo se na element2");}}); 

Ovdje vidimo da moramo biti oprezni s drugim oblikom različitih odgovora za različite događaje, budući da se događaji ne nalaze unutar navodnika kao kad to radimo u prvom obliku, također da moramo ugraditi u zagrade {} sve unutar metode .on (), ovo je pogreška koja se može pojaviti vrlo često pa je ovim mjerama opreza možemo izbjeći. Pogledajmo sada kako izgleda naš primjer kada ga pokrenemo u pregledniku:

POVEĆAJTE
Zabilježimo brojač s a broj 2 kada se dogode događaji na prvom elementu, to znači da smo dva puta izvršili istu radnju kao što smo planirali. U drugom elementu primjećujemo da ispisujemo dvije određene radnje u konzoli, iako također vidimo da se događaju različitim redoslijedom od onog u kojem smo ih postavili, to je zato što se događaj usredotočenost događa se prije klik u hijerarhiji događaja, osobito ako koristimo ključ Kartica za kretanje između polja.
Na kraju ovog vodiča naučili smo kako započeti u svijetu upravljanja događajima jQueryOvo je samo otvor za usta, međutim s ovim malim značajkama možemo postići mnogo toga u našim aplikacijama.

Je li vam ovaj vodič pomogao?
Ako ne

POMOZITE POBOLJŠAJTE OVAJ VODIČ!
Mislite li da možete ispraviti ili poboljšati ovaj vodič? Možete poslati svoje izdanje s promjenama koje smatrate korisnima.
0 korisnika je uredilo ovaj vodič. Uredite i postanite priznati stručnjak!
Uredite ovaj vodič

SLIČNI VODIČI

Kako povlačiti i hvatati slike pomoću JQuery korisničkog sučeljaKako napraviti Spinner ili ikonu učitavanja s JQueryjemDodaci i knjižnice JQuery za web razvojFlexigrid dinamička mreža s JQuery i PHPRukovanje JSON -om s Node.jsUpravljanje događajima u Node.jsRukovanje međuspremnicima u Node.js -uRegularni izrazi s Jqueryjem
Bez komentara, budite prvi!
Ne čekajte više i uđite u SolveticOstavite svoje komentare i iskoristite korisnički račun Pridružite nam se!

Stvorite računBESPLATNO se prijavite za svoj Solvetic računRegistrirajte račun
IdentificiratiImate li već račun? Prijavite se ovdjeIdentificirajte me na svom računu




Informacija

 Objavljeno 12. prosinca 2014 14:44
 Ažurirano 14. prosinca 2014 05:44
 Posjete 3,7K
 RazinaProfesionalno


Najnoviji udžbenici za JavaScript

Kako ažurirati NPM s PowerShell -om u sustavu Windows 10
Kako povlačiti i hvatati slike pomoću JQuery korisničkog sučelja
Kako napraviti Spinner ili ikonu učitavanja s JQueryjem
Kako web stranicu prevesti na nekoliko jezika

Više o JavaScriptu