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: click, mouseover, keypress, scroll, etc.


- O lista cu evenimente JavaScript grupate pe categorii gasiti la pagina de la adresa:
marplo.net/javascript/lista-evenimente-js


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 detecta evenimente fara a-le adauga in tag-ul HTML, ci direct in codul JavaScript, folosind aceasta sintaxa:
function funcName(ev){
 // ev reprezinta obiectul cu evenimentul declansat
 //codul functiei
}

elm.event = funcName;
Unde elm reprezinta elementul HTML la care se adauga evenimentul 'event'.
La definire, functia funcName poate avea un parametru (aici 'ev'); si reprezinta obiectul cu evenimentul care apeleaza functia. Observati ca aceasta se apeleaza doar cu numele, fara paranteze rotunde.

- Exemplu, la click pe un anumit DIV, e afisata o fereastra Alert cu ID-ul acelui Div:
<h4>Exemplu onclick</h4>
<div id='dv_1' style='background:#a8eda9; cursor:pointer; padding:8px; 12px; width:125px'>Click here</div>

<script>
var elm = document.getElementById('dv_1'); // preia elementul

// functie executata cand se produce evenimentul
function oFunctie(ev){
 // ev.target reprezinta elementul care a declansat evenimentul
 let id = ev.target.id;
 alert('DIV id: '+id);
}

// inregistrare event onclick
elm.onclick = oFunctie;
</script>

Evenimente cu functie anonima

Functia apelata la declansarea evenimentului poate fi creata direct in expresia de inregistrare a eveniment.
Sintaxa:

elm.event =(ev)=>{
 // ev reprezinta obiectul cu evenimentul declansat
 //codul functiei
};
- Iata exemplu anterior, aici cu functie anonima:
<h4>Exemplu onclick cu functie anonima</h4>
<div id='dv_1' style='background:#a8eda9; cursor:pointer; padding:8px; 12px; width:125px'>Click here</div>

<script>
var elm = document.getElementById('dv_1'); // preia elementul

// inregistrare event onclick
elm.onclick =(ev)=>{
 // ev.target reprezinta elementul care a declansat evenimentul
 let id = ev.target.id;
 alert('DIV id: '+id);
};
</script>

Stergere detectare eveniment cu 'on'

• Pentru a anula detectarea unui eveniment care e atasat la elementul HTML (cele adaugate cu prefixul 'on'), 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.
<h4>Exemplu anulare eveniment</h4>
<p>Dupa prima emitere a evenimentului 'onmouseover', acesta e anulat.</p>
<div id='dvid' style='background:#a8eda9; cursor:pointer; padding:8px; 12px; width:125px'>Mutati cursorul aici.</div>

<script>
var elm = document.getElementById('dvid'); // preia elementul

// inregistrare onmouseover
elm.onmouseover =(ev)=>{
 alert('Plasati inca o data cursorul pe acel text');
 elm.onmouseover = null; // sterge inregistrarea evenimentului
};
</script>

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 copie intr-un <textarea>, apoi ii modifica culoarea background.

<h4>Exemplu cu this</h4>
<p>La clic pe Div, copie continutul in textarea apoi schimba culoarea background.</p>
<div id='dvid' style='background:#a8eda9; cursor:pointer; width:125px; padding:8px 12px;'>Div, Exemplu cu this</div>
<textarea id='txta'></textarea>

<script>
var elm = document.getElementById('dvid');

// inregistrare onclick
elm.onclick = function(){
 // preia continutul HTML din elementul curent (cel ce declanseaza evenimentul)
 let cnt = this.innerHTML;
 document.getElementById('txta').value = cnt;

 // setare culoare background la elementul curent
 this.style.background ='#bebefe';
};
</script>

this si parametru event in functii arrow

Cuvantul this nu e recunoscut in functii arrow (definite cu: ()=>{} ) cu aceeasi valoare.
In functia arrow, this reprezinta obiectul parinte al functiei (in care e definita).
In functiile arrow (ca in toate celelalte functii) se poate folosi parametru event (aici definit cu 'ev'). Acesta contine un obiect cu evenimentul respectiv; si are o proprietate: target ce contine obiectul care a declansat acel eveniment.
- In functiile arrow se poate folosi urmatoarea sintaxa.

var elm = event.target;

- Iata exemplu precedent, aici cu functie arrow si parametru event (ev):
<h4>Exemplu cu functie arrow si parametru event</h4>
<p>La clic pe Div, copie continutul in textarea apoi schimba culoarea background.</p>
<div id='dvid' style='background:#a8eda9; cursor:pointer; width:125px; padding:8px 12px;'>Div, Exemplu cu event.target</div>
<textarea id='txta'></textarea>

