Одвајање руковаоца догађајима у петљи у JavaScript-у

Нека сада имамо не један елемент, већ неколико. На пример, неколико пасуса:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Хајде да сваком од ових пасуса руковаоцем клика вежемо функцију func:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

function func() {
	console.log(this.textContent);
}

Хајде сада да променимо код тако да сваки пасус реагује само на прво кликнуће на њега. За то ћемо при клику на пасус одвезати од њега везани руковалац. При томе ће одвезивање бити конкретно од овог пасуса, не утичући на остале.

Као што већ знате, елемент у ком се десио догађај, може се добити у функцији-руковаоцу преко this. То значи да треба обавити одвезивање руковаоца од this, овako:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // одвезујемо руковалац
}

Дати су пасуси. При клику на било који пасус додајте му на крај узвичник. Направите да се то додавање дешава само при првом клику.