Здравейте, преди тази статия трябва да имате представа как 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.
Това е. Надявам се да ви е било полезно. наздраве!