Evenimente JavaScript

Evenimentele sunt elemente foarte importante in programarea JavaScript. Acestea sunt actiuni provocate de cele mai multe ori de vizitatorul paginii.
Daca vizitatorul apasa un buton din pagina se provoaca evenimentul "Click". Daca mouse-ul este deasupra unui link, se declanseaza un eveniment "MouseOver".
JavaScript poate reactiona la unele evenimente. Aceasta se poate realiza cu ajutorul "event-handlers" (manageri de evenimente sau gestionar de evenimente).
Handlerele de evenimente se adauga ca atribute ale etichetelor HTML.
De exemplu, daca dorim sa apelam o functie "nume_functie()" de fiecare data cand s-a modificat un anumit obiect Text, procedam astfel: atribuim functia "nume_functie()" handlerului de eveniment "onChange" al obiectului Text respectiv, ca in exemplul de mai jos:

<input type="text" size="25" name="nume" onChange="nume_functie(this)">

- "onChange" este atribut al etichetei <input>, a carui valoare, intre ghilimele, este functia "nume_functie()". In locul functiei dintre ghilimele putem sa scriem direct tot codul din functie, separand prin caracterul ; comenzile JavaScript (acest lucru este nerecomandat in cazul unui cod mare).

1. Evenimentele JavaScript

In continuare este prezentata o lista cu evenimentele care pot fi folosite in programarea JavaScript:

onClick - Se executa la apasarea unui click pe un obiect.(document, link, buton, checkbox, buton radio, buton reset sau submit)
onDblClick - Executa actiunea la efectuarea a doua clickuri unul dupa altul
on MouseOver - Actioneaza cand se pozitioneaza mouse-ul deasupra unui link sau unei imagini
onMouseOut - Actioneaza cand se muta mouse-ul de pe un hiperlink sau o imagine
onMouseMove - Actioneaza cand se misca mouse-ul
onMouseDown - Actioneaza cand tinem apasat unul din butoanele mouse-ului, pe un document, buton sau link
onMouseUp - Actiunea se executa atunci cand este eliberat degetul de pe unul din butoanele mouse-ului
onFocus - Actiunea apare cand este activat un obiect camp: caseta password, camp text, bloc de text, camp FileUpload dintr-un formular HTML.
onChange - Actiunea apare cand se modifica continutul unui camp dintr-un formular HTML (o parola, text, bloc de text, sau FileUpload) si cand acesta pierde focalizarea
onBlur - Este inversul lui "onFocus()", este declansat atunci cand un obiect nu mai este activ, prin trecerea la o alta resursa
onLoad - Actioneaza cand browserul a terminat de incarcat un document, imagine sau toate Frame-urile dintr-un <FRAMESET>
onUnload - Actiunea apare cand se iese din un document si se incarca un altul.
onKeydown - Actiunea apare cand se apasa o tasta
onKeyUp - Actiunea apare dupa ce am terminat de apasat pe o tasta
onKeyPress - Apare la apasarea unei taste (precede "KeyDown")
onSubmit - Actiunea apare la inaintare (trimiterea) unui formular
onReset - Actiunea apare la reinitializarea unui formular
onSelect - Actiunea apare cand utilizatorul selecteaza text dintr-un obiect Text sau Textarea.
onAbort - Actiunea se executa in momentul in care se renunta la incarcarea unei imagini, ferestre
onError - Actiunea apare cand actiunea de incarcare a unei imagin sau document esueaza.
onMove - Actiunea se declanseaza cand se comanda deplasarea ferestrei sau cadrului
onResize - Actiunea se declanseaza atunci cand se comanda redimensionarea ferestrei sau cadrului

In continuare sunt prezentate obiectele impreuna cu evenimentele pe care le pot folosi:

Evenimente ale ferestrelor
- - onload
  - onunloavd - onresize: (in Netscape)
  - onmove
  - onabort
  - onerror
  - onfocus
  - onblur
Evenimente de mouse:
- - onmousedown
  - onmouseup
  - onmousemove
  - onmouseover
  - onmouseout
  - ondblclick
  - onclick
Evenimente ale formularelor si elementelor acestora:
- - onsubmit
  - onreset
  - onchange
  - onselect
  - onclick
  - onblur
  - onfocus
