Curs Javascript


Sunt multe evenimente care pot fi folosite in programarea JavaScript, o lista intreaga puteti gasi la MDN: JavaScript Standard Events.

- In continuare sunt prezentate pe categorii liste cu unele din cele mai des utilizate evenimente JS, cu exemple de cod la fiecare.


Evenimente generale

Aceste evenimente au caracter general, pot fi adaugate la obiectul window, la documentul HTML sau la majoritatea elementelor HTML din pagina.

copy - se declansaza cand utilizatorul copie continutul unui element din pagina. 
<h4>Exemplu copy</h4>
<p id='elm1'>Selectati o parte din aces text si incercati sa-l copiati. Cu Ctrl+C, sau clic-dreapta si Copy.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var elm = document.getElementById('elm1');
elm.addEventListener('copy', (ev)=>{
 document.getElementById('resp').innerHTML ='Ati incercat sa copiati textul.';
});
</script>
error - se declansaza cand apare o eroare la obiectul la care e atasat. De exemplu cand o imagine sau continut media nu se incarca. 
<h4>Exemplu error</h4>
<p>Imaginea urmatoare nu este la adresa specificata, ceea ce declansaza eroare.<br></p>
<img id='elm1' src="error_img.png" title="Image"/>
<blockquote id='resp'>#resp</blockquote>

<script>
var elm = document.getElementById('elm1');
elm.addEventListener('error', (ev)=>{
 document.getElementById('resp').innerHTML ='Error: Imaginea nu a putut fi incarcata.';
});
</script>
load - se declansaza cand pagina (cu toate componentele) sau alta resursa la care e atasat s-a incarcat complet. 
<h4>Exemplu load</h4>
<p>La clic pe urmatorul buton se adauga in pagina o imagine cu atribut 'onload' care apeleaza o functie JS cand imagine s-a incarcat.</p>
<blockquote id='resp'>#resp</blockquote>
<button id='btn1'>Add Image</button>

<script>
//apelata de evenimentul load
function imgLoad(elm){
 document.getElementById('resp').innerHTML ='Imagine s-a incarcat de la adresa: '+elm.src;
}

document.getElementById('btn1').addEventListener('click', (ev)=>{
 ev.target.insertAdjacentHTML('beforebegin', "<img src='/marplo/imgs/smile_gift.png' onload='imgLoad(this)'/>");
});
</script>
scroll - se declansaza cand se face 'scroll' la pagina sau la un element HTML (cand se deruleaza continutul). 
<h4>Exemplu scroll</h4>
<p>Derulati urmatorul continut.</p>
<blockquote id='resp'>#resp</blockquote>
<pre style='background:#bbfabb; font-weight:700; height:160px; overflow:auto; max-width:480px;' id='elm1'>
 Toate vin si trec.
 De unde apar, si unde dispar?!
 Ce bine ca vin,
 Ce bine ca trec.

 In lume cat sunt,
 Doar le admir, si privesc,
 Fara sa judec,
 Nici sa le dorec.
</pre>

<script>
document.getElementById('elm1').addEventListener('scroll', (ev)=>{
 document.getElementById('resp').innerHTML ='Ati derulat continutul.';
});
</script>

Evenimente pentru Drag-Drop

drag - se executa coninuu (la fiecare 350 milisecunde) cand un element e tras dintr-un loc in altu. 
<style>
#edrop {
background:#f0f1af;
display:inline-block;
font-size:18px;
font-weight:700;
min-height:100px;
margin:5px 25px;
text-align:center;
width:180px;
}
#edrag {
background:#bfbffb;
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
cursor:pointer;
display:inline-block;
height:60px;
margin:30px;
padding-top:20px;
text-align:center;
width:60px;
}
</style>

<h4>Exemplu drag</h4>
<p>Trageti cu mouse-ul elementul OU si lasati-l la Cuib.<br>
 - In timp ce e tras, se afisaza la #resp numarul de cate ori se auto-emite evenimentul 'drag'.</p>
<div id='edrag' draggable='true'>OU</div>
<div id='edrop' ondragenter='return false;'>Cuib</div>
<blockquote id='resp'>#resp</blockquote>

<script>
var nrd =0; //contoar

// functie apelata de dragstart
function dragStart(ev){
 // seteaza tipul si valoarea continutului tras cu mouse-ul
 // Aceasta valoare va fi returnata de getData(). Aici ID-ul obiectului mutat
 ev.dataTransfer.setData('text', ev.target.id);
}

// apelata de drag, cand elementul e tras
function drag(ev){
 nrd++;
 resp.innerHTML = nrd;
}

function allowDrop(ev){
 ev.preventDefault(); // anuleaza evenimentul
}

// functie apelata de ondrop
function drop(ev){
 ev.preventDefault(); // anuleaza evenimentul implicit pentru a peemite executarea ondrop

 // preia valoarea setata de setData() (ID-ul obiectului mutat),
 // ca parametru se foloseste sirul cu acelasi tip de data setata cu setData()
 var drag_data = ev.dataTransfer.getData('text');

 // adauga obiectul in elementul definit pt. Drop
 ev.target.appendChild(document.getElementById(drag_data));
}

var edrag = document.getElementById('edrag'); //elementul tras, Drag
var edrop = document.getElementById('edrop'); //elementul unde se face Drop
var resp = document.getElementById('resp');

//inregistreaza la evenimente Drag-Drop functiile definite
edrag.addEventListener('dragstart', dragStart);
edrag.addEventListener('drag', drag);
edrop.addEventListener('drop', drop);
edrop.addEventListener('dragover', allowDrop);
</script>
dragend - e declansat cand utilizatorul termina operatiunea de tragere cu mouse-ul si elibereaza clicul. 
<style>
#edrop {
background:#f0f1af;
display:inline-block;
font-size:18px;
font-weight:700;
min-height:100px;
margin:5px 25px;
text-align:center;
width:180px;
}
#edrag {
background:#bfbffb;
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
cursor:pointer;
display:inline-block;
height:60px;
margin:30px;
padding-top:20px;
text-align:center;
width:60px;
}
</style>

