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 atribut specifica metoda HTTP de trimitere (GET, POST) a datelor din formular?
action method value
<form action="script.php" method="post"> ... </form>
Ce proprietate CSS adauga umbra la chenar?
background-image box-shadow border-radius
#id {
  background-color: #bbfeda;
  box-shadow: 11px 11px 5px #7878da;
}
Clic pe functia care elimina primul element dintr-un array?
pop() push() shift()
var fruits = ["mar", "cireasa", "banana"];
fruits.shift();
alert(fruits.length);           // 2
Indicati functia cu care se poate verifica daca un anumit modul e instalat in PHP.
function() filetype() extension_loaded()
if(extension_loaded("PDO") === true) echo "PDO este valabil."
Alegeti verbul auxiliar corect care trebuie in propozitia: " ... I listen to music?".
has have Can
 Can I listen to music?
- Pot asculta muzica?
Alegeti verbul corect care trebuie in propozitia: "Me ... las frutas dulces"
están gustan gusta
Me gustan las frutas dulces.
- Imi plac fructele dulci.
Detectare si Stergere Evenimente in JS

Last accessed pages

  1. Instructiuni repetitive - FOR (2163)
  2. Expresii cu Tener (997)
  3. Verbe modale 2 - Teste incepatori (4130)
  4. Pronumele in limba engleza - Pronouns (27000)
  5. Afisare si chenare din CSS la elemente HTML (1864)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (635)
  2. Curs HTML gratuit Tutoriale HTML5 (536)
  3. Curs si Tutoriale JavaScript (437)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (392)
  5. Curs CSS Online Tutoriale CSS3 (372)