Îndepărtarea handlerelor de evenimente într-o buclă în JavaScript
Să presupunem că acum avem nu un singur element, ci mai multe. De exemplu, mai multe paragrafe:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Să atașăm fiecăruia dintre aceste paragrafe funcția
func ca handler de click:
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', func);
}
function func() {
console.log(this.textContent);
}
Acum să modificăm codul astfel încât fiecare paragraf să reacționeze doar la prima apăsare pe el. Pentru aceasta, la click pe paragraf vom îndepărta handler-ul atașat acestuia. În același timp, îndepărtarea se va face specific de la acest paragraf, fără a afecta celelalte.
După cum știți deja, elementul în care a avut loc
evenimentul poate fi obținut în funcția-handler
prin this. Aceasta înseamnă că este necesar
să executăm îndepărtarea handler-ului de la this,
astfel:
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', func);
}
function func() {
console.log(this.textContent);
this.removeEventListener('click', func); // îndepărtăm handler-ul
}
Sunt date paragrafe. La apăsarea pe orice paragraf adăugați-i la sfârșit semnul exclamării. Faceți astfel încât această adăugare să aibă loc doar la prima apăsare.
