Avkoppling av händelsehanterare i loop i JavaScript
Antag nu att vi inte har ett element, utan flera. Till exempel, flera stycken:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Låt oss koppla funktionen func till
var och en av dessa stycken som en klickhändelsehanterare:
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', func);
}
function func() {
console.log(this.textContent);
}
Låt oss nu ändra koden så att varje stycke endast reagerar på det första trycket på det. För att göra detta, när du klickar på ett stycke kommer vi att koppla bort den kopplade hanteraren från det. Avkopplingen kommer specifikt att gälla just detta stycke, utan att påverka de andra.
Som du redan vet kan elementet där händelsen inträffade
fås i funktionshanteraren
via this. Detta betyder att det är nödvändigt
att utföra avkoppling av hanteraren från this,
så här:
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', func);
}
function func() {
console.log(this.textContent);
this.removeEventListener('click', func); // kopplar bort hanteraren
}
Det finns stycken. När du klickar på något av styckena lägg till ett utropstecken i slutet av det. Se till att detta tillägg endast sker för det första klicket.
