JavaScript - Inregistrare Detectare Evenimente

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 - www.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);
Evenimente JavaScript <<-- Anterior --- Urmator -->> Obiectul image 1

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care meta tag se foloseste pentru scurta descriere a paginii?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 caractere ce descriu continutul paginii" />
Ce proprietate CSS opreste efectul dat de "float"?
clear text-align position
#some_id {
  clear: both;
}
Clic pe metoda ce creaza un array cu toate elementele din pagina cu un anumit nume de tag.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicati functia PHP ce returneaza numarul de elemente dintr-un array.
is_array() count() strlen()
$arr = array(7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "I live (happy)".
happly happily hapily
I live happily.
- Traiesc fericit (in mod fericit).
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "Vivo (feliz)".
felizamente felizmente felices
Vivo felizmente.
- Traiesc fericit (cu fericire).
Inregistrare Detectare Evenimente - Tutoriale JavaScript