Здравейте, преди тази статия трябва да имате представа как js работи с html.

Събитията в javascript са неща, които са прикачени към елементи на уеб страницата. Например, ако потребител „щракне“ върху бутон, събитието „щракване“ се задейства и можем да изпълним нашия код въз основа на събитието за щракване.

За да постигнем това, можем да използваме EventListener() в js, който има три параметъра.

  • Първият параметър е типът на събитието като „щракване“.
  • Вторият параметър е функцията, която искаме да извикаме, когато настъпи събитието.
  • Третият параметър не е задължителен и представлява обект, който указва характеристики за слушателя на събития и едно от това свойство ще бъде използвано по-долу. Не се тревожете!

По-долу е даден пример за слушател на събития.

Когато щракна върху бутона, се задейства събитие за щракване и на екрана се отпечатва Hi. Забележка: Щракнах върху бутона 8 пъти и Здравей се отпечатва 8 пъти. Така че понякога трябва да премахнем списъците на събития, например след едно изпълнение или може би когато се достигне определена стойност, тогава може би. Ще ги обсъдя по-долу

Има три начина за премахване на слушатели на събития в js.

1. Използване на свойството веднъж: true в обекта с опции в незадължителния параметър на програмата за проследяване на събития

Задайте {once: true} в обект с опции, както е показано по-долу

Без значение колко пъти щракнах върху бутона, събитието „щракване“ се задейства само веднъж и след това премина в режим на заспиване. Разбира се, тогава функцията също ще бъде изпълнена веднъж, тъй като зависи от стартирането на събитието. И така, разбра ли мисълта ми?

2. Използване на removeEventListener()

removeEventListener() също очаква два задължителни и един обект с опции.

  • Първият параметър е типът на събитието като „щракване“, което трябва да бъде премахнато.
  • Вторият параметър е функцията, срещу която записахме при задействане на това събитие

Изпълнението на функцията се случи само веднъж, точно както в горния пример. Можете да тествате сами.

Забележка:- removeEventListener() също има същите параметри като add EventListener()

3. Използване на AbortController()

Този метод не е много популярен, но е много ефективен. Например искате да премахнете събитие въз основа на определено условие, тогава това е най-добрият метод. Имам брояч, докато щраквам, броячът се увеличава, но веднага щом достигне стойността 3, искам да премахна събитието за щракване и да спра брояча. Нека разгледаме кода по-долу

Можете да използвате свойството на сигнала в обекта с опции на програмата за проследяване на събития и да използвате AbortController(), наличен в js. Това е вграден клас в js и можете да използвате неговите методи и променливи.

Срещу свойството на сигнала вие ще предоставите променливата на сигнала на обекта на контролера и когато условието ви бъде достигнато, можете да използвате controller.abort(), за да премахнете слушателя на събития.

Веднага след като стойността стана === 3, тя беше премахната и стойността никога не беше отпечатана, защото събитието не се задейства и func не се изпълни и затова стойността не беше отпечатана, но сега броячът определено има стойност, равна на 3.

Това е. Надявам се да ви е било полезно. наздраве!