Evenimentele sunt actiuni efectuate de utilizator in pagina web.
De exemplu, click-ul sau pozitionarea cursorului pe un element, scrierea intr-o caseta text input, sau derularea paginii, sunt evenimente efectuate de utilizator.
Pentru a putea executa un anumit cod JS cand un eveniment e declansat, JavaScript contine asa numitele "event handlers" (manipulatoare de evenimente), precum: onclick, onmouseover, onkeypress, onscroll, etc.

Inregistrare event handlers

Metoda veche de a executa anumite instructiuni, sau o functie cand un eveniment e declansat, e prin adaugarea acestuia in tag-ul HTML in care evenimentul trebuie detectat.
De exemplu, cand un utilizator apasa click pe acest link, "onclick" detecteaza aceasta actiune si apeleaza functia oFunctie():
<a href="#" onclick="oFunctie();" title="Text">Link</a>

• Se pot inregistra "event handlers" fara a-le adauga in tag-ul HTML.
Cea mai buna metoda de inregistrare de detectare a evenimentelor, care e cross–browser (recunoscuta in toate principalele navigatoare web), este cu aceasta sintaxa:
element.event_handler = oFunctie;
- element reprezinta elementul ce declanseaza evenimentul respectiv (event_handler), care va executa functia oFunctie.
- Observati ca la inregistrarea evenimentului nu se folosesc parantezele () la numele functiei accesate.

Exemplu, la click pe un anumit DIV, e afisata o fereastra Alert:
<div id="dvid" style="width:100px; background:#a8eda9; cursor:pointer;">Click here</div>
<script type="text/javascript"><!--
var elm = document.getElementById('dvid');         // preia elementul

// functie executata cand se produce evenimentul
function oFunctie() {
  alert('Eveniment click detectat');
}

// inregistrare event handler onclick
elm.onclick = oFunctie;
--></script>
Demo:
Click aici

Event handler si functie anonima

Functia apelata la declansarea evenimentului poate fi creata direct in expresia de inregistrare a event handler-ului.
Sintaxa:
element.event_handler = function() { // codul ce va fi executat };
Exemplu:
<div id="dvid" style="width:100px; background:#a8eda9; cursor:pointer;">Click aici</div>
<script type="text/javascript"><!--
var elm = document.getElementById('dvid');         // preia elementul

// inregistrare event handler onclick
elm.onclick = function() {
  alert('Detectare click - functie anonima');
};
--></script>
Demo:
Click aici

• Pentru a sterge detectarea evenimentului, i-se atribuie valoarea null :
element.event_handler = null;
- Exemplu. Cand utilizatorul plaseaza cursorul peste DIV-ul cu id="dvid", se afiseaza o fereastra Alert, apoi se sterge detectarea "onmouseover" la acel element, astfel, cand utilizatorul muta a doua oara cursorul peste acel DIV nu se intampla nimic.
<div id="dvid" style="width:100px; background:#a8eda9;">Mutati cursorul aici.</div>
<script type="text/javascript"><!--
var elm = document.getElementById('dvid');         // preia elementul

// inregistrare event handler onmouseover
elm.onmouseover = function() {
  alert('Plasati inca o data cursorul pe acel text');
  elm.onmouseover = null;            // sterge inregistrarea
};
--></script>
Demo:
Mutati cursorul aici.

Cuvantul this

In JavaScript, cuvantul this (acesta) reprezinta mereu "proprietarul" functiei. In cazul evenimentelor, this reprezinta elementul HTML care declanseaza evenimentul.

- Exemplu. La click pe tag-ul cu id="dvid", JavaScript preia continutul din el, il afiseaza intr-o fereastra Alert, apoi ii modifica culoarea background.
<div id="dvid" style="width:125px; background:#a8eda9; cursor:pointer;">Exemplu cu this</div>
<script type="text/javascript"><!--
var elm = document.getElementById('dvid');         // preia elementul

// inregistrare event handler onclick
elm.onclick = function() {
  // preia continutul HTML din elementul curent (cel ce declanseaza evenimentul)
  var elm_cnt = this.innerHTML;

  alert(elm_cnt);        // alert acel continut

  // setare culoare background la elementul curent
  this.style.background = 'blue';
};
--></script>
Demo (click pe textul urmator):
Exemplu cu this

Inregistrare si Detectare eveniment cu addEventListener()

Exista inca un mod de inregistrare pt. detectarea evenimentelor in pagina web, si anume cu metoda addEventListener().
Sintaxa:
element.addEventListener('event', oFunctie, use_capture);
- event - e un sir cu tipul de eveniment ce trebuie detectat, fara prefixul "on" ("click", "mouseover", "mouseout", ...).
- oFunctie - o functie accesata cand "event" e declansat.
- use_capture - (optional) o valoare booleana (true sau false). Determina daca evenimentul trebuie executat in faza de capturare sau in faza de "bubbling". Daca nu stiti sigur ca trebuie intr-o faza anume, folositi false (bubbling).
Aceasta metoda nu e suportata de toate navigatoarele web principale, astfel ca e mai bine sa folositi modul traditional, prezentat mai sus.

- Exemplu. Cand mouse-ul e deasupra unui element LI, capata o culoare de fundal verde, cand cursor-ul iese din zona acelui <li> se elimina culoarea de fundal.
<ul>
 <li>WebDevelopment - www.coursesweb.net</li>
 <li>Cursuri gratuite - marplo.net</li>
 <li>Manual PHP - www.php.net</li>
</ul>
<script type="text/javascript"><!--
var elm_li = document.getElementsByTagName('li');         // preia toate tag-urile <li>

// functie executata la mouseover
function over() {
  // seteaza o culoare de fundal la elementul curent
  this.style.background = '#07da08';
}

// functie executata la mouseout
function out() {
  // sterge culoarea de fundal a elementului curent
  this.style.background = 'none';
}

// parcurge obiectul cu elementele LI
for(var i=0; i<elm_li.length; i++) {
  // inregistrare mouseover si mouseout la fiecare LI
  elm_li[i].addEventListener('mouseover', over, true);
  elm_li[i].addEventListener('mouseout', out, false);
}
--></script>
Demo (miscati cursorul pe lista de jos):

• Pentru a sterge inregistrarea de detectare a unui eveniment cu addEventListener(), se foloseste metoda removeEventListener():
element.removeEventListener('event', oFunctie, false);

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Inregistrare Detectare Evenimente

Last accessed pages

  1. Coduri pt culori (1681)
  2. Zoo Amigos (943)
  3. Butterfly Kyodai (5680)
  4. Bubbles3 (8791)
  5. The Rise Of Atlantis (1521)

Popular pages this month

  1. Bubbles3 (3366)
  2. Gramatica limbii engleze - Prezentare Generala (3170)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2266)
  4. Butterfly Kyodai (2168)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (1918)