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>
<img src="image.jpg" usemap="#map1"> <map name="map1"> <area shape="rect" coords="9, 120, 56, 149" href="#"> <area shape="rect" coords="100, 200, 156, 249" href="#"> </map>
#id {
overflow: auto;
}document.getElementById("id").onmouseover = function(){
document.write("Sa ai Viata Buna");
}if(isset($_GET["id"])) {
echo $_GET["id"];
}Marc is the boy who won the prize. - Marc e baiatul care a castigat premiul.
Voy a ver al pintor de quien les hablé ayer. - Ma duc sa vad pictorul despre care ti-am vorbit ieri.