Cuprins

Lecția 9: JavaScript Continuare

Tutorial

În lecția de astăzi vom învătă câteva evenimente din JavaScript. În lecția precedentă am învățat deja de evenimentul onClick care specifica ce trebuie să se întâmple când se dă click pe un element din pagina HTML. Astăzi vom continua să învățăm despre evenimentele:

Evenimentele onmousedown, onmouseup, onmousemove, onmouseover, onmouseout, ondblclick se numesc evenimente de mouse, deoarece se realizează în funcție de interacțiunea utilizatorului cu mouse-ul. Evenimentele onfocus, onblur, onchange sunt evenimente ale formularelor și elementelor acestora.

onclick este un eveniment atât de mouse cât și al formularului.

Evenimentul onDblClick

Evenimentul onDblClick este identic cu onClick, singura diferență constând în faptul că acțiunea specificată se realizează când se apasă dublu click pe elementul respectiv în loc de click simplu.

Evenimentele onMouseOver și onMouseOut

onMouseOver - Acționează când se poziționează mouse-ul deasupra unui link sau unei imagini. onMouseOut - Acționează când se mută mouse-ul de pe un link sau o imagine.

Exemplu:

See the Pen raNpxm by andreea (@andreeas) on CodePen.

Evenimentul onMouseMove

Acționează când se mișcă mouse-ul.

Exemplu:

See the Pen dPyJXq by andreea (@andreeas) on CodePen.

Evenimentele onMouseDown si onMouseUp

onMouseDown - Acționează când ținem apăsat unul din butoanele mouse-ului pe un document, buton sau link. onMouseUp - Acțiunea se execută atunci când este eliberat degetul de pe unul din butoanele mouse-ului.

Exemplu:

See the Pen dPyJWQ by andreea (@andreeas) on CodePen.

Evenimentul onFocus

Acțiunea apare când este activat un obiect câmp: casetă password, câmp text, bloc de text, dintr-un formular HTML.

Exemplu:

See the Pen JojMyZ by andreea (@andreeas) on CodePen.

Evenimentul onBlur

Este inversul lui onFocus, este declanșat atunci când un obiect nu mai este activ, prin trecerea la o alta resursă.

Exemplu:

See the Pen bNGaoV by andreea (@andreeas) on CodePen.

Evenimentul onChange

Acțiunea apare când se modifică conținutul unui câmp dintr-un formular HTML (o parolă, text, bloc de text) și când acesta pierde focalizarea.

Exemplu:

See the Pen ogNpGQ by andreea (@andreeas) on CodePen.

Task-uri

1. Creați un dreptunghi și un pătrat. Când mouse-ul este deasupra dreptunghiului, se va colora în albastru. Iar când mouse-ul este desupra pătratului, se va colora în galben. Altfel, rămân albe.

2. Folositi onMouseDown și onMouseUp pentru a schimba o imagine cu alta, atunci când se apasă pe mouse.

3. Creați o căsuță de scris cu mai multe linii. Folosiți evenimentul onBlur pentru a transforma toate literele în litere mici.

4. Creați un vector de string-uri cu link-uri de poze. Folosiți functia Math.random() pentru a alege un link din vector. Odată cu mișcarea mouse-ului se va schimba aleator imaginea background-ului.

5. Folisiți onFocus pe o căsuță de scris cu mai multe linii. Acest eveniment va schimba culoarea căsuței și va adăuga un text. Culoarea se va schimba random. Vezi exemplul de la punctul Evenimentul onMouseMove

6. Folosiți onChange pe un element de tip select care conține nume de eroi. Dacă este selectat eroul preferat, atunci se va apărea o fereastră de tip **alert* cu mesajul: „Ai ghicit eroul meu preferat“, altfel se va afișa alt mesaj.