<h4>Exemplu dragend</h4>
<p>Trageti cu mouse-ul elementul OU si lasati-l la CUIB.<br>
 - Dupa ce click-ul este eliberat se declansaza 'dragend' si afiseaza mesaj la #resp.</p>
<div id='edrag' draggable='true'>OU</div>
<div id='edrop' ondragenter='return false;'>CUIB</div>
<blockquote id='resp'>#resp</blockquote>

<script>
// functie apelata de dragstart
function dragStart(ev){
 // seteaza tipul si valoarea continutului tras cu mouse-ul
 // Aceasta valoare va fi returnata de getData(). Aici ID-ul obiectului mutat
 ev.dataTransfer.setData('text', ev.target.id);
}

// apelata de dragend, cand elementul e eliberat
function dragend(ev){
 resp.innerHTML ='Oul e a ajuns in Cuib';
}

function allowDrop(ev){
 ev.preventDefault(); // anuleaza evenimentul
}

// functie apelata de ondrop
function drop(ev){
 ev.preventDefault(); // anuleaza evenimentul implicit pentru a peemite executarea ondrop

 // preia valoarea setata de setData() (ID-ul obiectului mutat),
 // ca parametru se foloseste sirul cu acelasi tip de data setata cu setData()
 var drag_data = ev.dataTransfer.getData('text');

 // adauga obiectul in elementul definit pt. Drop
 ev.target.appendChild(document.getElementById(drag_data));
}

var edrag = document.getElementById('edrag'); //elementul tras, Drag
var edrop = document.getElementById('edrop'); //elementul unde se face Drop
var resp = document.getElementById('resp');

//inregistreaza la evenimente Drag-Drop functiile definite
edrag.addEventListener('dragstart', dragStart);
edrag.addEventListener('dragend', dragend);
edrop.addEventListener('drop', drop);
edrop.addEventListener('dragover', allowDrop);
</script>
dragenter - e declansat pe elementul definit pt. Drop (unde va fi lasat obiectul tras) cand acesta intra in suprafata lui. 
<style>
#edrop {
background:#f0f1af;
display:inline-block;
font-size:18px;
font-weight:700;
min-height:100px;
margin:5px 25px;
text-align:center;
width:180px;
}
#edrag {
background:#bfbffb;
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
cursor:pointer;
display:inline-block;
height:60px;
margin:30px;
padding-top:20px;
text-align:center;
width:60px;
}
</style>

<h4>Exemplu dragenter</h4>
<p>Trageti incet cu mouse-ul elementul OU si lasati-l la CUIB.<br>
 - Cand intra in zona de 'drop' (la cuib) se declansaza 'dragenter' si afiseaza mesaj la #resp.</p>
<div id='edrag' draggable='true'>OU</div>
<div id='edrop' ondragenter='return dragenter();'>CUIB</div>
<blockquote id='resp'>#resp</blockquote>

<script>
// functie apelata de dragstart
function dragStart(ev){
 // seteaza tipul si valoarea continutului tras cu mouse-ul
 // Aceasta valoare va fi returnata de getData(). Aici ID-ul obiectului mutat
 ev.dataTransfer.setData('text', ev.target.id);
}

// apelata de dragenter
function dragenter(ev){
 resp.innerHTML ='Oul a ajuns la Cuib';
 return false;
}

function allowDrop(ev){
 ev.preventDefault(); // anuleaza evenimentul
}

// functie apelata de ondrop
function drop(ev){
 ev.preventDefault(); // anuleaza evenimentul implicit pentru a peemite executarea ondrop

 // preia valoarea setata de setData() (ID-ul obiectului mutat),
 // ca parametru se foloseste sirul cu acelasi tip de data setata cu setData()
 var drag_data = ev.dataTransfer.getData('text');

 // adauga obiectul in elementul definit pt. Drop
 ev.target.appendChild(document.getElementById(drag_data));
}

var edrag = document.getElementById('edrag'); //elementul tras, Drag
var edrop = document.getElementById('edrop'); //elementul unde se face Drop
var resp = document.getElementById('resp');

//inregistreaza la evenimente Drag-Drop functiile definite
edrag.addEventListener('dragstart', dragStart);
edrop.addEventListener('drop', drop);
edrop.addEventListener('dragover', allowDrop);
</script>
dragleave - se executa continuu cand obiectul e tras in (sau scos din) afara zonei elementului unde trebuie plasat; cand paraseste suprafata acestuia. 
<style>
#edrop {
background:#f0f1af;
display:inline-block;
font-size:18px;
font-weight:700;
min-height:100px;
margin:5px 25px;
text-align:center;
width:180px;
}
#edrag {
background:#bfbffb;
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
cursor:pointer;
display:inline-block;
height:60px;
margin:30px;
padding-top:20px;
text-align:center;
width:60px;
}
</style>

<h4>Exemplu dragleave</h4>
<p>Trageti cu mouse-ul elementul OU si lasati-l la CUIB.<br>
 - Cand tragerea e in afara zonei de Drop, se afiseaza mesaj la #resp.</p>
<div id='edrag' draggable='true'>OU</div>
<div id='edrop' ondragenter='return false;'>CUIB</div>
<blockquote id='resp'>#resp</blockquote>

<script>
// functie apelata de dragstart
function dragStart(ev){
 // seteaza tipul si valoarea continutului tras cu mouse-ul
 // Aceasta valoare va fi returnata de getData(). Aici ID-ul obiectului mutat
 ev.dataTransfer.setData('text', ev.target.id);
}

// apelata de dragleave
function dragleave(ev){
 resp.innerHTML ='Oul vrea in Cuib';
}

function allowDrop(ev){
 ev.preventDefault(); // anuleaza evenimentul
}

