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