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, Jocuri, Anime: <em>www.MarPlo.net</em></p>
h3 {
padding: 2px 0.2em;
}// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);if(isset($_POST["field"])) {
echo $_POST["field"];
}We speak english. - Noi vorbim engleza.
Nosotros hablamos español. - Noi vorbim spaniola.