Cauta rapid aici ↑

Evenimente in JavaScript

Evenimentele in JavaScript pot fi catalogate in doua feluri. Evenimente produse de catre browser si evenimente produse de catre vizitatorul pagini web, acestea din urma fiind mai multe. Anumite tag-uri HTML au incorporate ca setare de baza diferite evenimente. Tag-ul a are ca setare de baza evenimentul click iar fereastra browserului are ca setare de baza sa declanseze evenimentul load in momentul cand sa terminat incarcarea documentului HTML.

Evenimente produse de catre browser

Lista evenimentelor pe care un browser le produce este foarte scurta si de aceasta ne vom ocupa mai intai. Pe langa evenimentul load , browser-ele ne ofera si opusul acestuia, unload cu care putem face ceva, putem sa rulam un program ce va putea afisa o alerta sau orice ne dorim, de fapt putem face asta indiferent de ce eveniment se efectueaza. Modalitatea prin care putem sa rulam un program la un eveniment produs de catre browser sau vizitator poate fi facuta in doua feluri:

  • -- declararea pe tag-ul cu pricina a evenimentului ce se doreste a fi interceptat si programul sau numele functiei prin modalitatea deja cunoscuta atribut cu valoare;
  • -- declararea in alta parte a documentului HTML sau intr-un fisier separat a evenimentului ce se doreste a fi interceptat pe un element dar si programul ce va rula cand acel eveniment este captat;

Declararea pe tag

Asa cum spuneam, in cazul ferestrei browser-ului, in momentul cand intreg documentul a fost incarcat, se declanseaza evenimentul load . Cum toate elementele HTML vizibile in browser sunt declarate in interiorul tag-ului body , pe acesta vom declara evenimentul si ce program sau functie sa ruleze cand browser-ul a terminat de incarcat pagina HTML.

Puteti observa cu ochiul liber ca inaintea evenimentului load am scris si literele on. Aceasta este modalitatea corecta prin care putem sa declaram evenimentul ce se asteapta pe acel tag.

Opusul acestuia este unload si se intampla in momentul cand vizitatorul doreste sa inchida respectiva fereastra si apasa butonul rosu din dreapta sus sau cu ajutorul tastelor Alt + F4 , ce are acelasi efect.

Inainte de a da curs cereri vizitatorului, putem sa rulam un program care ii va afisa vizitatorului o alerta sau altceva ne dorim. Browserele mai noi nu mai suporta acest eveniment considerand ca in momentul in care vizitatorul doreste sa inchida acea fereastra, acesta chiar vrea sa inchida fereastra pentru ca si-a terminat treaba cu acel tab.

Aceste doua evenimente nu sunt singurele efectuate de catre browser, dar sunt cele mai importante, de fapt cel mai folosit eveniment este load.

Declararea in alta parte a documentului HTML sau intr-un fisier extern

Putem sa declaram in alta parte programele noastre la evenimentele pe care ne dorim sa le interceptam. Pentru a realiza asta va trebui sa folosim metoda addEventListener(). Aceasta metoda suporta trei parametrii.

Primul este reprezentat de catre evenimentul pe care vrem sa il interceptam pe acel element HTML si va fi pus intre ghilimele duble, al doilea parametru este reprezentat de o functie anonima ce va rula sau numele functiei ce va rula, ea fiind declarata inainte de aceasta declaratie, iar al treilea paramentru este unul dintre cuvintele true sau false, reprezentand daca respectiva functie sa ruleze sincron sau asincron.

Pentru fiecare metoda exista si opusul acesteia. Pentru a inlatura sau anula ceea ce am setat sa faca metoda addEventListener() va trebui ori sa comentam acel bloc de cod si in acest mod acesta nu va mai rula ori vom folosi metoda removeEventListener() ce functioneaza la fel ca si addEventListener().

Propagarea evenimentelor

In momentul cand declaram sa fie interceptat un eveniment, indiferent de modalitatea pe care o facem, acel eveniment se propaga si la elementul parinte din care face parte si tot asa. Pentru a nu lasa ca acel eveniment sa se propage mai departe vom folosi metoda stopPropagation().