// functie apelata de ondrop
function drop(ev){
 ev.preventDefault(); // anuleaza evenimentul implicit pentru a peemite executarea ondrop

 // preia valoarea setata de setData() (ID-ul obiectului mutat),
 // ca parametru se foloseste sirul cu acelasi tip de data setata cu setData()
 var drag_data = ev.dataTransfer.getData('text');

 // adauga obiectul in elementul definit pt. Drop
 ev.target.appendChild(document.getElementById(drag_data));
}

var edrag = document.getElementById('edrag'); //elementul tras, Drag
var edrop = document.getElementById('edrop'); //elementul unde se face Drop
var resp = document.getElementById('resp');

//inregistreaza la evenimente Drag-Drop functiile definite
edrag.addEventListener('dragstart', dragStart);
edrag.addEventListener('dragleave', dragleave);
edrop.addEventListener('drop', drop);
edrop.addEventListener('dragover', allowDrop);
</script>
dragover - se ataseaza la elementul pt. Drop. E declansat continuu in timp ce obiectul e tras pe elementul definit pentru Drop. 
<style>
#edrop {
background:#f0f1af;
display:inline-block;
font-size:18px;
font-weight:700;
min-height:100px;
margin:5px 25px;
text-align:center;
width:180px;
}
#edrag {
background:#bfbffb;
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
cursor:pointer;
display:inline-block;
height:60px;
margin:30px;
padding-top:20px;
text-align:center;
width:60px;
}
</style>

<h4>Exemplu dragover</h4>
<p>Trageti cu mouse-ul elementul OU la CUIB.<br>
 - Cand tragerea e in zona de Drop, se emite evenimentul 'dragover' si afiseaza la #resp numarul de apelari.</p>
<div id='edrag' draggable='true'>OU</div>
<div id='edrop' ondragenter='return false;' ondragover='dragover();'>CUIB</div>
<blockquote id='resp'>#resp</blockquote>

<script>
var nrd = 0; //contoar

// functie apelata de dragstart
function dragStart(ev){
 // seteaza tipul si valoarea continutului tras cu mouse-ul
 // Aceasta valoare va fi returnata de getData(). Aici ID-ul obiectului mutat
 ev.dataTransfer.setData('text', ev.target.id);
}

// apelata de dragover
function dragover(ev){
 nrd++;
 resp.innerHTML = nrd;
}

function allowDrop(ev){
 ev.preventDefault(); // anuleaza evenimentul
}

// functie apelata de ondrop
function drop(ev){
 ev.preventDefault(); // anuleaza evenimentul implicit pentru a peemite executarea ondrop

 // preia valoarea setata de setData() (ID-ul obiectului mutat),
 // ca parametru se foloseste sirul cu acelasi tip de data setata cu setData()
 var drag_data = ev.dataTransfer.getData('text');

 // adauga obiectul in elementul definit pt. Drop
 ev.target.appendChild(document.getElementById(drag_data));
}

var edrag = document.getElementById('edrag'); //elementul tras, Drag
var edrop = document.getElementById('edrop'); //elementul unde se face Drop
var resp = document.getElementById('resp');

//inregistreaza la evenimente Drag-Drop functiile definite
edrag.addEventListener('dragstart', dragStart);
edrop.addEventListener('drop', drop);
edrop.addEventListener('dragover', allowDrop);
</script>
dragstart - e declansat imediat ce utilizatorul incepe sa mute obiectul. 
<style>
#edrop {
background:#f0f1af;
display:inline-block;
font-size:18px;
font-weight:700;
min-height:100px;
margin:5px 25px;
text-align:center;
width:180px;
}
#edrag {
background:#bfbffb;
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
cursor:pointer;
display:inline-block;
height:60px;
margin:30px;
padding-top:20px;
text-align:center;
width:60px;
}
</style>

<h4>Exemplu dragstart</h4>
<p>Trageti cu mouse-ul obiectul OU sa-l lasati la CUIB.<br>
 - Cand incepe tragerea, se afiseaza mesaj la #resp.</p>
<div id='edrag' draggable='true'>OU</div>
<div id='edrop' ondragenter='return false;'>CUIB</div>
<blockquote id='resp'>#resp</blockquote>

<script>
// functie apelata de dragstart
function dragStart(ev){
 // seteaza tipul si valoarea continutului tras cu mouse-ul
 // Aceasta valoare va fi returnata de getData(). Aici ID-ul obiectului mutat
 ev.dataTransfer.setData('text', ev.target.id);

 resp.innerHTML ='Oul a pornit spre cuib';
}

function allowDrop(ev){
 ev.preventDefault(); // anuleaza evenimentul
}

// functie apelata de ondrop
function drop(ev){
 ev.preventDefault(); // anuleaza evenimentul implicit pentru a peemite executarea ondrop

 // preia valoarea setata de setData() (ID-ul obiectului mutat),
 // ca parametru se foloseste sirul cu acelasi tip de data setata cu setData()
 var drag_data = ev.dataTransfer.getData('text');

 // adauga obiectul in elementul definit pt. Drop
 ev.target.appendChild(document.getElementById(drag_data));
}

var edrag = document.getElementById('edrag'); //elementul tras, Drag
var edrop = document.getElementById('edrop'); //elementul unde se face Drop
var resp = document.getElementById('resp');

//inregistreaza la evenimente Drag-Drop functiile definite
edrag.addEventListener('dragstart', dragStart);
edrop.addEventListener('drop', drop);
edrop.addEventListener('dragover', allowDrop);
</script>
drop - se ataseaza la elementul pentru Drop. Se declansaza cand obiectul tras (drag) e lasat la Drop.
- Vine imediat dupa dragend. 
<style>
#edrop {
background:#f0f1af;
display:inline-block;
font-size:18px;
font-weight:700;
min-height:100px;
margin:5px 25px;
text-align:center;
width:180px;
}
#edrag {
background:#bfbffb;
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
cursor:pointer;
display:inline-block;
height:60px;
margin:30px;
padding-top:20px;
text-align:center;
width:60px;
}
</style>

