Evenimentele reprezinta actiuni provocate de browser sau de vizitatorul paginii.
De exemplu: cand pagina incepe sa se incarce in fereastra are loc evenimentul "Load", daca vizitatorul apasa un buton din pagina se provoaca evenimentul "Click". Cand mouse-ul este deasupra unui element, se declanseaza un eveniment "mouseover".
O lista cu evenimente JavaScript organizate pe categorii gasiti la pagina de la adresa:
marplo.net/javascript/lista-evenimente-js
JavaScript poate reactiona la evenimente cu ajutorul "event-handlers" (manageri sau gestionar de evenimente).
Handlerele de evenimente se pot adauga ca atribute in tag-urile HTML, folosind urmatoarea sintaxa.
Cuvantul this
din cod reprezinta elementul pe care se actioneaza evenimentul, si e transmis ca argument la functia apelata.
<style> #dv1 { background:#b0deb0; font-size:20px; height:50px; padding:3% 8px 5px 8px; text-align:center; width:120px; } </style> <h4>Exemplu onmouseover si onclick</h4> <div id='dv1' onmouseover='changeBgr(this)' onclick='changeTxt(this)'>Click Aici.</div> <script> function changeBgr(elm){ elm.style.background ='#bebefe'; } function changeTxt(elm){ elm.innerHTML ='Pacea-i Buna.'; } </script>
Evenimentele pot fi utilizate si la elemente de formular.
Daca dorim sa apelam o functie de fiecare data cand se adauga ceva intr-o caseta <input>, se poate folosi evenimentul 'oninput'.
- Exemplu, cand se adauga caractere intr-o caseta de text, se apeleaza o functie care copie acel text in alt element HTML, si afiseaza numarul de caractere adaugate.
<h4>Exemplu oninput</h4> <p>Cand se scrie ceva in caseta de text, e apelata o functie care afiseaza numarul de caractere si adauga textul la #resp.</p> Text: <input type='text' value='Liniste' oninput='addTxt(this)'/> <blockquote id='resp'>#resp</blockquote> <script> var resp = document.getElementById('resp'); function addTxt(elm){ var txt = elm.value; resp.innerHTML ='<p>Nr. caractere: '+ txt.length +'</p>'+ txt; } </script>
Pentru a nu amesteca tag-urile HTML cu coduri JS, evenimentele se pot adauga in codul JavaScript, asociate la elementul HTML preluat in JS; 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'.
elm.event = function(ev){ // ev reprezinta obiectul cu evenimentul declansat //codul functiei };
<style> #frm1 input { background:#b0dfb0; font-size:16px; text-align:center; width:50px; } #frm1 input:focus { background:#ededaf; } </style> <h4>Exemplu onkeyup</h4> <p>Cursorul se muta automat in urmatoarea caseta de text cand s-a completat tot campul precedent (la lungimea 'maxlength' a campului, aici 4 caractere).</p> <form id='frm1'> Adaugati text: <input maxlength='4' autofocus> / <input maxlength='4'> / <input maxlength='4'> </form> <script> //functia apelata de onkeyup; primeste indexul de ordine al elementului in form function nextElm(ev){ var elm = ev.target; //elementul curent, care declanseaza evenimentul //daca lungimea textului din elm este egala cu maxlength if(elm.value.length == elm.maxLength) { var next = elm.tabIndex +1; //urmatorul input //daca nu e ultimul element, face focus la urmatorul if(next < frm1.length) frm1[next].focus(); } } var frm1 = document.getElementById('frm1'); //parcurge elementele din frm1 for(var i=0; i<frm1.length; i++){ frm1[i].tabIndex = i; //seteaza indexul de ordine la atribut 'tabindex' frm1[i].onkeyup = nextElm; //apeleaza functia nextElm la evenimentul onkeyup } </script>
<input type="number" name="points" min="5" max="80" />
#id { filter:alpha(opacity=40); /* for IE */ opacity:0.4; }
var num = 12.84567; alert( num.toPrecision(3) ); // 12.8
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net"); shuffle($lang); var_export($lang); // array (0=>"coursesweb.net", 1=>"PHP", 2=>"JavaScript")
She is the best in our class. - Ea este cea mai buna din clasa noastra.
Él es el mejor en nuestra clase. - El este cel mai bun din clasa noastra.