this si target in Evenimente

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

<<-Rotire obiecte HTML Div .. -- Drag si Drop cu ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care atribut face ca optiunea din <select> sa fie selectata?

checked="checked" selected="selected" disabled="disabled"

<select name="a_name">
 <option value="val1">Optiune 1</option>
 <option value="val2" selected="selected">Optiune 2</option>
</select>

Care din aceste valori CSS creaza culoare gradient pentru fundal?

contain repeat-x linear-gradient

#id {
  background: linear-gradient(top left, #1f1, #fff, #11f);
}

Care cod creaza un array in JavaScript?

[] {} new Object()

var arr = [1, "CoursesWeb.net", "MarPlo.net"];
alert(arr[2]);

Indicati functia PHP folosita pentru redirect la alta pagina.

function() header() switch()

header("Location: http://coursesweb.net/");
exit;

Indicati articolul corect la cuvantul "garden" in propozitia: "... garden is a place with flowers".

An The A

The garden is a place with flowers.
- Gradina este un loc cu flori.

Indicati articolul corect pentru cuvantul: "jardín" (gradina)

la los el

El jardín es un lugar de flores.
- Gradina e un loc cu flori.