<h4>Exemplu drop</h4>
<p>Trageti cu mouse-ul elementul OU si lasati-l la CUIB.<br>
 - Dupa ce obiectul e plasat in zona Drop, se declansaza 'drop' si afiseaza mesaj la #resp.</p>
<div id='edrag' draggable='true'>OU</div>
<div id='edrop' ondragenter='return false;'>CUIB</div>
<blockquote id='resp'>#resp</blockquote>

<script>
// functie apelata de dragstart
function dragStart(ev){
 // seteaza tipul si valoarea continutului tras cu mouse-ul
 // Aceasta valoare va fi returnata de getData(). Aici ID-ul obiectului mutat
 ev.dataTransfer.setData('text', ev.target.id);
}

function allowDrop(ev){
 ev.preventDefault(); // anuleaza evenimentul
}

// functie apelata de ondrop
function drop(ev){
 ev.preventDefault(); // anuleaza evenimentul implicit pentru a peemite executarea ondrop

 // preia valoarea setata de setData() (ID-ul obiectului mutat),
 // ca parametru se foloseste sirul cu acelasi tip de data setata cu setData()
 var drag_data = ev.dataTransfer.getData('text');

 // adauga obiectul in elementul definit pt. Drop
 ev.target.appendChild(document.getElementById(drag_data));

 resp.innerHTML ='Oul e in siguranta in Cuib';
}

var edrag = document.getElementById('edrag'); //elementul tras, Drag
var edrop = document.getElementById('edrop'); //elementul unde se face Drop
var resp = document.getElementById('resp');

//inregistreaza la evenimente Drag-Drop functiile definite
edrag.addEventListener('dragstart', dragStart);
edrop.addEventListener('drop', drop);
edrop.addEventListener('dragover', allowDrop);
</script>

Evenimente pentru media

Aceste evenimente se aplica in general la elemente tip media: <audio>, <embed>, <img>, <object>, si <video>.

canplay - se declansaza cand browser-ul poate sa porneasca redarea continutului media. 
<h4>Exemplu canplay</h4>
<p>La clic pe butonul Play se adauga o melodie in element &lt;audio&gt;.<br>
 Cand muzica poate fi redata in browser, porneste automat si se afiseza la #resp numele din adresa 'src'.</p>
<audio src='#' id='audio' type='audio/mp3' controls style='display:none'></audio>
<button id='btn1' data-src='javascript/tranki_piano.mp3'>Play</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var audio = document.getElementById('audio');

//face vizibil #audio si adauga adresa src a piesei
var playAudio =(ev)=>{
 audio.style.display ='block';
 audio.src = ev.target.getAttribute('data-src');
 ev.target.outerHTML =''; //elimina butonul
}

//cand piesa de la audio poate fi redata
audio.addEventListener('canplay', (ev)=>{
 audio.play(); // porneste melodia
 document.getElementById('resp').innerHTML ='Ascultati: '+ audio.src.match(/[^\/]+$/i)[0];
});

//la click pe #btn1 apeleaza playAudio()
document.getElementById('btn1').addEventListener('click', playAudio);
</script>
ended - se executa cand piesa audio/video s-a terminat. 
<h4>Exemplu ended</h4>
<p>Cand muzica se termina se emite evenimentul 'ended' si afiseza la #resp numele din adresa 'src'.</p>
<audio src='javascript/tranki_piano.mp3' id='audio' type='audio/mp3' controls autoplay></audio>
<blockquote id='resp'>#resp</blockquote>

<script>
var audio = document.getElementById('audio');

//cand piesa se termina
audio.addEventListener('ended', (ev)=>{
 document.getElementById('resp').innerHTML ='Ati ascultat: '+ audio.src.match(/[^\/]+$/i)[0];
});
</script>
loadedmetadata - se declansaza cand s-au incarcat datele meta ale continutului media (durata, text trcks si dimensiuni pt. video). 
<h4>Exemplu loadedmetadata</h4>
<p>La clic pe butonul Play se adauga o melodie in element &lt;audio&gt;.<br>
 Cand datele meta s-au incarcat, afiseza la #resp numele din adresa 'src' si durata (in secunde).</p>
<audio src='#' id='audio' type='audio/mp3' controls style='display:none'></audio>
<button id='btn1' data-src='javascript/tranki_piano.mp3'>Play</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var audio = document.getElementById('audio');

//face vizibil #audio si adauga adresa src a piesei
var playAudio =(ev)=>{
 audio.style.display ='block';
 audio.src = ev.target.getAttribute('data-src');
 ev.target.outerHTML =''; //elimina butonul
}

//cand s-au incarcat datele meta
audio.addEventListener('loadedmetadata', (ev)=>{
 document.getElementById('resp').innerHTML = audio.src.match(/[^\/]+$/i)[0] +' - Duration: '+ audio.duration;
});

//la click pe #btn1 apeleaza playAudio()
document.getElementById('btn1').addEventListener('click', playAudio);
</script>
loadstart - este emis cand incepe incarcarea continutului media. 
<h4>Exemplu loadstart</h4>
<p>La clic pe butonul Play se adauga o melodie in element &lt;audio&gt;.<br>
 Cand incepe incarcarea piesei, afiseza la #resp numele din adresa 'src'.</p>
<audio id='audio' type='audio/mp3' controls style='display:none'></audio>
<button id='btn1' data-src='javascript/tranki_piano.mp3'>Play</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var audio = document.getElementById('audio');

//face vizibil #audio si adauga adresa src a piesei
var playAudio =(ev)=>{
 audio.style.display ='block';
 audio.src = ev.target.getAttribute('data-src');
 audio.load(); // incarca melodia
 ev.target.outerHTML =''; //elimina butonul
}

//cand incepe incarcarea
audio.addEventListener('loadstart', (ev)=>{
 document.getElementById('resp').innerHTML ='Puteti asculta: '+ audio.src.match(/[^\/]+$/i)[0];
});

