În ultimii ani, am urmărit dezvoltare rapida limbaje de dezvoltare interfețe externe, în special HTML cu noi specificații în HTML5 și versiuni CSS 3 cu multe caracteristici noi.
Acum avem ocazia să facem multe lucruri interesante de care anterior nu se puteau face fără ajutor javascriptși imagini inclusiv colturi rotunjite, gradații, șabloane receptive, grile, transparența culorilor și multe, multe altele.
Mulți oameni nu aveau capacitatea de a gestiona evenimentele clic în CSS. De fapt, mulți oameni cred că nu avem nevoie de această opțiune, deoarece interacțiunea este mai mult despre funcționalitatea javascript. În principiu, totul este clar aici, probabil că nu este foarte convenabil să folosești javascript pentru cele mai simple evenimente de clic.
În orice caz, până în prezent, CSS nu ne oferă niciunul metode oficiale controlați evenimentele de clic în CSS. Dar există câteva trucuri foarte interesante pe care le putem folosi pentru a „detecta” clicuri doar cu CSS, fără javascript, și despre asta vom vorbi astăzi.
Disclaimer
Acest articol își propune să vă educe cu privire la capacitatea de a controla evenimentele de clic cu CSS. Nu este tocmai potrivit pentru proiecte serioase. Rețineți că întregul articol nu este altceva decât un experiment și nu un ghid pentru gestionarea evenimentelor de clic pe site-ul sau aplicația dvs.
În plus, unele dintre metodele prezentate nu sunt foarte bine acceptate în browsere, ceea ce înseamnă mai mult că în acest articol dorim doar să demonstrăm cum puteți extinde domeniul de aplicare al CSS.
Hack de casetă de selectare
Un lucru minunat! Suntem siguri că ați mai auzit cu toții de hack-ul casetei de selectare. Acesta este probabil cel mai comun mod de a gestiona evenimentele de clic în CSS. Se bazează pe... o casetă de selectare.
Avantajul unei casete de selectare este că este binară. Este fie evidențiat, fie nu. Și nu există nicio modalitate de a evidenția ceva „jumătate” sau așa ceva. Acesta este motivul pentru care hack-ul casetei de selectare este frumos mod de încredere declanșarea evenimentelor de clic în CSS. Să dăm un exemplu.
Cum functioneaza
Cod HTML
Cod CSS
De schimbat (
culoarea neagra;
}
culoarea rosie;
}
După cum puteți vedea, se bazează pe: pseudo-clasa bifată și selectorul principal de frați ~. Vă rugăm să rețineți că va funcționa și cu selectorul + frate adiacent. În general, se întâmplă astfel: „dacă caseta de selectare este selectată, atunci următoarele articole cu clasa.de-schimbat va fi roșu."
Deci, caseta de selectare nu este de fapt foarte atractivă, dar o puteți decora fără probleme ascunzând caseta de selectare în sine și atașând o comandă rapidă. Ceva de genul următor:
"O să fiu roșu! Va fi legenda... Așteaptă...
Deci, ascundem caseta de selectare și folosim comanda rapidă pentru a declanșa evenimentul de clic.
Intrare (
poziție: absolută;
sus: -9999px;
stânga: -9999px;
}
eticheta (
afisare: bloc;
fundal: # 08C;
umplutură: 5px;
chenar: 1px rgba solid (0,0,0, .1);
chenar-rază: 2px;
culoare albă;
greutatea fontului: bold;
}
intrare: bifat ~ .de-a fi schimbat (
culoarea rosie;
}
Astfel, ar trebui să ajungeți cu ceva de genul unui buton care începe procesul de schimbare a culorii elementului paragraf. Nu e misto? Făcând clic din nou pe butonul, culoarea va reveni la negru.
(rețineți că există posibilități diferite ascunderea casetei de selectare, iar cea mai populară dintre acestea este afișarea: niciuna.)
Avantaje și dezavantaje
Avantaje:
* Binar (evidențiat sau neevidențiat)
* Al doilea clic vă permite să reveniți poziția inițială
* Permite aplicarea unui număr mare de evenimente de clic (dacă prima casetă de selectare este bifată și a doua casetă de selectare este bifată, atunci puteți face următoarele).
Defecte:
* Elementele trebuie să partajeze același element părinte (frații)
* Este necesar un cod HTML suplimentar (element de intrare, comandă rapidă etc.)
* Sunt necesare două trucuri suplimentare pentru ca metoda să funcționeze browsere mobile(pentru aceasta va trebui să citiți articolul de mai jos)
Metodă: țintă
Există o altă tehnică cunoscută sub denumirea de „imitare” a evenimentului clic în CSS folosind pseudo-clasa: target. Această pseudo-clasă este foarte asemănătoare cu: hover.
Evenimentul special al pseudoclasei: target depinde de ceea ce numim „identificator de fragment”. În termeni simpli, această pseudo-clasă se referă la un hashtag pe care l-ați putea vedea uneori la sfârșitul unei adrese URL. O potrivire are loc atunci când hashtag-ul și ID-ul articolului sunt aceleași.
Cum functioneaza
Cod HTML
Click pe mine!
"O să fiu roșu! Va fi legenda... Așteaptă...
Cod CSS
De schimbat (
culoarea neagra;
}
De schimbat: țintă (
culoarea rosie;
}
Când faceți clic pe link (href = „# id”), adresa URL se schimbă și accesați ancora #id din pagină. În acest moment, elementul notat cu id-ul dat poate fi specificat folosind: pseudo-clasa target.
Avantaje și dezavantaje
Avantaje:
* Foarte CSS simplu
* Excelent pentru evidențierea secțiunilor
Defecte:
* Confuzie în istoricul browserului
* Există un salt de pagină (când treceți la ancora)
* Eticheta de ancorare sau hack-ul URL este necesar pentru a rula hashtag
* Funcționează cu un singur element (deoarece ID-urile sunt întotdeauna unice)
* Nu există nicio modalitate de a reveni la poziția inițială fără a utiliza un alt hashtag, link sau hack URL.
Suportul pentru browser nu este la egalitate, dar nu este chiar atât de rău. Tot browsere moderne sprijină această abordare, cu excepția (IE 6-8). Începând de la IE9, suportul este stabil.
Metodă: focalizare
Să ne uităm la un alt mod folosind o pseudo-clasă, de data aceasta va fi: focus. Ideea este cam aceeași aici, cu excepția faptului că nu este nevoie să schimbați adresa URL. Metoda are ca scop concentrarea atentiei utilizatorului asupra unui element anume.
Când vă aflați pe o pagină web, puteți face clic pe file pentru a naviga diverse elemente... Acest lucru este foarte convenabil atunci când completați formulare - vă puteți muta de la un câmp la altul fără a utiliza mouse-ul. De asemenea, ajută persoanele cu deficiențe de vedere să navigheze pe site.
Este important să rețineți că vă puteți concentra doar asupra unor elemente, inclusiv link-uri, câmpuri de intrare, în timp ce altele nu pot (paragrafe, diviziuni și multe altele). De fapt, vă puteți concentra și asupra lor, dar va trebui să adăugați un atribut tabindex cu o valoare numerică.
Cum functioneaza
Cod HTML
Click pe mine!
"O să fiu roșu! Va fi legenda... Așteaptă...
Cod CSS
Interval: focus ~ .de-a fi schimbat (
culoarea rosie;
}
Deci, când faceți clic pe un element span sau navigați cu tasta Tab, browserul se concentrează pe elementul care se potrivește cu: focus pseudo-clasa. Un selector de frați adiacent va face restul. Destul de simplu, nu-i așa? Dacă nu aveți chef să vă ocupați de tabindex, puteți utiliza pur și simplu linkul c # href. Totul va funcționa.
Avantaje și dezavantaje
Avantaje:
* Cod CSS și HTML foarte simplu
* Excelent pentru navigare sau ceva similar
Defecte:
* Este necesar fie un element care permite focalizarea, fie atributul tabindex
* Pseudo-elementul se potrivește numai atunci când se pune accentul pe element (aceasta înseamnă că lucrurile se vor încurca dacă dai clic în altă parte).
Hackul de tranziție
Aceasta este probabil una dintre cele mai incredibile moduri de a gestiona evenimentele de clic în CSS. Serios, asta e o nebunie. Această metodă a fost inventată de Joel Besada și a fost întotdeauna unul dintre trucurile noastre preferate CSS.
Linia de jos este să plasați stilul CSS în tranziția CSS. Da, ați citit corect, în tranziția CSS. De fapt, ideea este destul de simplă. Se bazează pe o întârziere pseudo-infinită a modificării pentru a preveni revenirea la valoarea inițială. Probabil sună confuz, dar de fapt este simplu. Vă rugăm să vedeți codul.
Cum functioneaza
Cod HTML
Click pe mine!
"O să fiu roșu! Va fi legenda... Așteaptă...
Cod CSS
De schimbat (
tranziție: toate 0 9999999;
}
span: activ ~ .de-a fi schimbat (
tranziție: toate 0-urile;
culoarea rosie;
}
Esența primului anunț este amânarea oricăror modificări cu aproximativ 116 zile, ceea ce ne permite să ne asigurăm că modificările rămân de îndată ce sunt aplicate. Nu sunt nesfârșite, dar par să fie, nu?
Dar nu vrem ca modificările să fie aplicate la 116 zile de la clic, vrem ca totul să se întâmple imediat! Deci, aici trebuie să rescriem întârzierea în momentul clicului (pseudo-clasă: activ) pentru a aplica modificările. Apoi, când se face clic, vechea parametru de tranziție va fi returnat, revenind parametrul de întârziere la 9999999s, ceea ce va împiedica poziționarea acasă.
Avantaje și dezavantaje
Avantaje:
* Idee incredibil de inteligentă
* Salvează valoarea dorită când butonul este eliberat, chiar dacă tranziția nu este încă finalizată (vezi mai jos)
După cum a spus Joel Besada:
„Cel mai interesant lucru aici este că poți termina tranziția la jumătate, iar parametrul va păstra aceeași valoare pe care a avut-o în momentul specific al tranziției. De exemplu, să presupunem că avem o tranziție de opacitate liniară de la 1 la 0 în 2 secunde, dar continuăm doar 1 secundă. Adică, parametrul de opacitate ar trebui să se oprească la 0,5, deoarece întârzierea împiedică parametrul să revină. Dacă acum rulăm tranziția din nou în opacitate, aceasta va continua de la 0,5 în loc să se joace de la început.”
Defecte:
* Nu este foarte bun suport pentru browser (nu este acceptat în IE9 și Opera Mini)
* Funcționează numai cu acele valori care permit tranziția
* Nu există nicio modalitate de a reveni la valoarea primară
* De fapt, tranziția nu este nesfârșită dacă așteptați până au trecut 116 zile.
In concluzie
Deci, astăzi, cumva putem deja defini clicurile folosind CSS. Adică avem ocazia, deși este mai mult ca un hack. Unele metode sunt mai bune decât altele pentru situații specifice, dar în general nu merită să fie folosite într-un proiect real.
Tab Atkins Jr. acum cateva luni. A fost scrisă o întreagă propunere despre pozițiile butoanelor radio în CSS. Puteți arunca o privire la cum funcționează:
Stare de comutare: niciuna |
comuta-grup: niciunul |
toggle-share: niciunul |
comutare-inițială:
…Unde:
* stări de comutare reprezintă functie de bază, care vă permite să activați/dezactivați funcționalitatea de comutare. Niciunul nu înseamnă o poziție cu handicap, pentru care sunt responsabili 2 sau mai mulți diverse prevederi.
* comuta-grup implementează funcționalitatea unui buton radio. Dacă faceți clic pe elementul de comutare-grup cu setați parametrulîn afară de niciunul, toate elementele care împart același grup de comutare vor fi setate automat în prima poziție (dezactivate).
* comuta-share implementează funcționalitatea comenzii rapide. Când faceți clic pe un articol cu comutare-share, se comportă ca și cum ați fi făcut clic pe toate elementele către care indică.
* comutare-inițială setează poziția inițială a comutatorului.
Totuși, a recunoscut că ideea lui nu a fost perfectă și ar putea duce la probleme și paradoxuri. Nu dorim să intrăm în detalii în articolul de astăzi, deoarece acesta nu este inclus în conținutul său, dar vă recomandăm să vă familiarizați cu acest subiect.
Așa că ne-am întors la javascript. Acesta este probabil Cel mai bun mod dacă vrei fiabilitate și coeziune. Cu toate acestea, dacă doriți să vă distrați puțin dezvoltând ceva în „CSS pur”, atunci articolul nostru vă va fi cu siguranță util.
De asemenea, aș dori să remarc că Chris Coyier de la CSS-Tricks acum doi ani despre management clicuri duble folosind CSS. Poate că informațiile nu mai sunt relevante, dar va fi totuși foarte interesant să ne cunoaștem.
Oricum, mulțumesc că ai citit articolul! Vă rugăm să nu uitați și nu ezitați să împărtășiți rezultatele propriilor experimente.
Atenţie! Nu aveți permisiunea de a vizualiza text ascuns.
Pentru cateva anii recenti a existat o expansiune surprinzătoare a limbajelor la nivelul clientului pentru aplicațiile web, în special HTML5 și CSS3.
Acum puteți efectua multe operațiuni care înainte erau de neconceput fără utilizarea JavaScript și a imaginilor, de exemplu, colturi rotunjite, șabloane receptive, grile modulare, culori transparenteși mult mai mult.
Dar a existat întotdeauna o lipsă de capacitate de a gestiona evenimentul clic prin intermediul CSS. Unii experți consideră că această opțiune nu ar trebui să fie prezentă, deoarece interacțiunea interactivă cu utilizatorul este un câmp de acțiune pentru JavaScript. Raționamentul lor este rezonabil, dar folosind JavaScript chiar și pentru simple clicuri este obositor.
Momentan nu există oficial Instrumente CSS pentru a gestiona evenimentul clic... Cu toate acestea, există metode care pot fi folosite pentru a „detecta” clicuri folosind numai CSS, fără JavaScript.
Notă
Metodele descrise nu sunt destinate „ viata reala„. Materialele lecției ar trebui să fie considerate ca bază pentru experimentare. Mai mult, unele metode sunt slab acceptate în browsere. Scopul acestei lecții este de a atinge limitele capabilităților CSS.
Folosind caseta de selectare
Probabil că ați întâlnit deja această metodă. Aceasta este cea mai populară metodă de a gestiona un eveniment. clic prin intermediul CSS.
Metoda se bazează pe utilizarea unei casete de selectare. Acest obiect are o entitate binară și poate fi doar într-una din două stări. Asa de aceasta metoda este un mod perfect de încredere de a gestiona evenimente clicîn CSS.
De modificat (culoare: negru;) intrare: bifat ~ .de-schimbat (culoare: roșu;)
Metoda se bazează pe utilizarea unei pseudo-clase : verificat iar selectorul ~. Rețineți că va funcționa și cu selectorul +. Esența metodei este că „dacă caseta de selectare este bifată, atunci următoarele elemente cu class.to-be-changed vor fi roșii”.
Caseta de selectare nu pare foarte atractivă. Dar poți face aspect mai interesant ascunzând caseta de selectare și atașând o etichetă. Ceva de genul:
Deci, ascundem caseta de selectare și folosim eticheta pentru a răspunde la eveniment. clic:
Etichetă de intrare (poziție: absolut; sus: -9999px; stânga: -9999px;) (afișare: bloc; fundal: # 08C; umplutură: 5px; chenar: 1px rgba solid (0,0,0, .1); chenar- rază: 2px; culoare: alb; greutate font: bold;) intrare: bifat ~ .de-a fi schimbat (culoare: roșu;)
Avem un buton, făcând clic pe care se schimbă culoarea textului din paragraf. Apăsând din nou butonul, se schimbă culoarea înapoi.
(Rețineți că există metode diferite pentru a ascunde caseta de selectare. Cel mai evident folosește afișajul: niciunul.)
pro
- Binar, există doar două stări - bifat sau nebifat
- Apăsând din nou, se restabilește starea ( Acest obiect poate fi un minus)
- Vă permite să organizați procesarea evenimente conexe clic(dacă prima casetă este bifată și a doua casetă este bifată, atunci efectuăm următoarea acțiune)
Minusuri
- Elementele trebuie să aibă un strămoș comun
- Necesită suplimentar Marcaj HTML(intrare, etichetă și așa mai departe)
- Necesar acțiuni suplimentare pentru a lucra pe browsere mobile
Metoda cu: tinta
Există o altă modalitate de a folosi pseudoclasa : tinta... Această pseudo-clasă este similară cu pseudo-clasa : planează cele care îndeplinesc doar anumite condiţii.
Eveniment special pentru pseudo-clasa : tinta depinde de „identificatorul de bucată”. Pentru a spune simplu, această pseudo-clasă se referă la hashtag, care se află la sfârșitul adresei URL și devine activă atunci când hashtag-ul și ID-ul se potrivesc.
De schimbat (culoare: negru;). De schimbat: țintă (culoare: roșu;)
pro
- Cod CSS simplu
- Excelent pentru evidențierea secțiunilor
Minusuri
- Gunoi în istoricul browserului
- Pagina se derulează
- Necesită etichetă de link sau acțiune URL pentru a include hashtag
- Un singur element poate fi afectat (deoarece ID-ul este unic)
- Nu există nicio modalitate de a reveni la starea inițială fără a utiliza un alt hashtag, link sau operațiuni URL
Metoda cu: focus
Să continuăm prezentarea noastră de ansamblu într-un fel folosind o altă pseudo-clasă - : concentrare... Ideea este aproape aceeași ca în cazul precedent, cu excepția faptului că URL-ul nu trebuie să se schimbe. Aici ne bazăm pe focalizarea intrării pe un anumit element.
Când vă aflați pe o pagină, puteți utiliza tasta Tab pentru a trece de la un element la altul. Această metodă este foarte utilă atunci când lucrați cu formulare pentru a naviga între elemente fără a utiliza mouse-ul. Metoda este folosită și pentru navigație cu deficiențe de vedere după pagină.
Este important ca unele elemente să primească focalizare de intrare, cum ar fi link-uri, paragrafe, câmpuri de intrare și multe altele. Trebuie doar să setați atributul tabindex pentru ei cu valoare numerică pentru ei.
Interval: focus ~ .de-a fi schimbat (culoare: roșu;)
Când faceți clic pe un element span sau comutați la el utilizând tasta Tab, acesta primește focalizarea de intrare și corespunde: pseudo-clasei focus. Selectorul de vecini face restul muncii. Dacă dintr-un motiv oarecare nu trebuie să utilizați atributul tabindex, puteți pur și simplu să setați legătura cu adresa #.
pro
- Cod CSS și HTML foarte simplu
- Navigație excelentă
Minusuri
- Este necesar fie elementul cu focus sau atribut tabindex
- Potrivirea are loc numai atunci când există un focus de intrare (făcând clic în altă parte a paginii amestecă fluxul de lucru)
Metoda cu tranziții
Această metodă este probabil cea mai murdară modalitate de a gestiona un eveniment. clicîn CSS.
Ideea este să „păstrezi” Stilul CSSîn tranziție CSS. Folosim o întârziere pseudo-infinită pentru a preveni întoarcerea. starea initiala... Sună complicat, dar de fapt este foarte ușor de implementat.
De schimbat (tranziție: toate 0 9999999;) span: activ ~ .de-a-fi modifica (tranziție: toate 0; culoare: roșu;)
Întârzierea este de aproximativ 116 zile. Nu infinit, ci un fel de aparență pentru condițiile noastre. Prin urmare, modificările sunt salvate și nu există nicio revenire la starea inițială.
pro
- Simplu și grațios
- Statul persistă chiar dacă tranziția nu s-a încheiat
Minusuri
- Suport slab pentru browser (nu este disponibil în IE9 și Opera Mini)
- Funcționează numai cu valori care pot fi utilizate cu tranziții
- Nu există nicio modalitate de a reveni la starea inițială
- Fără o infinitate reală de așteptare (dacă proiectul dvs. presupune așteptarea mai mult de 116 zile)
Salutări tuturor celor interesați să înțeleagă cum funcționează onclick (). Articolul de astăzi vă va ajuta să înțelegeți odată pentru totdeauna principiul de funcționare a acestui handler de evenimente și să dezasamblați exemplu concret onclick JavaScript, sau mai degrabă exemple.
Vă voi arăta mai multe moduri de a lucra cu acest instrument, vă voi explica avantajele și dezavantajele și vă voi descrie modul în care jQuery funcționează cu evenimente. Acum să trecem la analiza materialului!
Atribuirea de gestionare a evenimentelor
Mai întâi, să ne uităm la partea teoretică a întrebării. Aproape toată lumea din paginile lor procesează scripturi. Și, de obicei, acestea sunt diverse evenimente. Pentru ca toate aceste evenimente programate să se declanșeze, trebuie instalat un handler pentru ele.
Conform regulilor de scriere, toți manipulatorii includ în numele lor „on + nume eveniment”, care este respectat în onclick ()... În funcție de evenimentul selectat, procesarea va avea loc ca urmare a diferitelor acțiuni. În cazul nostru, la utilizare onclick () vor fi executate doar acele evenimente care au fost cauzate de clicul stâng al mouse-ului.
Diferite moduri de a atribui un handler de evenimente
Astăzi, există mai multe opțiuni pentru introducerea unui handler al unora sau al unor evenimente în cod.
Folosind evenimente simple
Sa incepem cu varianta simpla, care constă în injectarea onclick () chiar în markup-ul documentului html. Arata cam asa:
După cum puteți vedea, atunci când apăsați butonul cu butonul stâng al mouse-ului, apare mesajul „Click-click!”. Aș dori să vă atrag atenția asupra unui mic, dar esențial detaliu. Interior alerta poate fi folosit doar ghilimele simple (‘’).
De asemenea, în în acest caz poate fi utilizat cuvânt cheie acest... Se referă la elementul curent și oferă toate metodele disponibile pentru acesta.
Această linie de cod creează un buton cu textul Click Me. După apăsare veți vedea pe ecran mesajul: „Apăsați!” Acesta va înlocui prenumele butonului.
Această metodă este, fără îndoială, foarte simplă. Cu toate acestea, este potrivit doar pentru sarcini similare, de ex. afișarea mesajelor sau executarea unor comenzi simple.
Dacă este necesar să folosiți construcții ciclice, folosiți etichete etc., atunci Pe aici nu se potriveste. Va reduce lizibilitatea codului, precum și îl va face greoi și dezordonat.
În acest caz, merită să apelezi la funcții.
Lucrul cu funcții
Funcțiile vă permit să vă separați codul necesarîntr-un bloc separat, care poate fi apelat ulterior printr-un handler de evenimente în.
De exemplu, am atașat o aplicație pentru afișarea numărului rezultat către utilizator în diferite grade, începând cu primul și terminând cu al 5-lea. Pentru aceasta, am creat o funcție countPow () la care se pot trece parametri. În aplicația mea, utilizatorul trebuie să introducă un număr ca variabilă de funcție.
Astfel, prin intermediul handler-ului asociat cu funcția menționată mai sus, calculele au fost efectuate și afișate.
Această metodă este adesea folosită în timpul dezvoltării. Cu toate acestea, nu este cel mai popular, deoarece nu este întotdeauna convenabil să legați evenimentele în acest fel. Uneori, pentru a rezolva unele probleme, cea mai bună opțiune este de a oferi legarea flexibilă a obiectelor la evenimente folosind proprietățile acestora.
Proprietățile elementului DOM
Pentru cei care nu știu, DOM - înseamnă „Model de obiect document”(„Model de obiect document”). Este instrumentul principal pentru efectuarea diferitelor modificări și manipularea elementelor.
Deoarece DOM-ul este un arbore ierarhic, anumite proprietăți și metode ale obiectelor paginii pot fi accesate progresând prin ramuri specifice.
De exemplu, am decis să schimb culoarea de fundal de la implicit la albastru. Pentru a face asta, am trecut prin lanț document.corp.stil.fond Culoare.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Folosind biblioteca jQuery
Odată cu eliberarea luminii, au existat multe comenzi, proprietăți și metode suplimentare care simplifică și scurtează foarte mult codul scris. Cel mai adesea, dezvoltatorii folosesc proprietăți pentru a obține un anumit element prin identificatorul său (document.getElementById (iden)), clasă (element.getElementsByClassName (className)), etichetă (elem.getElementsByTagName (tag)) sau nume (document.getElementsByName (nume) )) ...
Pentru a înțelege ce este în joc, analizați următorul exemplu.
Cu grija! Dacă faceți clic pe buton, atunci vor exista modificări cu acest conținut.
25.09.16 10.3KUnele programe de evenimente JavaScript funcționează direct cu intrarea utilizatorului. Momentul apariției și ordinea unor astfel de interacțiuni nu pot fi prezise în avans.
Managerii de evenimente
Puteți răspunde la o apăsare de tastă citind constant starea acesteia pentru a prinde momentul în care tasta este apăsată înainte de a fi eliberată din nou.
Acesta este modul în care intrarea datelor a fost gestionată pe mașinile primitive. Mai progresivă este detectarea unei taste și punerea în coadă. Programul poate verifica apoi periodic coada pentru evenimente noi și poate reacționa la ceea ce găsește acolo. În acest caz, programul ar trebui să-și amintească să se uite la coadă și să o facă des.
În perioada de la apăsarea unei taste până când programul detectează acest eveniment, de fapt nu răspunde solicitărilor. Această abordare se numește sondaj.
Majoritatea programatorilor încearcă să o evite dacă este posibil.
Cel mai bun mod este să implementați un sistem care să permită codului dvs. să reacționeze la evenimente pe măsură ce acestea se întâmplă. Browserele implementează acest lucru oferind posibilitatea de a înregistra funcții de gestionare pentru anumite evenimente JavaScript:
Faceți clic pe acest document pentru a activa handlerul.
Funcția addEventListener este înregistrată astfel încât al doilea argument al său este apelat ori de câte ori are loc evenimentul descris de primul argument.
Evenimente și noduri DOM
Fiecare handler de evenimente din browser este înregistrat cu un context. Când apelați funcția addEventListener, aceasta este apelată ca metodă pentru întreaga fereastră, deoarece în browser intervalul global este echivalent cu obiectul fereastră. Fiecare element DOM are propria sa metodă addEventListener, care vă permite să urmăriți evenimentele din acest element special:
Nu există niciun handler aici.
În acest exemplu, handlerul este conectat la nodul buton. Evenimentele mouse-ului JavaScript declanșează handlerul, dar un clic pe restul documentului nu.
Setând atributul onclick pe nod, obținem același rezultat. Dar un nod are doar un atribut onclick, așa că puteți înregistra un singur handler pentru fiecare nod. Metoda addEventListener vă permite să adăugați orice număr de handlere. Astfel suntem asigurați împotriva înlocuirii accidentale a unui procesor care a fost deja înregistrat.
Metoda removeEventListener este apelată cu aceleași argumente ca addEventListener. Îndepărtează handlerul:
Pentru a anula o funcție de gestionare, îi dăm un nume (de exemplu, o singura data). Acesta este modul în care îl transmitem atât addEventListener, cât și removeEventListener.
Obiecte eveniment
Deși nu am menționat acest lucru în exemplele de mai sus, un argument este transmis funcției JavaScript de gestionare a evenimentelor: obiectul eveniment. Oferă informații suplimentare despre eveniment. De exemplu, dacă vrem să știm ce buton al mouse-ului a fost apăsat, trebuie să obținem valoarea proprietății a cărui obiect eveniment:
Informațiile stocate în obiect diferă în funcție de tipul de eveniment. Proprietatea de tip a obiectului conține întotdeauna un șir care identifică evenimentul (de exemplu, „ clic" sau " jos mouse-ul«).
Răspândirea
Manageri de evenimente ( de exemplu, evenimente tactile JavaScript) înregistrate pentru nodurile părinte vor primi și evenimente care se întâmplă pe copii. Dacă s-a făcut clic pe un buton din interiorul unui paragraf, gestionatorii de evenimente ai paragrafului vor primi și un eveniment de clic.
Evenimentul se propagă de la nodul în care a avut loc, la nodul părinte și la rădăcina documentului. După ce toți handlerii înregistrați într-un anumit nod au intrat în vigoare pe rând, handlerii înregistrați pentru întreaga fereastră au posibilitatea de a răspunde la eveniment.
În orice moment, un handler de evenimente poate apela metoda stopPropagation pe obiectul eveniment pentru a preveni propagarea în continuare a evenimentului. Acest lucru poate fi util atunci când aveți un buton în interiorul altui element interactiv și nu doriți ca comportamentul setat pentru a face clic pe elementele exterioare să fie activat atunci când butonul este apăsat.
În exemplul următor, înregistrăm handlere " Mouse Down»Atat pentru buton cat si pentru paragraf. Când faceți clic dreapta ( Evenimente mouse JavaScript) handlerul apelează metoda stopPropagation, care împiedică pornirea handler-ului de paragraf. Când butonul este apăsat cu un alt buton al mouse-ului, ambele handlere sunt lansate:
Paragraf și în el .
Majoritatea obiectelor eveniment au o proprietate țintă care indică nodul în care au avut loc. Puteți folosi această proprietate pentru a evita gestionarea accidentală a unui eveniment care se propagă în sus de la nod.
De asemenea, puteți utiliza o țintă de eveniment JavaScript pentru a extinde intervalul unui eveniment de un anumit tip. De exemplu, dacă aveți un nod care conține o listă lungă de butoane, este mai convenabil să înregistrați un handler de clic pentru nodul extern și să utilizați proprietatea țintă pentru a urmări dacă s-a făcut clic pe butonul, mai degrabă decât să înregistrați instanțe de handler pentru toate butoanele:
Acțiuni implicite
Multe evenimente au acțiuni implicite asociate cu ele. Dacă faceți clic pe link, veți fi direcționat către elementul țintă al linkului. Dacă faceți clic pe săgeata în jos, browserul va derula în jos pe pagină. Dacă faceți clic dreapta pe mouse, se va deschide un meniu contextual.
Pentru majoritatea tipurilor de evenimente, handlerele de evenimente JavaScript sunt apelate înainte de a fi efectuate acțiunile implicite. Dacă nu doriți ca comportamentul implicit să ruleze, trebuie să apelați metoda preventDefault pe obiectul eveniment.
Utilizați-l pentru a implementa comenzi rapide personalizate de la tastatură sau meniuri contextuale. Sau, pentru a anula comportamentul la care se așteaptă utilizatorii. Mai jos este un link care nu poate fi urmat:
MDN
Încercați să nu faceți acest lucru decât dacă aveți un motiv convingător pentru a face acest lucru.
În funcție de browser, este posibil ca unele evenimente să nu fie interceptate. În Google Chrome, de exemplu, comanda rapidă de la tastatură ( cod cheie pentru eveniment JavaScript) pentru a închide fila curentă ( Ctrl-W sau Command-W) nu poate fi analizat cu JavaScript.
Evenimente-cheie
Când utilizatorul apasă o tastă de pe tastatură, browserul declanșează „ Tasta în jos". Când eliberează cheia, evenimentul „ tastare«:
Această pagină devine violet când apăsați tasta V.
Acest eveniment este declanșat și atunci când utilizatorul apasă și ține apăsată o tastă sau când tasta este apăsată. De exemplu, dacă doriți să creșteți viteza personajului din joc apăsând tasta săgeată și să o micșorați din nou prin eliberarea tastei, atunci trebuie să aveți grijă să nu măriți viteza de fiecare dată când tasta este apăsată.
Exemplul anterior a folosit proprietatea cod de cheie JavaScript a obiectului eveniment. Acesta determină ce tastă a fost apăsată sau eliberată. Nu este întotdeauna evident cum să traduceți codul tastei numerice în cheia reală.
Codul caracterelor Unicode este folosit pentru a citi valorile tastelor cu litere și cifre. Este asociat cu litera ( majuscule) sau numărul indicat pe cheie. Metoda charCodeAt pentru șiruri vă permite să obțineți această valoare:
console.log ("Violet" .charCodeAt (0)); // → 86 console.log ("1" .charCodeAt (0)); // → 49
Alte chei au coduri mai puțin previzibile asociate cu ele. Cel mai bun mod de a afla codul pe care îl doriți este să experimentați. Înregistrați un handler de evenimente de apăsare de taste care captează codurile de cheie pe care le primește și apăsați tasta dorită.
Tastele precum Shift, Ctrl, Alt generează evenimente ca tastele obișnuite. Dar când urmăriți combinațiile de taste, puteți, de asemenea, să vă dați seama dacă acele taste sunt apăsate uitându-vă la proprietățile evenimentelor de la tastatură și mouse JavaScript: shiftKey, ctrlKey, altKey și metaKey:
Apăsați Ctrl-Space pentru a continua.
Evenimente " Tasta în jos" și " tastare»Oferiți informații despre tastele efective. Dar dacă vrem textul de intrare în sine? Obținerea de text din codurile de cheie este incomod. Pentru aceasta există un eveniment, " apăsarea tastei„Care se declanșează imediat după” Tasta în jos". Se repetă cu „keydown” în timp ce tasta este apăsată. Dar numai pentru tastele cu care introduci caractere.
Proprietatea charCode de pe obiectul eveniment conține cod care poate fi interpretat ca un cod de caracter Unicode. Putem folosi funcția String.fromCharCode pentru a converti acest cod într-un singur șir de caractere.
Setați accentul pe această pagină și introduceți ceva.
Nodul DOM pe care are loc evenimentul depinde de elementul care a avut focalizarea de intrare când a fost apăsată tasta. Nodurile obișnuite nu pot avea focalizare de intrare ( cu excepția cazului în care setați atributul tabindex pentru ele), dar elemente precum linkurile, butoanele și câmpurile de formulare pot.
Dacă niciun element specific nu are focalizare, atunci document.body este nodul țintă pentru evenimentele cheie și evenimentele tactile JavaScript.
Clic de mouse
Apăsarea butonului mouse-ului declanșează și o serie de evenimente. Evenimente " jos mouse-ul" și " mouse-ul„Asemănător cu” Tasta în jos" și " tastare". Acestea rulează când butonul mouse-ului este apăsat și eliberat. Aceste evenimente sunt declanșate pe nodurile DOM care au trecut cu mouse-ul deasupra când evenimentul a fost declanșat.
Pentru un nod comun, căruia i-au aparținut atât apăsarea, cât și eliberarea butonului mouse-ului, după eveniment " mouse-ul"Evenimentul" clic". De exemplu, dacă apăsați butonul mouse-ului pe un articol, apoi mutați cursorul la alt element și eliberați butonul, atunci evenimentul „ clic„Va apărea pe un element care conține ambele aceste elemente.
Dacă două clicuri au avut loc aproape unul de celălalt, evenimentul „ dblclick"(Dublu click). Apare după al doilea clic. Pentru a obține informații exacte despre locul în care a avut loc evenimentul mouse-ului, trebuie să obțineți valoarea proprietăților pageX și pageY, care conțin coordonatele evenimentului (în pixeli) relativ la colțul din stânga sus al documentului.
Mai jos este implementarea unui program de vopsea primitiv. De fiecare dată când faceți clic cu mouse-ul în document (sub cursor), se adaugă un punct:
Proprietățile clientX și clientY sunt similare cu pageX și pageY, dar se referă la partea vizibilă a documentului. Ele pot fi folosite pentru a compara coordonatele mouse-ului cu coordonatele returnate de funcția getBoundingClientRect.
Mișcarea mouse-ului
De fiecare dată când cursorul mouse-ului se mișcă, evenimentul " mousemove„Din setul de evenimente mouse JavaScript. Poate fi folosit pentru a urmări poziția mouse-ului. Acesta este utilizat atunci când se implementează capacitatea de glisare și plasare a elementelor cu mouse-ul.
În exemplul următor, programul afișează un panou și setează handlere de evenimente, astfel încât panoul să devină mai îngust sau mai lat pe măsură ce trageți:
Trageți marginea panoului pentru a-i modifica lățimea:
Rețineți că handlerul " mousemove»Este înregistrat pentru toată fereastra. Chiar dacă mouse-ul părăsește panoul în timpul redimensionării, totuși actualizăm lățimea panoului și oprim evenimentele tactile JavaScript când butonul mouse-ului este eliberat.
Trebuie să încetăm să redimensionăm panoul când utilizatorul eliberează butonul mouse-ului. Din păcate, nu toate browserele setează „ mousemove„Proprietate care. Există un buton de proprietate standard care oferă informații similare, dar nu este acceptat de toate browserele. Din fericire, toate browserele majore acceptă un singur lucru: fie butoane, fie care. Funcția buttonPressed din exemplul de mai sus încearcă mai întâi să folosească proprietatea butoane, iar dacă nu este disponibilă, merge la care.
Când cursorul mouse-ului trece peste sau părăsește un nod, evenimentele " mouse-ul peste" sau " mouseout". Acestea pot fi folosite pentru a crea efecte de trecere cu mouse-ul, pentru a afișa o semnătură sau pentru a schimba stilul unui element.
Pentru a crea un astfel de efect, nu este suficient să începeți să-l afișați atunci când evenimentul „ mouse-ul peste„Și se încheie după eveniment” mouseout". Când mouse-ul se mută de la un nod la unul dintre copiii săi, „ mouseout". Deși indicatorul mouse-ului nu a părăsit intervalul de răspândire al nodului.
Pentru a înrăutăți lucrurile, aceste evenimente JavaScript sunt propagate în același mod ca și alte evenimente. Când mouse-ul părăsește unul dintre nodurile copil pentru care este înregistrat un handler, evenimentul „ mouseout«.
Pentru a rezolva această problemă, puteți utiliza proprietatea relatedTarget a obiectului eveniment. În cazul unui eveniment" mouse-ul peste„Indică ce element a fost trecut anterior cu mouse-ul. Și în cazul apariției " mouseout„- la ce element este mutat indicatorul. Vom schimba efectul de hover numai atunci când ținta asociată se află în afara nodului nostru țintă.
În acest caz, schimbăm comportamentul deoarece cursorul mouse-ului trecea peste nod din afara acestuia (sau invers):
Treceți mouse-ul peste aceasta paragraf.
Funcția isInside ține evidența legăturilor părinte ale unui nod dat sau până când se ajunge la partea de sus a documentului (când nodul este zero). Sau elementul părinte de care avem nevoie nu va fi găsit.
Efectul de trecere cu mouse-ul este mult mai ușor de creat cu: pseudoselectorul CSS hover, așa cum se arată în exemplul următor. Dar când efectul de hover sugerează ceva mai complex decât simpla schimbare a stilului nodului țintă, atunci trebuie să utilizați " mouse-ul peste" și " mouseout» ( Evenimente mouse JavaScript):
Defilați evenimente
De fiecare dată când elementul este derulat, un eveniment de defilare JavaScript este declanșat asupra acestuia. Poate fi folosit pentru a urmări ceea ce este în acest moment vizualizările utilizatorului; pentru a dezactiva animația în afara ferestrei de vizualizare.
În exemplul următor, afișăm o bară de progres în partea dreaptă colțul de sus documentați-l și actualizați-l astfel încât să umple părțile cu o culoare diferită pe măsură ce derulați în jos în pagină:
Derulează-mă...
Prin setarea unui element pe poziție sau fix, obținem același rezultat ca și setarea poziției: absolut. Dar acest lucru blochează și elementul să defileze împreună cu restul documentului. Ca urmare, indicatorul de progres va fi fixat static în colțul de sus. În interior se află un alt element, care este redimensionat în funcție de progresul curent.
Folosim% ca unitate de măsură când setăm lățimea, nu px, astfel încât dimensiunea elementului să se redimensioneze proporțional cu dimensiunea barei de progres.
Variabila globală innerHeight conține înălțimea ferestrei, pe care trebuie să o scădem din înălțimea totală disponibilă pentru derulare a documentului. Nu puteți derula în jos în fereastră când ajungeți în partea de jos a documentului. InnerWidth poate fi folosit și cu innerHeight. Prin împărțirea paginiiYOffset ( poziţia curentă a casetei de defilare) cu poziția de derulare maximă permisă și înmulțind cu 100, obținem procentul pentru bara de progres.
Apelarea preventDefault la evenimentul de defilare JavaScript nu împiedică derularea. Managerul de evenimente este apelat numai după ce are loc derularea.
Focus evenimente
Când un element are focalizare de intrare, browserul declanșează „ se concentreze". Când focalizarea de intrare este eliminată, evenimentul " estompa«.
Aceste două evenimente nu se răspândesc. Handler element părinte nu este notificat când un copil se concentrează.
Următorul exemplu afișează un indiciu pentru casetă de text care este în prezent în atenție:
Nume:
Vârstă:
Obiectul fereastră primește evenimente " se concentreze" și " estompa„Când utilizatorul navighează sau părăsește o filă, fereastra browserului în care este afișat documentul.
Încărcare eveniment
Când pagina s-a terminat de încărcat, evenimentul JavaScript „încărcare” este lansat pentru corpul documentului și obiectele fereastră. Este folosit pentru a programa inițierea acțiunilor care necesită încărcarea întregului document. Nu uitați că conținutul
Uneori este necesar să anulăm o funcție pe care am planificat-o. Acest lucru se face prin stocarea valorii returnate a funcției setTimeout și apelând clearTimeout pe aceasta:
var bombTimer = setTimeout (funcție () (console.log ("BOOM!");), 500); dacă (Math.random ()< 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
Funcția cancelAnimationFrame funcționează la fel ca clearTimeout. Este apelat de valoarea returnată de requestAnimationFrame pentru a anula cadrul ( dacă nu a fost sunat încă).
Un set similar de funcții, setInterval și clearInterval, sunt folosite pentru a seta un cronometru care ar trebui să repete o acțiune la fiecare X milisecunde:
var ticks = 0; var clock = setInterval (funcție () (console.log ("bif", ticks ++); if (bif == 10) (clearInterval (ceas); console.log ("stop.");)), 200) ;
Despărțirea
Unele tipuri de evenimente se pot declanșa de multe ori într-o perioadă scurtă de timp ( de exemplu „mousemove” și evenimentul de defilare javascript). Atunci când gestionați astfel de evenimente, trebuie să aveți grijă ca acest lucru să nu se producă pentru foarte mult timp, în caz contrar, handlerul va efectua acțiunea atât de mult încât interacțiunea cu documentul va deveni lentă și spasmodică.
Dacă trebuie să faceți ceva non-standard într-un astfel de handler, puteți utiliza setTimeout pentru a vă asigura că nu durează prea mult. Acest lucru este denumit în mod obișnuit zdrobirea evenimentului. Există mai multe abordări diferite pentru zdrobire.
În primul exemplu, vrem să facem ceva când utilizatorul scrie. Dar nu vrem să facem asta după fiecare eveniment de apăsare de taste. Când utilizatorul scrie rapid, trebuie să așteptați până când apare o pauză. În loc să executăm imediat acțiunea în gestionarea evenimentelor, am stabilit o întârziere. De asemenea, ștergem întârzierea anterioară ( dacă există). Dacă evenimentele au loc la intervale scurte ( mai mică decât întârzierea stabilită de noi), atunci întârzierea de la evenimentul anterior este anulată:
Transmiterea unei valori nedefinite către clearTimeout sau apelarea acesteia pentru o întârziere care este deja în curs, nu va avea niciun efect. Nu mai trebuie să fim atenți când să-l sunăm, doar o facem pentru fiecare eveniment.
Puteți utiliza un scenariu diferit dacă trebuie să separați răspunsurile într-o perioadă scurtă de timp. Dar pentru ca în același timp să fie lansate în timpul unei serii de evenimente, și nu doar după aceasta. De exemplu, puteți trimite ca răspuns la evenimente „ mousemove» ( Evenimente mouse JavaScript) coordonatele curente ale mouse-ului, dar numai la fiecare 250 de milisecunde:
Concluzie
Managerii de evenimente ne permit să detectăm și să răspundem la evenimente asupra cărora nu avem control direct. Metoda addEventListener este folosită pentru a înregistra un astfel de handler.
Fiecare eveniment îi aparține un anumit tip (« Tasta în jos«, « se concentreze„Și așa mai departe) care îl identifică. Cele mai multe evenimente sunt declanșate pentru un anumit element DOM și apoi propagate la nodurile părinte ale elementului. Acest lucru permite manipulatorilor asociați cu aceste elemente să le proceseze.
Când handlerul este apelat, obiectul eveniment îi este transmis cu Informații suplimentare despre acțiune. Acest obiect conține și metode pentru a opri propagarea ulterioară a evenimentului ( stopPropagare) sau împiedicați browserul implicit să gestioneze evenimentul ( preventDefault).
Apăsarea tastelor ridică evenimentele " Tasta în jos«, « apăsarea tastei" și " tastare". Făcând clic cu mouse-ul, se ridică evenimentele " jos mouse-ul«, « mouse-ul" și " clic". Mișcarea mouse-ului - " mousemove«, « mouseenter" și " mouseout«.
Evenimentul de defilare JavaScript poate fi definit folosind „ sul
