Curs Javascript


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
Ce atribut e folosit in tag-ul <img> pentru adresa imaginii?
href src rel
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Care din aceste coduri CSS ascunde elementul in pagina?
display: none; display: inline; position: relative;
#id {
  display: none;
}
Ce instructiune opreste executia lui while() sau for() ?
continue prompt() break
for(var i = 0; i< 8; i++) {
  if(i > 1) break;
  alert(i);
}
Indicati functia utilizata pentru a crea constante.
define() include() defined()
define("CONSTANT_NAME", "value");
echo CONSTANT_NAME;
Care este forma de plural a substativului "class" (clasa)?
classes clases clasis
This school has three classes.
- Scoala asta are trei clase.
Care este pluralul substativului "voz" (voce)?
vose voze voces
Escuché dos voces.
- Am auzit doua voci.
Detectare si Stergere Evenimente in JS

Last accessed pages

  1. Teste spaniola - Tests y ejercicios de Español - Gramática (28650)
  2. Articolul din limba engleza - The article (70250)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (275000)
  4. Ghiciti Cuvantul (4073)
  5. Curs HTML gratuit Tutoriale HTML5 (195356)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1160)
  2. Coduri pt culori (852)
  3. Cursuri limba engleza gratuite si lectii online (542)
  4. Gramatica limbii engleze - Prezentare Generala (495)
  5. Gramatica limbii spaniole. Indrumator si prezentare generala (451)