//la click pe #btn1 apeleaza playAudio()
document.getElementById('btn1').addEventListener('click', playAudio);
</script>
pause - este emis cand se pune pauza la piesa audio/video. 
<h4>Exemplu pause</h4>
<p>Daca apasati butonul pentru Pauza, afiseza mesaj la #resp.</p>
<audio src='javascript/tranki_piano.mp3' id='audio' type='audio/mp3' controls autoplay></audio>
<blockquote id='resp'>#resp</blockquote>

<script>
var audio = document.getElementById('audio');

audio.addEventListener('pause', (ev)=>{
 document.getElementById('resp').innerHTML ='Ati apasat pauza';
});
</script>
play - se executa cand incepe redarea continutului audio/video. 
<h4>Exemplu play</h4>
<p>Cand apasati butonul pentru Play, afiseza mesaj la #resp.</p>
<audio src='javascript/tranki_piano.mp3' id='audio' type='audio/mp3' controls></audio>
<blockquote id='resp'>#resp</blockquote>

<script>
var audio = document.getElementById('audio');

audio.addEventListener('play', (ev)=>{
 document.getElementById('resp').innerHTML ='Ati apasat Play';
});
</script>
seeking - se executa cand utilizatorul muta pozitia cursorului 'playback' (de derulare) in elementul audio/video. 
<h4>Exemplu seeking</h4>
<p>Daca mutati pozitia cursorului 'playback' (de derulare) a piesei, afiseza la #resp pozitia curenta (in secunde).</p>
<audio src='javascript/tranki_piano.mp3' id='audio' type='audio/mp3' controls></audio>
<blockquote id='resp'>#resp</blockquote>

<script>
var audio = document.getElementById('audio');

audio.addEventListener('seeking', (ev)=>{
 document.getElementById('resp').innerHTML = audio.currentTime;
});
</script>
timeupdate - se executa cand se schimba pozitia cursorului 'playback' (de derulare) in elementul audio/video. 
<h4>Exemplu timeupdate</h4>
<p>Cand se schimba pozitia cursorului 'playback' (de derulare) a piesei, afiseza la #resp pozitia curenta (in secunde).</p>
<audio src='javascript/tranki_piano.mp3' id='audio' type='audio/mp3' controls></audio>
<blockquote id='resp'>#resp</blockquote>

<script>
var audio = document.getElementById('audio');

audio.addEventListener('timeupdate', (ev)=>{
 document.getElementById('resp').innerHTML ='Playback position: '+ audio.currentTime;
});
</script>
volumechange - se declansaza cand se modifica volumul sonor. 
<h4>Exemplu volumechange</h4>
<p>Daca modificati volumul sonor, afiseza la #resp volumul curent.</p>
<audio src='javascript/tranki_piano.mp3' id='audio' type='audio/mp3' controls></audio>
<blockquote id='resp'>#resp</blockquote>

<script>
var audio = document.getElementById('audio');

audio.addEventListener('volumechange', (ev)=>{
 document.getElementById('resp').innerHTML ='Volum: '+ audio.volume;
});
</script>

Evenimente pentru mouse

click - se declansaza cand se apasa clic cu butonul mouse-ului pe un element. 
<h4>Exemplu click</h4>
<p>Dati clic pe butonul urmator. La #resp va fi afisat numarul de clicuri.</p>
<button id='btn1'>Click</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var nrc =0;
document.getElementById('btn1').addEventListener('click', (ev)=>{
 nrc++;
 document.getElementById('resp').innerHTML = nrc;
});
</script>
contextmenu - se declansaza cand se apasa butonul dreapta al mouse-ului pe un element (right-click), inainte de afisarea meniului prestabilit la clic-dreapta. 
<h4>Exemplu contextmenu</h4>
<div id='elm1' style='background:#d8d9fe; font-weight:700; height:70px; margin:5px 15%; padding:20px 5px 5px 5px; text-align:center;;'>Apasati aici butonul din dreapta al mouse-ului.</div>

<script>
document.getElementById('elm1').addEventListener('contextmenu', (ev)=>{
 alert('Ati apasat right-click');
});
</script>
dblclick - se declansaza cand se apasa dublu-clic cu mouse-ul pe un element. 
<h4>Exemplu dblclick</h4>
<div id='elm1' style='background:#bfbffb; height:70px; padding:20px 5px 5px 5px; text-align:center; width:150px;'>Apasati dublu-clic aici.</div>
<blockquote id='resp'>#resp</blockquote>

<script>
var nrc =0;
document.getElementById('elm1').addEventListener('dblclick', (ev)=>{
 nrc++;
 document.getElementById('resp').innerHTML = nrc;
});
</script>
mouseenter - este emis cand mouse-ul intra in suprafata unui element. 
<h4>Exemplu mouseenter - mouseleave</h4>
<p>Cand mouse-ul intra pe dreptunghiul urmator se modifica culoarea background si afiseaza numarul de intrari.<br>
La iesirea din dreptungi se defineste alt background.</p>
<div id='elm1' style='background:#bfbffb; font-size:22px; font-weight:700; height:70px; padding:35px 5px 5px 5px; text-align:center; width:150px;'>0</div>

<script>
var nrc =0;
document.getElementById('elm1').addEventListener('mouseenter', (ev)=>{
 nrc++;
 ev.target.innerHTML = nrc;
 ev.target.style.background ='#f0f1af';
});
document.getElementById('elm1').addEventListener('mouseleave', (ev)=>{
 ev.target.style.background ='#abfbab';
});
</script>
mouseleave - este emis cand mouse-ul iese din suprafata completa a unui element. 
<h4>Exemplu mouseenter - mouseleave</h4>
<p>Cand mouse-ul intra pe dreptunghiul urmator se modifica culoarea background.<br>
 - La iesirea din dreptungi se defineste alt background si afiseaza numarul de iesiri.</p>
<div id='elm1' style='background:#bfbffb; font-size:22px; font-weight:700; height:70px; padding:35px 5px 5px 5px; text-align:center; width:150px;'>0</div>

