Tokom proteklih nekoliko godina, vidjeli smo brz razvoj razvojni jezici eksterni interfejsi, a posebno HTML sa novim specifikacijama u HTML5, kao i CSS verzije 3 sa mnogo novih funkcija.
Sada imamo priliku da radimo mnogo zanimljivih stvari bez kojih se ranije nije moglo javascript pomoć i slike, uključujući zaobljeni uglovi, gradacija, adaptivne šablone, mreže, prozirnost boja i mnogo, mnogo više.
Mnogima je nedostajala mogućnost upravljanja Click Events u CSS-u. U stvari, mnogi ljudi misle da nam ova opcija nije potrebna jer je interakcija više javascript funkcionalnost. U principu, ovdje je sve jasno, vjerojatno nije baš zgodno koristiti javascript za najjednostavnije klikove.
U svakom slučaju, danas nam CSS ništa ne pruža zvaničnim metodama kontrolirati klikove u CSS-u. Ali postoje neki vrlo zanimljivi trikovi koje možemo koristiti da „detektiramo“ klikove (klikove) samo sa CSS kodom, bez upotrebe javascripta, i o tome ćemo danas pričati.
Odricanje od odgovornosti
Ovaj članak ima za cilj da vam kaže o mogućnosti kontrole klikova pomoću CSS-a. Ovo nije sasvim prikladno za upotrebu u ozbiljnim projektima. Imajte na umu da cijeli ovaj članak nije ništa više od eksperimenta i ni na koji način nije vodič za upravljanje događajima klikova na vašoj web stranici ili aplikaciji.
Osim toga, neke od predstavljenih tehnika nisu dobro podržane u pretraživačima, što znači da u ovom članku želimo samo da pokažemo kako možete proširiti opseg CSS-a.
Hack sa potvrdnim okvirom
Divna stvar! Sigurni smo da ste svi već čuli za checkbox hack. Ovo je vjerovatno najčešći način rukovanja događajima klikova u CSS-u. Zasnovan je na... polju za potvrdu.
Prednost checkbox-a je u tome što je binarni. Ili je istaknuto ili nije. I ne postoji način da se istakne nešto "pola" ili nešto slično. Zato je checkbox hack prilično dobar pouzdan način aktiviranje klikova u CSS-u. Uzmimo primjer.
Kako radi
HTML kod
CSS kod
Treba se promijeniti
boja: crna;
}
boja: crvena;
}
Kao što vidite, zasniva se na :checked pseudo-klasi i glavnom selektoru ~. Imajte na umu da će također raditi sa susjednim selektorom +. Općenito, to ide ovako: „ako je potvrdni okvir označen, onda sljedeće stavke sa class.to-be-changed će biti crveno".
Dakle, potvrdni okvir nije baš atraktivan, ali ga lako možete ukrasiti tako što ćete sakriti sam potvrdni okvir i pričvrstiti mu etiketu. Nešto poput sljedećeg:
"Biću crven! To će biti legenda... Čekaj...
Zato sakrivamo potvrdni okvir i koristimo oznaku za pokretanje događaja klika.
Unos (
pozicija: apsolutna;
vrh: -9999px;
lijevo: -9999px;
}
etiketa (
display:block;
pozadina: #08C;
padding: 5px
granica: 1px solid rgba(0,0,0,.1);
radijus granice: 2px
boja:bijela;
font-weight: bold;
}
input:checked ~ .to-be-changed (
boja: crvena;
}
Dakle, trebalo bi da dobijete nešto poput dugmeta koje pokreće proces promene boje elementa pasusa. Zar nije kul? Ponovnim klikom na dugme boja će se vratiti u crnu.
(imajte na umu da postoji različite mogućnosti skrivanje polja za potvrdu, a najpopularniji je display:none.)
Prednosti i nedostaci
Prednosti:
* Binarno (odabrano ili neodabrano)
* Ponovljeni klik vam omogućava povratak početni položaj
* Omogućava vam da primijenite gomilu događaja klikova (ako je odabrano prvo polje za potvrdu, a drugo polje za potvrdu, tada možete učiniti sljedeće).
Nedostaci:
* Elementi moraju dijeliti isti roditeljski element (braća i sestre)
* Zahtijeva dodatni HTML kod (element za unos, oznaka, itd.)
* Potrebna su dva dodatna trika da bi metoda funkcionirala mobilni pretraživači(za ovo ćete morati pročitati članak u nastavku)
Metoda: cilj
Postoji još jedan metod poznat kao "simulacija" događaja klika u CSS-u koristeći :target pseudo-klasu. Ova pseudo-klasa je vrlo slična :hover.
Specijalni događaj pseudoklase :target zavisi od onoga što nazivamo "ID fragmenta". Jednostavno rečeno, ova pseudo-klasa se odnosi na hashtag, koji ponekad vidite na kraju URL-a. Podudaranje se događa kada su hashtag i ID stavke isti.
Kako radi
HTML kod
klikni me!
"Biću crven! To će biti legenda... Čekaj...
CSS kod
Treba se promijeniti
boja: crna;
}
To-be-promijenjen:target (
boja: crvena;
}
Kada kliknete na link (href="#id"), URL se mijenja i idete na #id sidro na stranici. U ovom trenutku, element označen datim id-om može se specificirati korištenjem :target pseudo-klase.
Prednosti i nedostaci
Prednosti:
* Veoma jednostavan css
* Odlično za isticanje dijelova
Nedostaci:
* Zbrka u istoriji pretraživača
* Postoji skok na stranicu (prilikom prebacivanja na sidro)
* Oznaka sidra ili hakiranje URL-a je potrebno da se pokrene hashtag
* Radi samo na jednom elementu (jer su ID-ovi uvijek jedinstveni)
* Ne postoji način da se vratite na prvobitnu poziciju bez upotrebe drugog hashtag-a, linka ili URL haka.
Podrška pretraživača nije sjajna, ali nije tako loša. Sve moderni pretraživači podržavaju ovaj pristup, osim (IE 6-8). Počevši od IE9, podrška je stabilna.
Metoda: fokus
Pogledajmo drugi način korištenja pseudo-klase, ovaj put će to biti :focus. Ovdje je suština otprilike ista, osim što nema potrebe mijenjati URL. Metoda ima za cilj da fokusira pažnju korisnika na određeni element.
Kada ste na web stranici, možete kliknuti na kartice za navigaciju razni elementi. Ovo je vrlo zgodno prilikom popunjavanja obrazaca - možete se kretati s jednog polja na drugo bez korištenja miša. Takođe pomaže osobama sa oštećenim vidom da se kreću po stranici.
Važno je napomenuti da se možete fokusirati samo na neke elemente, uključujući veze, polja za unos, a ne na druge (pasuse, podjele i mnoge druge). Zapravo, možete se fokusirati i na njih, ali ćete morati dodati atribut tabindex s numeričkom vrijednošću.
Kako radi
HTML kod
klikni me!
"Biću crven! To će biti legenda... Čekaj...
CSS kod
Raspon:fokus ~ .to-be-promijenjen (
boja: crvena;
}
Dakle, kada kliknete na element span ili se krećete pomoću tipke tab, pretraživač se fokusira na element koji odgovara :focus pseudo-klasi. Susedni selektor brata ili sestre će uraditi ostalo. Prilično jednostavno, zar ne? Ako ne želite da se bavite tabindexom, možete jednostavno koristiti vezu sa # href. Sve će raditi.
Prednosti i nedostaci
Prednosti:
* Vrlo jednostavan CSS i HTML kod
* Odlično za navigaciju ili nešto slično
Nedostaci:
* Zahtijeva ili element koji dozvoljava fokus ili atribut tabindex
* Pseudoelement se podudara samo kada je element fokusiran (što znači da se sve pokvari ako kliknete bilo gdje drugdje).
Hack sa tranzicijom
Ovo je vjerovatno jedan od najnevjerovatnijih načina upravljanja klikovima u CSS-u. Ozbiljno, ovo je suludo. Ovu tehniku je izmislio Joel Besada i oduvijek je bio jedan od naših omiljenih CSS trikova.
Suština je postaviti CSS stil u CSS tranziciju. Da, dobro ste pročitali, u CSS tranziciji. Zapravo, ideja je prilično jednostavna. Zasnovan je na primjeni pseudo-beskonačnog odlaganja promjene, što onemogućava povratak na prvobitnu vrijednost. Sve zvuči zbunjujuće, ali je zapravo prilično jednostavno. Molimo pogledajte kod.
Kako radi
HTML kod
klikni me!
"Biću crven! To će biti legenda... Čekaj...
CSS kod
Treba se promijeniti
prijelaz: sve 0s 9999999s;
}
span:active ~ .to-be-changed (
prijelaz: sve 0s;
boja: crvena;
}
Suština prve objave je da se sve promjene odgode za otprilike 116 dana, što nam omogućava da budemo sigurni da će promjene ostati čim se primjene. Oni nisu beskonačni, ali tako izgleda, zar ne?
Ali ne želimo da se promjene primjenjuju 116 dana nakon klika, želimo da se sve dogodi odmah! Dakle, ovdje moramo prepisati kašnjenje u trenutku klika (pseudo-klasa: aktivna) da bismo primijenili promjene. Zatim, kada se klikne, stari prelazni parametarće biti vraćen, vraćajući parametar kašnjenja na 9999999s, što će spriječiti povratak na prvobitnu poziciju.
Prednosti i nedostaci
Prednosti:
* Neverovatno pametna ideja
* Sačuva željenu vrijednost kada je dugme otpušteno, čak i ako prijelaz još nije završen (pogledajte dolje)
Kako je Joel Besada rekao:
“Zanimljiva stvar ovdje je da možete završiti tranziciju na pola puta, a parametar će zadržati istu vrijednost koju je imao u određenom trenutku tranzicije. Na primjer, recimo da imamo linearni prijelaz neprozirnosti od 1 do 0 za 2 sekunde, ali ga nastavljamo samo 1 sekundu. Odnosno, parametar neprozirnosti treba da se zaustavi na 0,5, pošto kašnjenje ne dozvoljava da se parametar vrati nazad. Ako sada ponovo pokrenemo tranziciju na neprozirnosti, nastavit će se od 0,5 umjesto da se igra od početka."
Nedostaci:
* Ne baš dobra podrška za pretraživač (nije podržana u IE9 i Opera Mini)
* Radi samo sa vrijednostima koje dozvoljavaju prijelaz
* Ne postoji način da se vratite na prvobitnu vrijednost
* U stvari, tranzicija nije beskonačna ako čekate da prođe 116 dana.
U zakljucku
Dakle, danas nekako već možemo definirati klikove koristeći CSS. Odnosno, imamo priliku iako je to više kao hak. Neke metode su bolje prilagođene određenim situacijama od drugih, ali općenito, teško da se isplati koristiti ovo u stvarnom projektu.
Tab Atkins Jr. prije nekoliko mjeseci. Napisan je cijeli prijedlog o pozicijama CSS prekidača. Njegov rad možete pogledati:
preklopna stanja: nema |
preklopna grupa: nema |
togle-share: nema |
preklopni početni:
…gdje:
* prebacivanje stanja predstavlja osnovna funkcija, što vam omogućava da omogućite/onemogućite funkciju prebacivanja. Nijedan znači invalidnu poziciju, za koju su odgovorna 2 ili više njih razne odredbe.
* prebaci grupu implementira funkcionalnost radio dugmeta. Ako kliknete na preklopni element grupe sa postaviti parametar osim nijedan, svi elementi koji dijele istu preklopnu grupu će automatski biti postavljeni na prvu poziciju (isključeno).
* prebaci-dijeli implementira funkcionalnost prečice. Kada kliknete na element s preklopnim dijeljenjem, on se ponaša kao da ste kliknuli na sve elemente na koje ukazuje.
* prekidač-inicijal postavlja početni položaj prekidača.
Međutim, priznao je da njegova ideja nije savršena, te da može dovesti do problema i paradoksa. Ne želimo ulaziti u detalje u današnjem članku, jer to nije uključeno u njegov sadržaj, ali preporučujemo da se upoznate s ovom temom.
Dakle, ponovo smo se vratili na javascript. Ovo je vjerovatno Najbolji način ako želite pouzdanost i koheziju. Međutim, ako želite da se zabavite razvijajući nešto sa "čistim CSS kodom", onda će vam naš članak svakako biti od koristi.
Također bih želio napomenuti da je Chris Coyier iz CSS-Tricks prije dvije godine o upravljanju dupli klikovi koristeći CSS. Možda informacije više nisu relevantne, ali će i dalje biti vrlo zanimljivo upoznati se.
U svakom slučaju, hvala što ste pročitali članak! Ne zaboravite i slobodno podijelite rezultate vlastitih eksperimenata.
Pažnja! Nemate dozvolu za pregled skrivenog teksta.
U roku od nekoliko posljednjih godina došlo je do zapanjujuće ekspanzije jezika front-end web aplikacija, posebno HTML5 i CSS3.
Sada možete izvoditi mnoge operacije koje su prije bile nezamislive bez upotrebe JavaScripta i slika, na primjer, zaobljeni uglovi, prilagodljivi predlošci, modularne mreže, prozirne boje i mnogo više.
Ali uvijek je nedostajala sposobnost da se nosi s tim događajem kliknite koristeći CSS. Neki stručnjaci smatraju da ova opcija ne bi trebala biti, budući da je interaktivna interakcija korisnika polje djelovanja JavaScripta. Njihovo obrazloženje je razumno, ali koristeći JavaScriptčak i za jednostavne klikove je zamorno.
Trenutno nema zvaničnih CSS alati za upravljanje događajem kliknite. Međutim, postoje načini koje možete koristiti da "detektirate" klik samo sa CSS-om bez JavaScripta.
Bilješka
Opisane metode nisu namijenjene za " pravi zivot". Materijale za lekciju treba smatrati osnovom za eksperimentisanje. Pogotovo jer su neke metode slabo podržane u pretraživačima. Svrha lekcije je da dotakne granice CSS mogućnosti.
Koristeći potvrdni okvir
Vjerovatno ste se već susreli s ovom metodom. Ovo je najpopularniji metod za rukovanje događajem. kliknite koristeći CSS.
Metoda se zasniva na korišćenju polja za potvrdu. Ovaj element ima binarnu suštinu i može biti samo u jednom od dva stanja. Dakle ovu metodu je potpuno pouzdan način upravljanja događajima kliknite u CSS-u.
Treba se promijeniti (boja: crna; ) input:čekirano ~ .promjeniti (boja: crvena; )
Metoda se zasniva na upotrebi pseudo-klase :provjereno i selektor ~ . Imajte na umu da će raditi i sa + selektorom. Suština metode je da „ako je polje za potvrdu označeno, onda će sljedeći elementi sa klasom .to-be-changed biti crveni“.
Polje za potvrdu ne izgleda baš privlačno. Ali možeš izgled zanimljivije skrivanjem potvrdnog okvira i pričvršćivanjem oznake na njega. Nešto slično tome:
Zato sakrivamo potvrdni okvir i koristimo oznaku da odgovorimo na događaj kliknite:
Ulaz (pozicija: apsolutna; vrh: -9999px; lijevo: -9999px; ) oznaka (prikaz: blok; pozadina: #08C; padding: 5px; granica: 1px solid rgba(0,0,0,.1); border- radijus: 2px; boja: bijela; font-weight: bold; ) input:checked ~ .to-be-promjeniti (boja: crvena; )
Imamo dugme, klikom na koje se menja boja teksta u odlomku. Ponovnim pritiskom na dugme vraća se boja.
(Imajte na umu da postoje razne metode da sakrijete potvrdni okvir. Očigledno je korištenje display:none .)
pros
- Binarno, postoje samo dva stanja - označeno ili nepotvrđeno
- Ponovnim pritiskom vraća se stanje ( ovu stavku može biti negativan)
- Omogućava obradu povezani događaji kliknite(ako je prvi potvrdni okvir označen, a drugi kvadratić označen, tada izvodimo sljedeću radnju)
Minusi
- Elementi moraju imati zajedničkog pretka
- Zahtijeva dodatnu HTML markup(unos, oznaka i tako dalje)
- Obavezno dodatne radnje za rad na mobilnim pretraživačima
Metoda sa :target
Postoji još jedan način korištenja pseudo klase :target. Ova pseudo-klasa je slična pseudo-klasi :hover koji ispunjava samo određene uslove.
Specijalni događaj za pseudo-klasu :target zavisi od „ID-a fragmenta“. Jednostavno rečeno, ova pseudo-klasa se odnosi na hashtag koji se nalazi na kraju URL-a i postaje aktivan kada se hashtag i ID podudaraju.
To-be-promijenjen (boja: crna; ) .to-be-changed:target (boja: crvena; )
pros
- Jednostavan CSS kod
- Odlično za isticanje dijelova
Minusi
- Smeće u istoriji pretraživača
- Dolazi do pomicanja stranice
- Zahtijeva oznaku veze ili URL operaciju da uključi hashtag
- Može uticati samo na jedan element (jer je ID jedinstven)
- Ne postoji način da se vratite u prvobitno stanje bez upotrebe drugog hashtag-a, veze ili URL operacija
Metoda sa :focus
Nastavimo naš pregled na neki način koristeći još jednu pseudo-klasu - :focus. Ideja je skoro ista kao u prethodnom slučaju, osim što se ne očekuje promjena URL-a. Ovdje se oslanjamo na fokus unosa na određeni element.
Kada ste na stranici, možete koristiti tipku tab za prelazak s jednog elementa na drugi. Ova metoda je vrlo korisna kada radite s obrascima za navigaciju između elemenata bez korištenja miša. Metoda se također koristi za navigaciju osobe sa oštećenim vidom po stranici.
Važno je da neki elementi mogu dobiti fokus na unosu, kao što su veze, paragrafi, polja za unos i mnogi drugi. Trebate samo postaviti atribut tabindex na njih pomoću numerička vrijednost za njih.
Raspon:fokus ~ .koja treba promijeniti (boja: crvena; )
Kada se klikne na element span ili se na njega stavi tabulator, on prima ulazni fokus i prilagođava se pseudoklasi :focus. Selektor susjeda radi ostatak posla. Ako iz nekog razloga ne morate koristiti atribut tabindex, možete jednostavno postaviti vezu s adresom #.
pros
- Vrlo jednostavan CSS i HTML kod
- Odlična navigacija
Minusi
- Zahtijeva ili element s fokusom ili atribut tabindex
- Podudaranje se dešava samo kada postoji fokus na unosu (klikom negde drugde na stranici meša se algoritam rada)
Metoda tranzicije
Ova metoda je vjerovatno najprljaviji način rješavanja događaja. kliknite u CSS-u.
Ideja je skladištenje css stil u CSS tranziciji. Koristimo pseudo-beskonačno kašnjenje da spriječimo povratak početno stanje. Zvuči komplikovano, ali je zapravo vrlo lako implementirati.
Promjeniti (prijelaz: sve 0s 9999999s; ) span:aktivan ~ .promjeniti (prijelaz: sve 0s; boja: crvena; )
Kašnjenje je otprilike 116 dana. Ne beskonačnost, već nekakav njen privid za naše uslove. Stoga se promjene spremaju i nema povratka u prvobitno stanje.
pros
- Jednostavno i elegantno
- Stanje se čuva čak i ako prijelaz nije završen
Minusi
- Loša podrška pretraživača (ne u IE9 i Opera Mini)
- Radi samo sa vrijednostima koje se mogu koristiti s prijelazima
- Ne postoji način da se vratite u prvobitno stanje
- Ne postoji prava beskonačnost čekanja (ako vaš projekat uključuje čekanje duže od 116 dana)
Pozdrav svima koji žele razumjeti funkcioniranje onclick (). Današnji članak će vam pomoći da jednom za svagda shvatite princip rada ovog obrađivača događaja i rastavite ga konkretan primjer onclick JavaScript, odnosno primjeri.
Pokazat ću vam nekoliko načina rada s ovim alatom, objasniti njihove prednosti i nedostatke, a također opisati kako jQuery radi sa događajima. A sada prijeđimo na analizu materijala!
Dodjela rukovatelja događajima
Počnimo s teorijskim dijelom pitanja. Gotovo svi na svojim stranicama obrađuju skripte. I obično su to različiti događaji. Da bi svi ovi programirani događaji funkcionirali, morate instalirati rukovaoce za njih.
Prema pravilima pisanja, svi rukovaoci uključuju “on + naziv događaja” u svoje ime, što se posmatra u onclick(). Ovisno o odabranom događaju, obrada će se dogoditi kao rezultat različitih radnji. U našem slučaju, prilikom upotrebe onclick() izvršiće se samo oni događaji koji su pokrenuti levim klikom miša.
Različiti načini dodjeljivanja rukovatelja događaja
Do danas postoji nekoliko opcija za uvođenje rukovatelja nekim ili nekim događajima u kod.
Korištenje jednostavnih događaja
Počnimo sa jednostavna opcija, koji se sastoji od ubrizgavanja onclick () u oznaku samog html dokumenta. izgleda ovako:
Kao što vidite, kada lijevom tipkom miša kliknete na dugme, pojavljuje se poruka “Klik-klik!”. Želim da vam skrenem pažnju na jedan mali, ali značajan detalj. Unutra uzbuna može se koristiti samo jednostruki navodnici (‘’).
takođe u ovaj slučaj može biti korišteno ključna riječ ovo. Odnosi se na trenutni element i pruža sve dostupne metode za njega.
Ova linija koda stvara dugme sa tekstom "Klikni me". Nakon klika, vidjet ćete poruku na ekranu: "Klikni!". Zamijenit će ime dugmeta.
Ova metoda je nesumnjivo vrlo jednostavna. Međutim, pogodan je samo za slične zadatke, tj. prikazivanje poruka ili izvršavanje jednostavnih naredbi.
Ako je potrebno koristiti cikličke konstrukcije, koristiti oznake itd., onda ovuda ne odgovara. To će smanjiti stepen čitljivosti koda, kao i učiniti ga glomaznim i traljavim.
U ovom slučaju trebate pribjeći funkcijama.
Rad sa funkcijama
Funkcije vam omogućavaju da se odvojite željeni kod u poseban blok, koji se kasnije može pozvati putem rukovaoca događaja u .
Kao primjer, priložio sam aplikaciju za prikaz rezultirajućeg broja korisniku u različitim stepenima, počevši od 1. do 5. Za ovo sam kreirao funkciju countPow(), kojoj možete proslijediti parametre. U mojoj aplikaciji, korisnik mora unijeti broj kao funkcijsku varijablu.
Dakle, preko rukovatelja povezanog s gore navedenom funkcijom, izvršeni su proračuni i prikazani na ekranu.
Ova metoda se često koristi u razvoju. Međutim, nije najpopularniji, jer nije uvijek zgodno vezati događaje na ovaj način. Ponekad je za rješavanje nekih problema najbolja opcija omogućiti fleksibilno vezivanje objekata za događaje koristeći njihova svojstva.
Svojstva DOM elementa
Za one koji ne znaju, DOM je skraćenica "Model objekta dokumenta"("Model objekta dokumenta"). To je glavni alat za izvođenje raznih promjena i manipulacija na elementima.
Pošto je DOM hijerarhijsko stablo, određenim svojstvima i metodama objekata stranice može se pristupiti napredovanjem duž određenih grana.
Kao primjer, odlučio sam promijeniti boju pozadine iz zadane u plavu. Da bih to uradio, prošao sam kroz lanac document.body.style.backgroundColor.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Korištenje biblioteke jQuery
Puštanjem svjetla pojavilo se mnogo dodatnih naredbi, svojstava i metoda koje uvelike pojednostavljuju i skraćuju pisani kod. Programeri najčešće koriste svojstva da bi dobili određeni element po njegovom ID-u (document.getElementById (iden)), klasi (element.getElementsByClassName (className)), oznaci (elem.getElementsByTagName (tag)) ili nazivu (document.getElementsByName (name )) .
Da biste razumjeli o čemu je riječ, analizirajte sljedeći primjer.
Pažljivo! Ako kliknete na dugme, doći će do promjena sa ovim sadržajem.
25.09.16. 10.3KNeki JavaScript programi za događaje rade direktno sa korisničkim unosom. Trenutak nastanka i redoslijed takvih interakcija ne može se unaprijed predvidjeti.
Obrađivači događaja
Na pritisak tipke možete odgovoriti stalnim čitanjem njegovog stanja kako biste uhvatili trenutak kada se tipka pritisne prije nego što se ponovo pusti.
Ovako se rukovalo unosom podataka na primitivnim mašinama. Naprednije je otkrivanje pritiska na tipku i njegovo čekanje u čekanju. Program tada može periodično provjeravati red za nove događaje i reagirati na ono što tamo pronađe. U tom slučaju, program mora zapamtiti da skenira red čekanja i to često čini.
Od trenutka kada se pritisne tipka dok program ne otkrije ovaj događaj, on zapravo ne odgovara na zahtjeve. Ovaj pristup se naziva anketiranje (poll).
Većina programera pokušava to izbjeći ako je moguće.
Najbolji način je implementirati sistem koji omogućava kodu da odgovori na događaje kako se dogode. Preglednici ga implementiraju tako što pružaju mogućnost registracije funkcija rukovatelja za određene JavaScript događaje:
Kliknite na ovaj dokument da aktivirate rukovalac.
AddEventListener funkcija je registrirana tako da se njen drugi argument poziva kad god se dogodi događaj opisan prvim argumentom.
Događaji i DOM čvorovi
Svaki rukovalac događaja pretraživača je registrovan sa kontekstom. Kada se pozove funkcija addEventListener, ona se poziva kao metoda na cijelom prozoru, jer je u pretraživaču globalni raspon ekvivalentan objektu prozora. Svaki DOM element ima svoju metodu addEventListener, koja vam omogućava da slušate događaje na tom elementu:
Ovde nema rukovaoca.
U ovom primeru, rukovalac je povezan sa čvorom dugmeta. JavaScript događaji miša pokreću rukovalac, ali klikovi u ostatku dokumenta ne.
Postavljanjem atributa onclick čvora, dobijamo isti rezultat. Ali čvor ima samo jedan onclick atribut, tako da možete registrovati samo jedan rukovalac po čvoru. Metoda addEventListener vam omogućava da dodate bilo koji broj slušalaca. Tako smo osigurani od slučajne zamjene rukovatelja koji je već registrovan.
Metoda removeEventListener se poziva s istim argumentima kao addEventListener. Uklanja rukovaoca:
Da bismo otkazali funkciju rukovatelja, dajemo joj ime (na primjer, jednom). Ovako ga prosljeđujemo i addEventListener i removeEventListener.
Objekti događaja
Iako to nismo spomenuli u gornjim primjerima, argument se prosljeđuje funkciji JavaScript rukovatelja događaja: objekt događaja. Pruža dodatne informacije o događaju. Na primjer, ako želimo znati koja je tipka miša pritisnuta, moramo dobiti vrijednost koja svojstva objekta događaja:
Informacije pohranjene u objektu razlikuju se ovisno o tipu događaja. Svojstvo tipa objekta uvijek sadrži niz koji identifikuje događaj (na primjer, " kliknite" ili " miš dolje«).
Širenje
obrađivači događaja ( npr. JavaScript dodirni događaji) registrirani za roditeljske čvorove će također primati događaje koji se javljaju u podređenim elementima. Ako se klikne na dugme unutar pasusa, rukovaoci događaja paragrafa će takođe primiti događaj klika.
Događaj se širi od čvora na kojem se dogodio, do roditeljskog čvora i do korijena dokumenta. Nakon što se svi rukovaoci registrovani na određenom čvoru aktiviraju redom, rukovaoci registrovani za ceo prozor dobijaju priliku da odgovore na događaj.
U svakom trenutku, rukovalac događaja može pozvati stopPropagation metodu na objektu događaja kako bi spriječio dalje širenje događaja. Ovo može biti korisno kada imate dugme unutar drugog elementa na koji se može kliknuti i ne želite da se ponašanje klika vanjskih elemenata aktivira kada se klikne na dugme.
U sljedećem primjeru registrujemo rukovaoce " MouseDown» i za dugme i za pasus. Kada kliknete desnim klikom ( JavaScript događaji miša), rukovalac poziva metodu stopPropagation, koja sprečava pokretanje rukovaoca paragrafa. Kada se dugme pritisne drugim dugmetom miša, pokreću se oba rukovaoca:
stav i u njemu .
Većina objekata događaja ima ciljno svojstvo koje ukazuje na čvor na kojem su nastali. Možete koristiti ovo svojstvo da biste izbjegli slučajno rukovanje nekim događajem koji se širi od čvora.
Također možete koristiti JavaScript cilj događaja da proširite opseg događaja određenog tipa. Na primjer, ako imate čvor koji sadrži dugu listu dugmadi, zgodnije je registrirati rukovaoce jednim klikom za vanjski čvor i koristiti svojstvo target za praćenje da li je gumb kliknut, umjesto da registrujete instance rukovatelja za sve gumbe :
Zadane radnje
Mnogi događaji imaju zadane radnje povezane s njima. Ako kliknete na vezu, doći ćete do ciljnog elementa veze. Ako kliknete na strelicu nadole, pretraživač će se pomerati prema dole po stranici. Ako kliknete desnim tasterom miša, otvoriće se kontekstni meni.
Za većinu tipova događaja, JavaScript obrađivači događaja se pozivaju prije izvođenja zadanih radnji. Ako ne želite da se izvršava podrazumevano ponašanje, morate pozvati metodu preventDefault na objektu događaja.
Koristite ga za implementaciju prilagođenih prečica na tastaturi ili kontekstnih menija. Ili, da nadjačamo ponašanje koje korisnici očekuju. Slijedi link koji se ne može pratiti:
MDN
Pokušajte da to ne radite osim ako nemate dobar razlog za to.
Ovisno o pretraživaču, neki događaji možda neće biti uhvaćeni. U Google Chromeu, na primjer, prečica na tastaturi ( kod za događaje JavaScript) da zatvorite trenutnu karticu ( Ctrl-W ili Command-W) ne može se raščlaniti pomoću JavaScripta.
Ključni događaji
Kada korisnik pritisne tipku na tastaturi, pretraživač pokreće " taster dole". Kada pusti ključ, " keyup«:
Ova stranica postaje ljubičasta kada pritisnete tipku V.
Ovaj događaj se također pokreće kada korisnik pritisne i drži tipku ili dok se tipka drži pritisnutom. Na primjer, ako želite povećati brzinu lika u igri pritiskom na tipku sa strelicom i ponovo je smanjiti otpuštanjem tipke sa strelicom, onda morate paziti da ne povećavate brzinu svaki put kada se pritisne tipka sa strelicom.
Prethodni primjer koristi svojstvo objekta JavaScript ključnog koda događaja. Određuje koji je taster pritisnut ili otpušten. Međutim, nije uvijek očigledno kako pretvoriti numerički kod ključa u stvarni ključ.
Unicode karakterni kod se koristi za čitanje vrijednosti ključeva slova i brojeva. Povezano je sa slovom ( velikim slovima) ili broj naveden na ključu. Metoda charCodeAt za nizove vam omogućava da dobijete ovu vrijednost:
console.log("ljubičasta".charCodeAt(0)); // → 86 console.log("1".charCodeAt(0)); // → 49
Ostali ključevi imaju manje predvidljive šifre ključeva povezane s njima. Najbolji način da odredite pravi kod je eksperimentiranje. Registrujte rukovalac događajima pritiska na taster koji hvata šifre tastera koje prima i pritisnite željeni taster.
Tipke poput Shift, Ctrl, Alt pokreću događaje kao normalne tipke. Ali kada pratite kombinacije tastera, takođe možete utvrditi da li su ti tasteri pritisnuti gledajući svojstva tastature i JavaScript događaja miša: shiftKey, ctrlKey, altKey i metaKey:
Za nastavak pritisnite Ctrl-Space.
Događaji " taster dole" i " keyup' pruža informacije o stvarnom pritisku tipke. Ali šta ako želimo sam ulazni tekst? Dobijanje teksta iz kodova je nezgodno. Za ovo postoji događaj pritiskom na taster", koji se aktivira odmah nakon " taster dole". Ponavlja se zajedno sa "keydown" sve dok je tipka pritisnuta. Ali samo za ključeve pomoću kojih se unose znakovi.
Svojstvo charCode na objektu događaja sadrži kod koji se može protumačiti kao kod Unicode znakova. Možemo koristiti funkciju String.fromCharCode da pretvorimo ovaj kod u niz od jednog karaktera.
Postavite fokus unosa na ovu stranicu i upišite nešto.
DOM čvor u kojem se događaj događa ovisi o tome koji element je imao fokus na unosu kada je tipka pritisnuta. Regularni čvorovi ne mogu imati fokus ulaza ( osim ako za njih ne postavite atribut tabindex), ali elementi kao što su veze, dugmad i polja obrasca mogu.
Ako nijedan određeni element nema fokus, tada je ciljni čvor za ključne i JavaScript dodirne događaje document.body.
Klikovi mišem
Klikom na dugme miša takođe se pokreće niz događaja. Događaji " miš dolje" i " mouseup" slicno " taster dole" i " keyup". Pokreću se kada se pritisne i pusti dugme miša. Ovi događaji se podižu na DOM čvorovima nad kojima je lebdelo mišem kada se događaj dogodio.
Za zajednički čvor koji je uključivao i klik mišem i otpuštanje miša, nakon " mouseup» događaj je pokrenut « kliknite". Na primjer, ako pritisnete tipku miša na jednu stavku, a zatim pomaknete kursor na drugu stavku i otpustite tipku, tada će se pojaviti događaj " kliknite' će se pojaviti na elementu koji sadrži obje ove stavke.
Ako se dva klika dogode blizu jedan drugom, " dblclick" (dvostruki klik). Pojavljuje se nakon drugog klika. Da biste dobili tačnu lokaciju na kojoj se dogodio događaj miša, morate dobiti vrijednost svojstava pageX i pageY, koja sadrže koordinate događaja (u pikselima) u odnosu na gornji lijevi ugao dokumenta.
Ispod je implementacija primitivnog programa za crtanje. Svaki put kada se miš klikne na dokument (ispod kursora) dodaje se tačka:
Svojstva clientX i clientY su slična pageX i pageY, ali se odnose na vidljivi dio dokumenta. Mogu se koristiti za poređenje koordinata miša s onima koje vraća funkcija getBoundingClientRect.
Pokret miša
Svaki put kada se miš pomjeri, " mousemove' iz skupa JavaScript događaja miša. Može se koristiti za praćenje položaja miša. Ovo se koristi kada se implementira mogućnost prevlačenja i ispuštanja elemenata pomoću miša.
U sljedećem primjeru, program prikazuje panel i postavlja rukovaoce događajima tako da panel postaje uži ili širi kada se povuče:
Povucite rub panela da promijenite njegovu širinu:
Imajte na umu da rukovalac mousemove' je registrovan za cijeli prozor. Čak i ako se miš pomakne iz panela tokom promjene veličine, mi i dalje ažuriramo širinu panela i prekidamo JavaScript dodirne događaje kada se dugme miša pusti.
Moramo zaustaviti promjenu veličine panela kada korisnik otpusti tipku miša. Nažalost, nisu svi pretraživači postavili " mousemove» koju imovinu. Postoji standardno svojstvo dugmadi koje pruža slične informacije, ali takođe nije podržano u svim pretraživačima. Na sreću, svi glavni pretraživači podržavaju jednu stvar: ili dugmad ili koji . Funkcija buttonPressed u gornjem primjeru prvo pokušava koristiti svojstvo buttons, a ako nije dostupna, skače na koji .
Kada kursor miša uđe ili napusti čvor, " mišem preko" ili " mouseout". Mogu se koristiti za kreiranje efekata lebdenja, prikazivanje natpisa ili promjenu stila elementa.
Da biste stvorili takav efekat, nije dovoljno samo početi ga prikazivati kada se događaj " mišem preko' i završiti nakon događaja ' mouseout". Kada se miš pomakne od čvora do jednog od njegovih djece, događaj se aktivira za roditeljski čvor " mouseout". Iako pokazivač miša nije napustio opseg čvora.
Da stvar bude gora, ovi JavaScript događaji se šire kao i drugi događaji. Kada miš napusti jedan od podređenih čvorova za koje je registriran rukovalac, " mouseout«.
Da biste zaobišli ovaj problem, možete koristiti svojstvo povezanog Target objekta događaja. U slučaju događaja" mišem preko' označava nad kojim je elementom prije prešao pokazivač miša. I u slučaju pojave mouseout» - na koji se element pomiče pokazivač. Mi ćemo promijeniti samo efekat lebdenja kada je relatedTarget izvan našeg ciljnog čvora.
U ovom slučaju mijenjamo ponašanje jer je kursor miša lebdio iznad čvora izvan njega (ili obrnuto):
Zadržite pokazivač miša preko ovoga stav.
IsInside funkcija prati roditeljske odnose datog čvora ili dok se ne dosegne vrh dokumenta (kada čvor je null). Ili roditeljski element koji nam je potreban neće biti pronađen.
Lebdeći efekat je mnogo lakše napraviti sa CSS pseudo-selektor:hover, kao što je prikazano u sledećem primeru. Ali kada efekat lebdenja uključuje nešto složenije od samo promjene stila ciljnog čvora, onda morate koristiti trik koristeći događaje " mišem preko" i " mouseout» ( JavaScript događaji miša):
Skrolovanje događaja
Svaki put kada se element pomiče, JavaScript događaj pomicanja pokreće se na elementu. Može se koristiti za praćenje onoga što je ovog trenutka pregledan od strane korisnika; da onemogućite animaciju izvan okvira za prikaz.
U sljedećem primjeru prikazujemo indikator napretka sa desne strane gornji ugao dokument i ažurirajte ga tako da ispunjava dijelove s drugom bojom dok se krećete prema dolje po stranici:
Skroluj me...
Postavljanjem pozicije elementa ili fiksnog svojstva, dobijamo isti rezultat kao postavljanje position:apsolute . Ali na ovaj način također blokiramo pomicanje elementa zajedno s ostatkom dokumenta. Kao rezultat toga, indikator napretka će biti statički fiksiran u gornjem uglu. Unutar njega je još jedan element čija se veličina mijenja u skladu s trenutnim napretkom.
Koristimo % umjesto px kao jedinicu mjere kada postavljamo širinu tako da se veličina elementa mijenja proporcionalno veličini trake napretka.
Globalna varijabla innerHeight sadrži visinu prozora, koju moramo oduzeti od ukupne dostupne visine dokumenta koja se može pomicati. Ne možete pomicati prozor prema dolje kada dođete do dna dokumenta. Sa innerHeight, innerWidth se također može koristiti. Dijeljenje straniceYOffset ( trenutnu poziciju prozora za pomeranje) maksimalnom dozvoljenom pozicijom skrolovanja i množenjem sa 100, dobijamo procenat za traku napretka.
Pozivanje preventDefault na događaju JavaScript pomicanja ne sprječava pomicanje. Rukovalac događajima se poziva tek nakon što dođe do pomicanja.
ulazni fokus događaja
Kada element ima fokus za unos, pretraživač pokreće " fokus". Kada se fokus ulaza ukloni, " zamućenje«.
Ova dva događaja nemaju distribuciju. Handler roditeljski element nije obaviješten kada podređeni element ima fokus za unos.
Sljedeći primjer prikazuje savjet za tekstualno polje, koji je trenutno u fokusu:
ime:
Dob:
Objekt prozora prima događaje " fokus" i " zamućenje„Kada korisnik krene ili napusti karticu, prozor pretraživača u kojem se prikazuje dokument.
Učitaj događaj
Kada se stranica završi sa učitavanjem, JavaScript događaj "load" se pokreće za tijelo dokumenta i objekte prozora. Koristi se za planiranje radnji inicijalizacije koje zahtijevaju učitavanje cijelog dokumenta. Ne zaboravite da je sadržaj
Ponekad morate otkazati funkciju koju smo planirali. Ovo se radi pohranjivanjem povratne vrijednosti funkcije setTimeout i pozivanjem clearTimeout na njoj:
var bombTimer = setTimeout(function() ( console.log("BOOM!"); ), 500); if(Math.random()< 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
Funkcija cancelAnimationFrame radi isto kao clearTimeout. Poziva se vrijednošću koju vraća requestAnimationFrame da poništi okvir ( ako još nije pozvan).
Sličan skup funkcija, setInterval i clearInterval , koristi se za postavljanje tajmera koji bi trebao ponavljati radnju svakih X milisekundi:
var ticks = 0; var clock = setInterval(function() ( console.log("tick", ticks++); if (ticks == 10) (clearInterval(clock); console.log("stop."); ) ), 200);
Razdvajanje
Neki tipovi događaja mogu se aktivirati više puta u kratkom vremenskom periodu ( npr. "mousemove" i događaj pomicanja javascripta). Prilikom rukovanja takvim događajima, morate paziti da ne potrajete predugo, inače će rukovaocu trebati toliko dugo da izvrši radnju da će interakcija s dokumentom postati spora i trzaja.
Ako trebate učiniti nešto prilagođeno u takvom rukovaocu, možete koristiti setTimeout kako biste bili sigurni da to ne traje predugo. Ovo se obično naziva podjelom događaja. Postoji nekoliko različitih pristupa drobljenju.
U prvom primjeru želimo nešto učiniti kada korisnik kuca. Ali ne želimo ovo raditi nakon svakog pritiska na tipku. Kada korisnik brzo kuca, potrebno je sačekati dok ne dođe do pauze. Umjesto da odmah izvršimo akciju u obrađivaču događaja, postavili smo odgodu. Također brišemo prethodno kašnjenje ( ako iko). Ako se događaji dešavaju u kratkim intervalima ( manje od kašnjenja koje smo postavili), tada se odgoda iz prethodnog događaja poništava:
Prosljeđivanje nedefinirane vrijednosti u clearTimeout ili njeno pozivanje na kašnjenje koje je već pokrenuto, neće imati efekta. Više ne moramo da vodimo računa kada ćemo ga nazvati, samo to radimo za svaki događaj.
Možete koristiti drugačiji scenario ako želite da razdvojite odgovore za malo vremena. Ali istovremeno ih treba pokrenuti tokom niza događaja, a ne tek nakon njih. Na primjer, možete poslati odgovor na događaje " mousemove» ( JavaScript događaji miša) trenutne koordinate miša, ali samo svakih 250 milisekundi:
Zaključak
Obrađivači događaja nam omogućavaju da otkrijemo i odgovorimo na događaje nad kojima nemamo direktnu kontrolu. Za registraciju takvog rukovatelja koristite metodu addEventListener.
Svaki događaj je povezan sa određeni tip (« taster dole«, « fokus” i tako dalje) koji ga identificira. Većina događaja se pokreće na određenom DOM elementu, a zatim se širi na roditeljske čvorove elementa. Ovo omogućava rukovaocima povezanim s tim elementima da ih obrađuju.
Kada se pozove rukovalac, objekt događaja mu se prosljeđuje sa Dodatne informacije o akciji. Ovaj objekat takođe sadrži metode za zaustavljanje daljeg širenja događaja ( stopPropagation) ili spriječiti zadani pretraživač da obrađuje događaj ( preventDefault).
Pritisci na tipke generiraju događaje " taster dole«, « pritiskom na taster" i " keyup". Klik mišem generiše događaje " miš dolje«, « mouseup" i " kliknite". Pokret miša - " mousemove«, « mouseenter" i " mouseout«.
Događaj JavaScript pomicanja može se definirati pomoću " skrolujte
