Cuvintele speciale "this" si "target" pot fi utilizate in evenimente JavaScript pentru a obtine elementul asociat la evenimentul inregistrat.
- "this" - reprezinta obiectul la care a fost inregistrat evenimentul in codul javascript.
- "target" - e o proprietate pt evenimente. "e.target" este elementul care declanseaza evenimentul (pe care se executa actiunea).
obiect.eveiment = function(e) {
// aici se poate folosi e.target
}
"this" si "e.target" fac diferenta dintre obiectul la care este inregistrat evenimentul si elementul care-l declanseaza. De multe ori reprezinta acelasi element, dar nu mereu, in special cand se lucreaza cu elemente parinte si copil.
<!doctype html>
<html lang="ro">
<head>
<meta charset="utf-8" />
<title>Exemplu this si target</title>
<style type="text/css">
#parinte {
height: 7em;
background: #00da01;
padding: 1em;
}
#copil {
height: 80%;
margin: 0.5em 1.5em;
background: #8889fe;
}
</style>
</head>
<body>
<div id="parinte">Parinte
<div id="copil">Copil</div>
</div>
<script type="text/javascript">
document.getElementById('parinte').onclick = function(e) {
var id1 = this.id;
var id2 = e.target.id;
alert('this = '+ id1 +'\n e.target = '+ id2);
}
</script>
</body>
</html>
Demo, clic pe Copil (dreptunghiul albastru), apoi pe Parinte (suprafata verde), si vedeti diferenta in fereastra alert.
<!doctype html>
<html lang="ro">
<head>
<meta charset="utf-8" />
<title>Exemplu this si target</title>
<style type="text/css">
#parinte {
height: 7em;
background: #00da01;
padding: 1em;
}
#copil {
height: 80%;
margin: 0.5em 1.5em;
background: #8889fe;
}
</style>
</head>
<body>
<div id="parinte">Parinte
<div id="copil">Copil</div>
</div>
<script type="text/javascript">
document.getElementById('parinte').onclick = function(e) {
if(this === e.target) {
alert(this.id);
}
}
</script>
</body>
</html>
Demo, clic pe Copil (dreptunghiul albastru), apoi pe Parinte (suprafata verde).
<p>Adresa: <strong>http://CoursesWeb.net/</strong> - Tutoriale.</p>
#id {
font-weight: 800;
}function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);$vname = 8; echo $vname;
We have traveled in space. - Noi am calatorit (deja) in spatiu.
La niña pintaba un arco iris. - Fetita picta un curcubeu.