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).

• Ca sa puteti utiliza proprietatea "target" trebuie sa adaugati un parametru la functia cu evenimentul.
Sintaxa:
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.
- Iata un exemplu. Un DIV #parinte cu un DIV #copil in el. Eveniment onclick inregistrat la #parinte, si se obtine ID-ul elementului returnat de "this" si "e.target".
<!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.
Parinte
Copil
• Lucrul cu "this" si "e.target" in evenimente e util de exemplu cand se inregistreaza un eveiment la un obiect cu instructiuni care sa nu fie aplicate si la elementele copil. Sau cnd trebuie lucrat exact cu elementul pe care se declanseaza evenimentul (se preia cu "e.target").
- In urmatorul exemplu fereastra alert e afisata doar la clic pe DIV-ul Parinte.
<!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).
Parinte
Copil

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag e folosit pentru a adauga liste cu definitii in element <dl>?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>
Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?
display position visibility
#id {
  visibility: hidden;
}
Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}
Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Care din urmatoarele cuvinte reprezinta un Verb?
lighting believe path
I believe in my path.
- Eu cred in calea mea.
Care din urmatoarele cuvinte reprezinta un Verb?
creer camino iluminaciĆ³n
creer = a crede; camino = cale /drum; iluminaciĆ³n = iluminare
this si target in Evenimente

Last accessed pages

  1. Gradele de comparatie: comparative, superlative (16088)
  2. Adjectivul in limba engleza - The adjective (10139)
  3. Gramatica limbii engleze - Prezentare Generala (101146)
  4. Conditional IF in Limba Engleza - Fraze Conditionale (38015)
  5. Viitor perfect si Viitorul perfect continuu - Future perfect and Continuous (9363)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (3158)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (2345)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1782)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1367)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1307)