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
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():
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'.
<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>
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>
null
.
<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>
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>
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.
<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>
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:
<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>
addEventListener()
, se foloseste metoda removeEventListener()
.<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>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
a:hover { font-weight: bold; color: #00da01; }
var num = 12.34567; num = num.toFixed(2); alert(num); // 12.35
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES); var_export($arr);
What time is it? It is a quarter to 5. - Cat este ora? E 5 fara un sfert.
¿Qué hora es? Son las tres menos cuarto. - Cat este ora? E 3 fara un sfert.