<script>
var elm = document.getElementById('dvid');

// inregistrare onclick cu functie arrow
elm.onclick =(ev)=>{
 // preia continutul HTML din elementul care declanseaza evenimentul
 let cnt = ev.target.innerHTML;
 document.getElementById('txta').value = cnt;

 // setare culoare background la elementul declansator
 ev.target.style.background ='#bebefe';
};
</script>

Detectare eveniment cu addEventListener()

Exista inca un mod de a inregistra detectare de evenimente in JS, si anume cu metoda addEventListener().
La aceasta metoda evenimentul se adauga fara prefixul'on' ('click', 'mouseenter', 'mouseleave', ...), folosind urmatoarea sintaxa:

element.addEventListener('event', oFunctie, use_capture);
- event - e un sir cu tipul de eveniment ce trebuie detectat, fara prefixul 'on'.
- 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 (true) sau in faza de 'bubbling' (false). Default e: false.

- Exemplu. Cand mouse-ul e deasupra unui element LI, capata o culoare de fundal verde, cand cursorul iese din zona acelui <li> se elimina culoarea de fundal.
<h4>Exemplu cu addEventListener()</h4>
<p>Miscati mouse-ul pe listele urmatoare.</p>
<ul>
 <li>WebDevelopment - //coursesweb.net </li>
 <li>Cursuri gratuite - //marplo.net </li>
 <li>Games - //gamv.eu </li>
</ul>

<script>
var elm_li = document.getElementsByTagName('li'); // preia toate tag-urile LI

// functie executata la mouseenter
function mEnter(ev){
 // seteaza o culoare de fundal
 ev.target.style.background ='#07da08';
}

// functie executata la mouseleave
function mLeave(ev){
 // sterge culoarea de fundal
 this.style.background ='none';
}

// parcurge obiectul cu elementele LI
for(var i=0; i<elm_li.length; i++){
 // inregistrare mouseenter si mouseleave la fiecare LI
 elm_li[i].addEventListener('mouseenter', mEnter);
 elm_li[i].addEventListener('mouseleave', mLeave);
}
</script>

Stergere evenimente inregistrate cu addEventListener()

• Pentru a anula detectare unui eveniment inregistrat cu addEventListener(), se foloseste metoda removeEventListener().
Sintaxa:
element.removeEventListener('event', oFunctie);
- oFunctie trebuie sa fie aceeai care e adaugata la addEventListener().

Iata un exemplu, dupa un anumit numar de declansari se anuleaza detectarea evenimentului 'mousemove' inregistrat la un Div.
<h4>Exemplu sterge detectare eveniment cu addEventListener()</h4>
<p>Cand mouse-ul e miscat pe urmatorul Div, se afiseaza numarul de emiteri a evenimentului 'mousemove'<br>
Cand contoarul ajnge la 12 se anuleaza detectarea acestui eveniment.</p>
<div id='dvid' style='background:#a8eda9; padding:8px; 12px; text-align:center; width:130px'>
Div - Miscati cursorul aici.<br>
<strong id='resp'>0</strong>
</div>

<script>
var elm = document.getElementById('dvid');
var resp = document.getElementById('resp');
var nre =0;

//apelata la mousemove
function mOver(ev){
 nre++;
 resp.innerHTML = nre;
 if(nre ==12) elm.removeEventListener('mousemove', mOver); // sterge inregistrarea evenimentului
}

// inregistrare mousemove
elm.addEventListener('mousemove', mOver);
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 defineste un text marcat, evidentiat?
<mark> <embed> <span>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
Ce pseudo-clasa CSS defineste un stil la element cand mouse-ul e deasupra lui?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Clic pe functia ce returneaza un sir cu un numar rotunjit la x decimale.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicati functia PHP care adauga continutul unui fisier intr-un array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Clic pe raspunsul potrivit la intrebarea: "What time is it?"
On the 7th of July 1996 It is a quarter to 5. Nice weather.
What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.
Indicati raspunsul potrivit la intrebarea: "¿Qué hora es?"
Hace buen tiempo. En el 7 de julio de 1996 Son las tres menos cuarto.
¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.
Detectare si Stergere Evenimente in JS

Last accessed pages

  1. Scriere scripturi PHP elementare (1576)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (20736)
  3. Curs PHP MySQL, Tutoriale si Scripturi PHP (6659)
  4. Espanol Chistes - Glume, Bancuri (877)
  5. Sintaxa JavaScript (2435)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2144)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1480)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (1072)
  4. Trecutul simplu si continuu - Past Tense Simple and Continuous (1025)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (981)