Evenimente ale tastelor
- - onkeydown
  - onkeyup
  - onkeypress

2. Exemple cu evenimentele JavaScript

Pentru a intelege mai bine modul de folosire a evenimentelor, studiati cu atentie exemplele de mai jos.

1. - Exemplu "onClick"
Daca dorim executia unei anumite actiuni la apasarea unui click de mouse, folosim "onClick".

<form>
<input type="button" value="Apasa" onClick="alert('Salut')" />
</form>

Acest exemplu deschide o fereastra alert cand este apasat butonul "Apasa".

2. - Exemplu "OnMouseOver - onMouseOut - onClick"

<html>
<head>
<script type="text/javascript">
function setfocus() {
document.form2.camp.select();
}
</script>
</head>
<body>
<br>
<a href="https://marplo.net"
OnMouseOver="this.style.color='red';"
OnMouseOut="alert('Fereastra deschisa cu onMouseOut')">
Apasa aici pentru a vizita MarPlo.net!
</a>
<form name="form2">
<input type="text" name="camp" size="30" value="orice text">
<input type="button" value="Selecteaza" onclick="setfocus()">
</form>
</body>
</html>

Pagina HTML rezultata din acest cod va afisa urmatorul rezultat:
- Cand se pozitioneaza mouse-ul pe legatura "Apasa aici pentru a vizita MarPlo.net!", culoarea textului devine rosu (datorita expresiei "this.style.color='red'" - "this" face referire la obiectul curent care e actionat).
Dupa ce mutati mouse-ul de pe link, se va deschide (prin evenimentul "onMouseOut") o fereastra Alert.
Cand apasati butonul "Selecteaza", va fi selectat textul din campul de text.

Apasa aici pentru a vizita MarPlo.net!

3. - Exemplu "onKeyUp"
Acest script foloseste evenimentul "onKeyUp" pentru a muta cursorul in alt camp dupa ce a fost tastat ultimul caracter permis in caseta.

<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
- Cursorul se muta automat in urmatoarea caseta atunci cand s-a completat tot campul
precedent (cand se ajunge la lungimea stabilita a campului, aici 4 caractere) <br>
<form name="form3">
<input size="4" tabindex="1" name="field" maxlength="4" onkeyup="urmatorul(this,this.value)">
<input size="4" tabindex="2" maxlength="4" onkeyup="urmatorul(this,this.value)">
<input size="4" tabindex="4" maxlength="4" onkeyup="urmatorul(this,this.value)">
</form>
</body>
</html>

- Functia "urmatorul(elment,text)", are doua argumente: "element" (care, prin apel, se refera la caseta "input") si "text" (se refera la valoarea casetei).
In apelul functiei: "urmatorul(this,this.value)", "this" se refera la obiectul curent (reprezinta primul argument) iar al doile argument "this.value" reprezinta valoarea obiectului curent (valoarea din camp).
Observati folosirea evenimentului onKeyup, pentru a se trece la urmatorul camp atunci cand s-a completat ultimul caracter din caseta precedenta.
Pentru a intelege mai bine puteti sa inlocuiti "onkeyup" cu onkeydown pentru a vedea diferenta.
Pagina HTML rezultata din acest cod va afisa urmatorul rezultat:

- Cursorul se muta automat in urmatoarea caseta atunci cand s-a completat tot campul precedent (cand se ajunge la lungimea stabilita a campului, aici 4 caractere)

<<-Obiecte Reset, Submit, Select, .. -- Inregistrare Detectare Evenimente->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care tag afiseaza textul oblic?

<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>

Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?

margin padding position

h3 {
  padding: 2px 0.2em;
}

Clic pe metoda ce returneaza primul element indicat de selectorii specificati.

getElementsByName() querySelector() querySelectorAll()

// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);

Indicati variabila PHP ce contine datele din formular trimise cu method="post".

$_SESSION $_GET $_POST

if(isset($_POST["field"])) {
  echo $_POST["field"];
}

Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".

I They We

We speak english.
- Noi vorbim engleza.

Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".

Ellos Vosotros Nosotros

Nosotros hablamos español.
- Noi vorbim spaniola.