In acest mod am facut cunostinta si cu proprieatatea event. Aceasta proprietate intercepteaza toate evenimentele pe care le putem efectua in interiorul ferestrei browserului.

Actiuni implicite ale elementelor HTML

Va spuneam in randurile de mai sus ca anumite elemente HTML au incorporate in interiorul acestora sa suporte anumite evenimente de baza. Tag-ul pereche a suporta evenimentul click iar tag-ul input poate comunica cu tastatura si in cele din urma mouse-ul suporta si el anumite evenimente, printre care click si scroll.

In momentul in care vrem sa rulam un program la acelasi eveniment pe care unele tag-uri HTML le au ca setare de baza, browserul ruleaza mai intai programul din JavaScript si mai apoi daca mai este cazul ruleaza ceea ce este setat sa ruleze ca setare de baza prin acel tag HTML.

In acest exemplu am facut cunostinta si cu metoda preventDefault(). Aceasta metoda face ca script-ul nostru sa ruleze asa cum ne dorim, impiedicand setarea de baza pe care o are acest tag HTML. Aceasta metoda poate fi folosita oriunde avem ca setare de baza diferite evenimente. Putem sa dezactivam click dreapta de la mouse, dar nu este suficienta doar aceasta metoda, sau putem sa dezactivam folosirea tastaturii atunci cand este sau nu este nevoie de aceasta. In acest caz va trebui sa ii oferim utilizatorului o tastatura virtuala creata de noi sau descarcata din alta parte.

Eu personal nu recomand dezactivarea setarilor de baza si asta pentru ca ii poate crea utilizatorului o idee proasta despre site-ul nostru. Utilizatorului trebuie sa ii cream o experienta placuta cu scopul ca acesta sa se intoarca in site-ul nostru.

Evenimente de la tastatura

JavaScript poate interactiona cu tastatura si face asta prin trei evenimente. Evenimentele sunt declansate in momentul cand este apasat o tasta, eliberat o tasta sau tinerea continua pe o anumita tasta.

Evenimentul keydown

JavaScript intercepteaza acest eveniment in momentul cand o tasta a fost apasata, doar prima parte a apasari unei taste fara a elibera tasta sau tine apasat continuu pe aceasta.

Evenimentul keyup

JavaScript intercepteaza acest eveniment in momentul in care tasta este eliberata, este ridicat degetul de pe acea tasta.

Evenimentul keypress

JavaScript intercepteaza acest eveniment in momentul cand pe o tasta este tinut degetul apasat mai mult timp. Practic apasam pe o tasta si nu o eliberam decat atunci cand ne dorim.

Aflarea codurilor pentru fiecare tasta in parte

Dupa cum am vazut mai sus, evenimentele de la tastatura sunt foarte putine, doar trei la numar. JavaScript ne ofera posibilitatea sa aflam ce tasta a apasat acel utilizator in pagina noastra web. Modalitatea prin care putem face acest lucru este sa folosim proprietatea keyCode pe care o vom lega de event. Fiecare tasta are o valoare numerica iar interpretorul JavaScript ne va arata o alerta cu numarul de identificare al fiecarei taste pe care o apasam, daca vom folosi programul de mai jos.

In exemplul anterior am facut cunostinta si cu obiectul window. Acesta reprezinta obiectul parinte al tuturor obiectelor si face referire la fereastra browser-ului.

Evenimentul click, mousedown si mouseup

Evenimentul click

Acest eveniment nu mai are nevoie de prezentare. Evenimentul click este cel mai cunoscut si cu totii stim ce face el.

Evenimentul mousedown

Evenimentul mousedown reprezinta prima parte a actiuni pe care o efectuam cu mouse-ul. Este practic descompunerea evenimentului click doar ca reprezinta prima parte, apasarea butonului.

Evenimentul mouseup

Evenimentul mouseup reprezinta a doua parte a actiuni pe care o efectuam cu mouse-ul. Este practic descompunerea evenimentului click doar ca reprezinta a doua parte, eliberarea butonului.

Evenimentul mouseover, mouseenter si mouseleave

Evenimentul mouseover