<script>
var nrc =0;
document.getElementById('elm1').addEventListener('mouseleave', (ev)=>{
 nrc++;
 ev.target.innerHTML = nrc;
 ev.target.style.background ='#f0f1af';
});
document.getElementById('elm1').addEventListener('mouseenter', (ev)=>{
 ev.target.style.background ='#abfbab';
});
</script>
mousemove - se executa cand mouse-ul se misca pe suprafata unui element. 
<h4>Exemplu mousemove</h4>
<p>Cand mouse-ul se misca pe dreptunghiul urmator afiseaza numarul de miscari.</p>
<div id='elm1' style='background:#bfbffb; font-size:22px; font-weight:700; height:70px; padding:35px 5px 5px 5px; text-align:center; width:150px;'>0</div>

<script>
var nrc =0;
document.getElementById('elm1').addEventListener('mousemove', (ev)=>{
 nrc++;
 ev.target.innerHTML = nrc;
});
</script>
mouseout - se executa cand mouse-ul iese din suprafata unui element sau a unui element (copil) din interiorul lui.
- Similar cu 'mouseleave'; diferenta fiind ca 'mouseleave' nu se declansaza la iesirea din elemente copil. 
<style>
#ep1, #ep2 {
background:#abfbab;
display:inline-block;
font-size:18px;
font-weight:700;
margin:5px 25px;
text-align:center;
width:170px;
}
#ep2 {
background:#f0f1af;
}
.echd {
background:#bfbffb;
margin:40px;
}
</style>

<h4>Exemplu diferenta: mouseleave - mouseout</h4>
<p>Evenimentele 'mouseleave' si 'mouseout' sunt inregistrate la elementele Parinte.<br>
 Cand mouse-ul iese din zona Parinte se afiseaza la primul Child numarul de iesiri.<br>
 - Intrati si esiti cu mouse-ul din dreptungiurile urmatoare, inclusiv Child.</p>
<div id='ep1'>Parinte - mouseleave
<div class='echd'>Child</div>
<div class='echd'>Child 2</div>
</div>
<div id='ep2'>Parinte - mouseout
<div class='echd'>Child</div>
<div class='echd'>Child 2</div>
</div>

<script>
var nrc1 =0;
var nrc2 =0;
var echd1 = document.querySelector('#ep1 .echd'); //primul child din #ep1
var echd2 = document.querySelector('#ep2 .echd'); //primul child din #ep2

//mouseleave la #ep1
document.getElementById('ep1').addEventListener('mouseleave', (ev)=>{
 nrc1++;
 echd1.innerHTML = nrc1;
});

//mouseout la #ep2
document.getElementById('ep2').addEventListener('mouseout', (ev)=>{
 nrc2++;
 echd2.innerHTML = nrc2;
});
</script>
mouseover - se executa cand mouse-ul intra in suprafata unui element sau a unui element (copil) din interiorul lui.
- Similar cu 'mouseenter'; diferenta fiind ca 'mouseenter' nu se declansaza la intrarea in elemente copil. 
<style>
#ep1, #ep2 {
background:#abfbab;
display:inline-block;
font-size:18px;
font-weight:700;
margin:5px 25px;
text-align:center;
width:170px;
}
#ep2 {
background:#f0f1af;
}
.echd {
background:#bfbffb;
margin:40px;
}
</style>

<h4>Exemplu diferenta: mouseenter - mouseover</h4>
<p>Evenimentele 'mouseenter' si 'mouseover' sunt inregistrate la elementele Parinte.<br>
 Cand mouse-ul intra in zona Parinte se afiseaza la primul Child numarul de intrari.<br>
 - Intrati si esiti cu mouse-ul din dreptungiurile urmatoare, inclusiv Child.</p>
<div id='ep1'>Parinte - mouseenter
<div class='echd'>Child</div>
<div class='echd'>Child 2</div>
</div>
<div id='ep2'>Parinte - mouseover
<div class='echd'>Child</div>
<div class='echd'>Child 2</div>
</div>

<script>
var nrc1 =0;
var nrc2 =0;
var echd1 = document.querySelector('#ep1 .echd'); //primul child din #ep1
var echd2 = document.querySelector('#ep2 .echd'); //primul child din #ep2

//mouseenter la #ep1
document.getElementById('ep1').addEventListener('mouseenter', (ev)=>{
 nrc1++;
 echd1.innerHTML = nrc1;
});

//mouseover la #ep2
document.getElementById('ep2').addEventListener('mouseover', (ev)=>{
 nrc2++;
 echd2.innerHTML = nrc2;
});
</script>

Evenimente pentru form si casete de formular

blur - se declansaza cand un element de formular (sau alt tip de element cu atribut contenteditable) pierde focus (e opusul lui 'focus'). 
<h4>Exemplu blur</h4>
<p>Dati clic pe caseta de text apoi clic in afara ei, in acel moment pierde focus-ul si se emite evenimentul 'blur' care actioneaza o functie JavaScript si schimba culoarea de background a casetei.</p>
Name: <input type='text' id='elm1'>

<script>
document.getElementById('elm1').addEventListener('blur', (ev)=>{
 ev.target.style.background ='#efabcd';
});
</script>
change - se emite dupa ce se schimba valoarea de la un element de formular. 
<h4>Exemplu change</h4>
<p>Dupa ce e selectata alta valoare din caseta select, se afiseaza la #resp valoarea selectata.</p>
Select: <select id='elm1'><option value='marplo.net'>MarPlo</option><option value='coursesweb.net'>CoursesWeb</option><option value='gamv.eu'>gamV</option></select>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('elm1').addEventListener('change', (ev)=>{
 document.getElementById('resp').innerHTML = ev.target.value;
});
</script>
focus - se declansaza cand un element de formular (sau alt tip de element cu atribut contenteditable) primeste focus (cursorul e in el). 
<h4>Exemplu focus</h4>
<p>Dati clic pe caseta de text, cursorul fiind in ea se emite 'focus' apoi clic in afara ei, in acel moment pierde focus-ul (se emite blur).<br>
 - Culoarea background se schimba diferit la focus si blur.</p>
Name: <input type='text' id='elm1'>

