Evenimente JavaScript 7

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=”http://www.discant.net”
  OnMouseOver=”this.style.color=’red’;”
  OnMouseOut=”alert(‘Fereastra deschisa cu onMouseOut’)”>
Apasa aici pentru a vizita Discant.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 Discant.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 Discant.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”>
<!–
  function urmatorul(elment,text) {
    if (text.length==elment.maxLength) {
      next=elment.tabIndex;
      if (next<document.form3.elements.length) {
        document.form3.elements[next].focus();
      }
    }
  }
//–>
</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)