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:

- "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:



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

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.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">
<!--
  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)
Obiecte Reset, Submit, Select, ... <<-- Anterior --- Urmator -->> Inregistrare Detectare Evenimente

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag adauga imagine in pagina web?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Care din aceste coduri CSS afiseaza textul inclinat?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Clic pe functia jQuery care ascunde animat un element HTML.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Clic pe functia definita corect in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Indicati forma pentru Prezent Perfect Continuu a verbului "to walk" (a merge).
have walked have been walking be walking
I have been walking for 5 hours.
- Merg pe jos de 5 ore.
Indicati Trecutul Nedefinit pentru verbul "ser" (a fi) la forma Yo.
será sería fui
Yo fui entrenador.
- Am fost antrenor.
Evenimente JavaScript - Tutorial JavaScript