<script>
var elm = document.getElementById('elm1');
elm.addEventListener('blur', (ev)=>{
 ev.target.style.background ='#efabcd';
});
elm.addEventListener('focus', (ev)=>{
 ev.target.style.background ='#abcdef';
});
</script>
input - se declansaza cand se adauga date intr-un element de formular (sau alt tip de element cu atribut contenteditable). 
<h4>Exemplu input</h4>
<p>Scrieti ceva in caseta de text, evenimentul 'input' apeleaza o functie care afiseaza la #resp textul adaugat.</p>
Name: <input type='text' id='elm1'>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('elm1').addEventListener('input', (ev)=>{
 document.getElementById('resp').innerHTML = ev.target.value;
});
</script>
invalid - este emis cand la trimiterea formularului elementul la care se asociaza evenimentul nu e valid conform setarilor stabilite. 
<h4>Exemplu invalid</h4>
<p>Caseta urmatoare pentru email are atribut 'required' (trebuie completata), daca la trimiterea formularului (Submit) nu e completata sau nu e adaugata o adresa valida de email, se declansaza evenimentul 'invalid' si afiseaza mesaj la #resp.</p>
<form action='#'>
Email: <input type='email' required id='elm1'><br>
<input type='submit' value='Submit'>
</form>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('elm1').addEventListener('invalid', (ev)=>{
 document.getElementById('resp').innerHTML ='Adaugati o adresa valida de email';
});
</script>
reset - se executa cand se reseteaza datele din formular (cu butonul 'reset', sau metoda reset() ). 
<h4>Exemplu reset</h4>
<form id='frm1' action='#'>
Text: <input type='text' value='some-val'><br>
<input type='reset' value='Reset'>
</form>
<p> Modificati datele din formular apoi apasati butonul Reset.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
//se executa cand se reseteaza #frm1
document.getElementById('frm1').addEventListener('reset', (ev)=>{
 document.getElementById('resp').innerHTML ='Formularul e resetat.';
});
</script>
select - se emite cand e selectat text dintr-o caseta <input> sau <textarea>. 
<h4>Exemplu select</h4>
<p>Selectati textul din caseta.</p>
Name: <input type='text' value='MarPlo' id='elm1'>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('elm1').addEventListener('select', (ev)=>{
 document.getElementById('resp').innerHTML ='Ati efectuat selectare text.';
});
</script>
submit - se executa cand se trimite formular (cu butonul 'submit'). 
<h4>Exemplu submit</h4>
<form id='frm1' action='#'>
Text: <input type='text' name='txt1' placeholder='Minim 3 caractere'><br>
<input type='submit' value='Submit'>
</form>
<p> La trimiterea formularului (clic pe Submit), daca in caseta de text sunt mai putin de 3 caractere, afiseaza mesaj la #resp.<br>
 Daca sunt cel putin 3, trimite datele cu metoda submit().</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');

//se executa cand se trimite #frm1
frm1.addEventListener('submit', (ev)=>{
 //opreste trimiterea automata a form-ului
 ev.preventDefault();

 var tval = frm1['txt1'].value;
 if(tval.length <3) document.getElementById('resp').innerHTML ='Adaugati cel putin 3 caractere.';
 else frm1.submit();
});
</script>

Evenimente pentru tastatura

keydown - se emite cand e apasat un buton de la tastatura. 
<h4>Exemplu keydown</h4>
<p>Apasati pe butoane de la tastatura.</p>
<strong id='resp'></strong>

<script>
// window.top reprezinta fereastra principala din browser
window.top.addEventListener('keydown', (ev)=>{
 //adauga in #resp butonul apasat (ev.key)
 document.getElementById('resp').insertAdjacentHTML('beforeend', ev.key);
});
</script>
keypress - se declansaza cand e apasat un buton de la tastatura care produce un caracter (nu se emite la Alt, CapsLock, Ctrl, Shift). 
<h4>Exemplu keypress</h4>
<p>Apasati pe butoane de la tastatura.</p>
<strong id='resp'></strong>

<script>
// window.top reprezinta fereastra principala din browser
window.top.addEventListener('keypress', (ev)=>{
 //adauga in #resp butonul apasat (ev.key)
 document.getElementById('resp').insertAdjacentHTML('beforeend', ev.key);
});
</script>
keyup - se emite dupa ce este eliberata apasarea unui buton. 
<h4>Exemplu keyup</h4>
<p>Apasati pe butoane de la tastatura.</p>
<strong id='resp'></strong>

<script>
// window.top reprezinta fereastra principala din browser
window.top.addEventListener('keyup', (ev)=>{
 //adauga in #resp butonul apasat (ev.key)
 document.getElementById('resp').insertAdjacentHTML('beforeend', ev.key);
});
</script>

Evenimente pentru window

beforeunload - se declansaza cand fereastra si documentul urmeaza sa fie inchise, la refresh sau deschidere alt link in fereastra. Va afisa o fereastra prestabilita de browser care informeaza utilizatorul daca vrea sau nu sa paraseasca pagina. 
<h4>Exemplu beforeunload</h4>
<p>Dati clic pe acest buton: <button>Click</button>, se va inregistra evenimentul 'beforeunload'.<br>
Apoi apasati F5 sau inchideti fereastra.<br><br>
 - Ori, clic pe urmatorul link care deschide alt document in pagina; se va actiona evenimentul 'beforeunload'.<br>
 <a href='/'>Home Page</a>.</p>

<script>
window.addEventListener('beforeunload', (ev)=>{
 ev.returnValue ='Totul a trecut, si asta.';
});
</script>
hashchange - actioneaza cand se modifica partea #hash din adresa URL. 
<h4>Exemplu hashchange</h4>
<p>La clic pe urmatorul buton se schimba portiunea #hash din adresa URL, fapt ce va actiona evenimentul 'hashchange' care va adauga un mesaj la #resp.</p>
<button id='btn1'>Change hash</button>
<blockquote id='resp'>#resp</blockquote>

