მოვლენების დამმუშავებლების განბლოკვა ციკლში JavaScript-ში

ახლა დავუშვათ, რომ გვაქვს არა ერთი ელემენტი, არამედ რამდენიმე. მაგალითად, რამდენიმე აბზაცი:

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

მოდით თითოეულ ამ აბზაცს დავუმატოთ ფუნქცია func როგორც დაწკაპუნების დამმუშავებელი:

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

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

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

ახლა მოდით შევცვალოთ კოდი ისე, რომ თითოეული აბზაცი რეაგირებდეს მხოლოდ პირველ დაწკაპუნებაზე. ამისთვის აბზაცზე დაწკაპუნებისას ჩვენ გავანბლოკავთ მასთან დაკავშირებულ დამმუშავებელს. ამ შემთხვევაში განბლოკვა მოხდება კონკრეტულად ამ აბზაცისთვის, სხვებს არ შეხება.

როგორც უკვე იცით, ელემენტი, რომელშიც მოხდა მოვლენა, შეგიძლიათ მიიღოთ ფუნქცია-დამმუშავებელში this-ის საშუალებით. ეს ნიშნავს, რომ უნდა შესრულდეს დამმუშავებლის განბლოკვა this-იდან, აი ასე:

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

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

function func() {
  console.log(this.textContent);
  this.removeEventListener('click', func); // ვანბლოკავთ დამმუშავებელს
}