Vadnica za jQuery (4. del)

Oglas

Danes bomo to zarezali in res pokazali, kje sveti jQuery - dogodki. Če ste sledili preteklim vajam, bi morali zdaj dokaj dobro razumeti osnovna struktura koda jQuery Vadnica za jQuery - Uvod: Osnove in izbirnikiPrejšnji teden sem govoril o tem, kako pomemben je jQuery za vsakega sodobnega spletnega razvijalca in zakaj je super. Ta teden mislim, da je čas, da si umažemo roke z neko kodo in se naučimo, kako ... Preberi več (in vse grozne kodraste naramnice, ki spadajo zraven), pa tudi, kako najti elemente DOM in nekatere stvari, ki jih lahko naredite, da z njimi manipulirate Uvod v jQuery (2. del): Metode in funkcijeTo je del stalne predstavitve začetnikov v seriji spletnih programov jQuery. Prvi del je obravnaval osnove jQueryja, kako ga vključiti v svoj projekt, in izbirnike. V drugem delu bomo nadaljevali z ... Preberi več . Pokazal sem vam tudi, kako dostopati do konzolo za razvijalce v Chromu Ugotovite težave s spletnim mestom z orodji za razvijalce Chrome ali FirebugČe ste doslej spremljali moje vaje za jQuery, ste morda že naleteli na nekaj težav s kodo in ne veste, kako jih odpraviti. Ko se soočimo z nefunkcionalnim bitnim kodom, je zelo ...

Preberi več in kako ga lahko uporabite za odpravljanje napak kodo jQuery.

Dogodki - med drugimi načini - omogočajo, da se odzovete na stvari, ki se dogajajo na strani in interakcije uporabnikov - s klikom, drsenjem in na vse podobne stvari.

Kaj sploh je dogodek?

Za tiste, ki so novi v programiranju, ki vključuje nekakšen grafični vmesnik, se dogodki nanašajo na kakršno koli interakcijo med uporabnikom in aplikacijo; ali pa jih lahko ustvari interno kakšen drug postopek. Aplikacije izberejo, katere dogodke naj "poslušajo", in ko se ta dogodek sproži, lahko reagirajo na nek način.

Na primer, če tapnete na zaslon iPhone, ustvarite en sam "dogodek" s koordinato x, y natančno tam, kjer ste se dotaknili. Če se dotaknete določenega predmeta, na primer gumba, je verjetno, da je gumb poslušal za ta dogodek in bo ustrezno izvedel nekaj dejanja. Če bi bil to samo prazen del vmesnika, na dogodek ni bilo ničesar pritrjeno in tako se ne bo zgodilo nič.

Če povlečete s prstom po zaslonu, bi ustvaril še en dogodek, ki vključuje podatke o začetni in končni točki premika in morda hitrost. Dogodki nam omogočajo enostaven način reagirajo na stvari, ki se zgodijo.

Enostavno: s klikom

Morda je najlažji dogodek poslušati dogodek klikov, sprožen vsakič, ko uporabnik klikne element. To ne bi smelo biti poseben "gumb" - poslušalca dogodkov lahko na zaslon pripnete karkoli, toda kot spletni razvijalec morate to narediti intuitivno. Ustvarjanje psevdo gumba iz črke a skrit v odstavku besedila je sicer možen, a nekoliko neumen.

Načini za pripenjanje poslušalca dogodkov so se z leti, ko se je razvil jQuery, bistveno spremenili, vendar je to trenutno sprejeta metoda z uporabo dne ():

$(izbirnik).naprej(dogodek,ukrepanje);

Poslušati "kliknite"Dogodek na katerem koli elementu razreda .clickme, in nato prijavite sporočilo na konzolo, ki vsebuje besedilo elementa, na katerega ste kliknili, bi naredili:

$ (". clickme"). on ("klik", funkcija () { console.log ($ (to) .text ()); });

Morali bi videti, da je dejanje, ki smo ga tukaj vgradili, anonimna funkcija, ki uporablja to izbirnik (ki se nanaša na predmet, s katerim se trenutno ukvarja jQuery) - v tem primeru je bila stvar, na katero so kliknili. Nato izvlečemo besedilo tega kliknjenega predmeta in ga zabeležimo na konzolo. Lahko, kajne?

Ustavite privzeto dejanje:

V nekem trenutku boste želeli priložiti nekaj, kot je povezava ali gumb za oddajo obrazca, ki ponavadi počne nekaj drugega. V tem primeru je zelo verjetno, da ne želite, da se prvotno dejanje izvede - namesto tega želite narediti nekaj čudovitega AJAX-a ali posebne čarovnije jQuery.

Da preprečimo, da bi se privzeto dejanje zgodilo, imamo priročen način, imenovan prevenDefault. Očitno. Poglejmo, kako bi to delovalo, ko se ukvarjamo z gumbom za oddajo obrazca

$ ("# myForm"). on ("oddaj", funkcija (dogodek) { console.log (dogodek); event.preventDefault (); vrniti napačno; });

Tukaj je nekaj sprememb - najprej se pridružujemo oddati dogodek namesto klika. To je primerneje, če se ukvarjate z obrazcem, kot bi ga lahko uporabnik prostor zavihkov, zadeti vnestiali udarite na oddati gumb - vse to bi sprožilo privzeto dejanje obrazca. Spremenimo tudi spremenljivko dogodka v anonimno funkcijo, zato se lahko sklicujemo na podatki o dogodkih. Nato smo uporabili event.preventDefault () v kombinaciji z vrniti napačno da se ustavijo vsa običajna dejanja.

V tem primeru dogodek le beležimo na konzolo, v resnici pa bi verjetno tukaj imeli AJAX-ov obdelovalec, ki se ga bomo lotili v naslednji lekciji.

Dogodki vas lahko sprožijo tudi vi

V preteklih dveh primerih smo uporabili metodo on za poslušanje dogodka, vendar lahko dogodek tudi ročno sprožite, tako da ga pokličete kot metodo. Težko je razbrati, zakaj bi to lahko uporabili za prisiljen klik, vendar je bolj smiselno, če pogledamo dogodek fokusiranja.

Fokus se običajno uporablja z vnosnimi polji za izklop sporočila, ko uporabnik klikne v polje za vnos besedila - na primer poučno sporočilo o uporabljeni obliki. Lahko pa ga uporabite tudi za prisilitev uporabnika v uporabniško polje, ko se stran naloži - tako lahko takoj začnejo tipkati svoje podatke za prijavo.

$ (document) .ready (funkcija () { $ ('# uporabniško ime'.focus (); });

Če bi na to uporabniško polje priložili tudi poslušalca fokusiranja dogodkov, bi se sprožil tudi, ko boste prisilili fokusiranje. Dogodke je torej mogoče sprožiti in poslušati.

Za zdaj vadite tako, da na strani dodate različne dogodke - najdete popoln seznam vseh dogodki so na voljo tukaj - ne pozabite uporabiti prevenDefault, če je povezava ali gumb, in si oglejte, kakšen izhod iz konzole dobite o podatkih o dogodkih.

Danes jo bom pustil tam, ko se bomo bližali koncu te mini serije vadnic o jQueryju. Do konca bi morali biti dovolj samozavestni, da na svojo stran vržete nekaj jQueryja in ga prisilite, da nekaj naredi. Naslednji teden si bomo ogledali AJAX - pomemben del sodobnega spleta, ki omogoča nalaganje in pošiljanje zahtev v ozadju, ne da bi uporabnika motili.

Spodaj so dobrodošli povratne informacije, vprašanja, komentarji in težave.

Kreditna slika: Zaslon na dotik prek Shutterstocka