<script>
//window.top reprezinta fereastra principala (cu adresa din browser)
window.top.addEventListener('hashchange', (ev)=>{
 document.getElementById('resp').innerHTML ='Hash modificat: '+ top.location.hash;
});

document.getElementById('btn1').addEventListener('click', (ev)=>{
 top.location.hash ='new_hs';
});
</script>
pageshow - se declansaza dupa ce pagina (cu toate componentele) s-a incarcat complet.
- Similar cu 'load', diferenta fiind ca 'pageshow' se executa dupa 'load', chiar si cand e incarcata din cache sau history. 
<h4>Exemplu pageshow</h4>
<p>La 2 secunde dupa ce pagina s-a incarcat se afiseaza un mesaj la #resp.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
//window.top reprezinta fereastra principala
window.top.addEventListener('pageshow', (ev)=>{
 window.setTimeout(()=>{
 document.getElementById('resp').innerHTML ='Pagina s-a incarcat complet acum 2 secunde';
 });
});
</script>
resize - se executa cand se face 'resize' la fereastra paginii (cand dimensiunile ferestrei se modifica). 
<h4>Exemplu resize</h4>
<p>Incercati sa faceti resize la fereastra browser-ului.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var nr =0; //contoar resize
window.addEventListener('resize', (ev)=>{
 if(nr >0) document.getElementById('resp').innerHTML ='Ati modificat dimensiunile ferestrei de '+nr+' ori.';
 nr++;
});
</script>

Alte tipuri de evenimente

DOMContentLoaded - se ataseaza la obiectul document, si se executa cand toate elementele din pagina (documentul HTML) s-au incarcat in DOM, fara sa mai astepte incarcarea continutului extern (fisiere css, imagini, iframe).
- Nu functioneaza in <iframe>.

Puteti copia si incerca urmatorul exemplu:

<h4>Exemplu DOMContentLoaded</h4>
<p>Dupa incarcarea paginii se retine timpul de incarcare si inregistreaza eveniment 'click' la urmatorul buton.<br>
La click pe buton se afiseaza la #resp timpul de incarcare a paginii in DOM pana la executia DOMContentLoaded.</p>
<button id='btn1'>Time Load</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var start_time = window.performance.now();

//dupa ce s-a incarcat pagina in DOM
document.addEventListener('DOMContentLoaded', (ev)=>{
 //inregistreaza 'click' la #btn1
 document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML ='Documentul HTML incarcat in: <em>'+ load_time +'</em> milisecunde.';
 });

 //retine timpul de incarcare
 var load_time = window.performance.now() - start_time;
});
</script>
toggle - se declansaza cand elementul <details> este deschis sau inchis. 
<h4>Exemplu toggle</h4>
<p>Cand deschideti si inchideti urmatorul element &lt;details&gt;, afiseaza starea 'open'.</p>
<blockquote id='resp'>Deschideti details:</blockquote>
<details id='elm1'><summary>Pacea-i Buna.</summary>
<blockquote>
 Observarea in liniste aduce cunoastere.<br>
 Cunoasterea conduce la luminare.<br>
 Luminarea aduce eliberarea de iluzii si ... Pace.
</blockquote></details>

<script>
document.getElementById('elm1').addEventListener('toggle', (ev)=>{
 document.getElementById('resp').innerHTML ='Open: '+ ev.target.open;
});
</script>
touchmove - se declansaza cand utilizatorul misca degetul pe ecran (pentru dispozitive cu touch-screen). 
<h4>Exemplu touchmove</h4>
<p id='elm1'>- Pentru dispozitive cu touch-screen.<br>
Atingeti acest paragraf si mutati degetul pe el.<br>
La #resp vor fi afisate coordonatele X,Y ale atingerii.
</p>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('elm1').addEventListener('touchmove', (ev)=>{
 let x = ev.touches[0].clientX;
 let y = ev.touches[0].clientY;
 document.getElementById('resp').innerHTML = x+', '+ y;
});
</script>
transitionend - se declansaza cand un efect CSS transition s-a executat complet. 
<style> 
#elm1 {
width: 100px;
height: 100px;
background: #bebefb;
transition: width 2s;
}
#elm1:hover {
width: 420px;
}
</style>
<h4>Exemplu transitionend</h4>
<p>Pozitionati mouse-ul pe Div-ul urmator si asteptati 2 secunde sa se incheie efectul 'transition'.</p>
<div id='elm1'>Div</div>

<script>
document.getElementById('elm1').addEventListener('transitionend', (ev)=>{
 ev.target.innerHTML ='Efectul transition s-a incheiat.';
 ev.target.style.background ='#b0efb0';
});
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag adauga rand nou in paragraf?
<b> <br> <p>
Prima linie ...<br>
Alta linie...
Ce proprietate CSS seteaza spatiu dintre litere?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
Ce functie obtine accesul la un element HTML cu un anumit ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Clic pe instructiunea "echo" utilizata corect.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Adresa URL: http://CoursesWeb.net";
Care din urmatoarele expresii cu "paint" (a picta) se foloseste pentru forma Negativa?
will paint not paint have painted
She does not paint that landscape.
- Ea nu picteaza acel peisaj.
Care din urmatoarele expresii cu "cantar" (a canta) se foloseste pentru propozitie Negativa?
ir a cantar cantaba no cantar
Ella no canta esa canción.
- Ea nu canta acel cantec.
Lista evenimente JavaScript

Last accessed pages

  1. Accentul si Pronuntia (27627)
  2. Verbe modale - Modal verbs - CAN, COULD, MAY, MIGHT, MUST (66767)
  3. Prezentul simplu - Exercitii si teste incepatori (68696)
  4. Verbe reflexive 1 (10959)
  5. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (269996)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1035)
  2. Gramatica limbii engleze - Prezentare Generala (654)
  3. Exercitii engleza - English Tests and exercises - Grammar (594)
  4. Prezentul simplu si continuu - Present Tense Simple and Continuous (474)
  5. Coduri pt culori (395)