Diferente metode adaugare evenimente

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
patricia
Mesaje:82

Diferente metode adaugare evenimente

Care e diferenta dintre metoda cross-browser si adaugarea evenimentelor prin adaugarea in eticheta html dupa metoda veche, e vreuna din ele mai eficienta decat cealalta?
Daca da, in ce situatii?
MarPlo Mesaje:4343
Salut
Exista mai multe metode de inregistrare evenimente in JavaScript, cunosc 3.
1. Cea mai putin folosita este aceasta:

Cod: Selectaţi tot

element.addEventListener('eveniment', nume_functie_apelata, true);
Exemplu:

Cod: Selectaţi tot

<div id="thediv">Clic</div>

<script type="text/javascript"><!--
function test(){
  alert(this.id);
}
var oDiv = document.getElementById('thediv');
oDiv.addEventListener('click', test, true);
//-->
</script>
- Dezavantaj, aceasta metoda nu e recunoscuta in Internet Explorer (cel putin in versiuni 8 si mai vechi).

2. Metoda cea mai indicata este aceasta (e recunoscuta in toate navigatoarele web):

Cod: Selectaţi tot

obiect.eveniment = nume_functie_apelata;
- Dezavantaj, cand sunt sterse sau adaugate dinamic (cu JS) elemente in pagina, inregistrarea eveniment-ului la obiectul respectiv se pierde deoarece ierarhia DOM din pagina a fost modificata.
Exemplu:

Cod: Selectaţi tot

<body>
<div id="thediv">Clic</div>

<script type="text/javascript"><!--
function test(){
  document.body.innerHTML = document.body.innerHTML+ '<p>Element nou</p>';
  alert('Clic iar');
}
document.getElementById('thediv').onclick = test;
//-->
</script>
</body>
- O solutie ca evenimentul sa functioneze si dupa stergere /adaugare dinamic elemente in pagina esta ca inregistrarea evenimentelor sa fie adaugate intr-o functie care sa fie apelata si dupa ce au fost sterse /adaugate dinamic elemente in pagina, astfel evenimentele sunt inregistrate din nou.
Erxemplu:

Cod: Selectaţi tot

<body>
<div id="thediv">Clic</div>

<script type="text/javascript"><!--
function test(){
  document.body.innerHTML = document.body.innerHTML+ '<p>Element nou</p>';
  alert('Clic iar');
  regEvents();      // inregistreaza iar evenimentul
}

function regEvents() {
 document.getElementById('thediv').onclick = test;
}
regEvents();     // inregistreaza evenimentul
//-->
</script>
</body>
3. Metoda veche este adaugarea evenimentului in tag-ul HTML. Aceasta nu e afectata de adaugare /stergere dinamic elemente in pagina.
Exemplu:

Cod: Selectaţi tot

<div onclick="functie_apelata();">Clic</div>
- Dezavantaj, amestecarea codului HTML si JavaScript imprastiat in pagina.
Daca de exemplu se doreste inregistrarea eveniment-ului "onclick" la 5 elemente cu aceeasi "class", trebuie adaugat in fiecare tag, in plus, in cazul cand se doreste efectuarea anumitor modificari, sau schimbari de template, e mai mult de munca, deoarece trebuie facute la fiecare tag.
Tendinta e de a separa cat mai mult codurile HTML, CSS si JavaScript unele de altele. Dar normal, acolo unde e necesar se foloseste si adaugarea evenimentului in tag.

Subiecte similare