Evenimentul mouseover reprezinta survolarea, trecerea mouse-ului peste un element din pagina web. In cazul in care vrem sa rulam un program JavaScript in momentul in care mouse-ul trece peste un element HTML, prin aceasta modalitate o putem face. Daca ne dorim doar sa stilizam un element HTML in momentul in care mouse-ul trece peste sau este deasupra unui element HTML atunci putem folosi pseudo-clasa CSS :hover pe acel element.

Evenimentul mouseenter

Evenimentul mouseenter este declansat in momentul in care mouse-ul intra in spatiul unde se afla elementul cu pricina pentru care vrem sa captam acest eveniment si la fel ca la celelante evenimente putem sa rulam un program JavaScript.

Evenimentul mouseleave

Evenimentul mouseleave este declansat in momentul in care mouse-ul pleaca din spatiul in care se afla elementul unde ne dorim sa captam acest eveniment.

Evenimentul scroll

In momentul cand pe un element HTML sau in fereastra browser-ului se efectueaza scroll de la rotita mouse-ului sau din sagetile de la tastatura, browser-ul declanseaza evenimentul scroll si la fel ca si la celelante evenimente putem rula un program.

Evenimentul focus si blur

Evenimentul focus

Acest eveniment este special creat pentru elementele formularului si este declansat in momentul cand un tag input este focusat, selectat, se da click pe el. Daca ne dorim sa rulam un program pe un tag de input in momentul cand acesta este focusat, atunci ar fi momentul. Daca ne dorim doar sa stilizam putin acel tag de input, atunci ar fi cazul sa folosim pseudo-clasa CSS :focus.

Evenimentul blur

Evenimentul blur este declansat in momentul cand un tag de input este deselectat, defocusat. In acel moment putem sa rulam un program prin care putem face validarea acelui camp de input sau orice altceva ne dorim.

Evenimentul input

Acest eveniment este mai nou si vine odata cu noul standard. Evenimentul input este declansat in momentul in care utilizatorul insereaza anumite litere, cifre sau caractere speciale intr-un tag input. In exemplul urmator il voi folosi pentru a ne returna un rezultat.

In exemplul anterior am folosit metoda parseInt() ce nu face altceva decat sa converteasca la numar o valoare dintr-un string. Toate datele ce sunt introduce intr-un tag input sunt convertite la date de tip string automat si cu ajutorul metodei parseInt() aceste date, daca se va putea, vor fi convertite in date de tip numeric, in caz contrar vom avea rezultatul NaN in interiorul tag-ului output ce are ca rol principal sa afiseze un rezultat. Este foarte important sa folosim in interiorul tag-ului output atributul for ce are rolul de a declara ce tag-uri participa la operatie reprezentate prin id unic.

Putem face mai mult de atat cu ajutorul acestui eveniment input. Putem sa validam in timp real ceea ce scrie utilizatorul intr-un camp de input. Avem o libertate destul de mare si nimic nu ne impiedica sa validam in acest mod un formular. Putem sa corectam ceea ce scrie utilizatorul intr-un tag input, folosindu-ne de expresiile regulate. Daca utilizatorul scrie anumite cuvinte sau caractere speciale pe care nu ni le dorim, putem creea un program care sa ruleze in momentul in care utilizatorul scrie ceva in tag-ul input.

Evenimentul mousemove

Acest eveniment este declansat in momentul in care mouse-ul se misca deasupra unui element HTML sau in fereastra browser-ului iar in exemplul urmator, impreuna cu doua noi proprietatii va voi afisa pozitia mouse-ului in timp real. Voi nu trebuie decat sa miscati mouse-ul in urmatorul spatiu alb. In interiorul acestuia veti vedea pozitia in pixeli pe axele X si Y. Imediat dupa acest spatiu aveti script-ul care face acest lucru.

In browser vom avea acest rezultat.

Daca vreti sa aflati mai repede ce cod numeric are o tasta de la calculatorul dvs., dati click stanga in dreptunghiul de mai jos si apoi apasati orice tasta iar o fereastra noua se va deschide cu codul numeric pentru respectiva tasta. Aveti grija sa setati din browser ca ferestrele pop-up sa se poata deschida. Inainte de toate, nu uitati sa da-ti click in urmatorul dreptunghi.