Привет! Прежде чем читать эту статью, вы должны иметь представление о том, как js работает с html.

События в javascript — это вещи, которые привязаны к элементам веб-страницы. Например, если пользователь «нажимает» на кнопку, запускается событие «щелчок», и мы можем выполнить наш код на основе события нажатия.

Для этого мы можем использовать EventListener() в js с тремя параметрами.

  • Первый параметр — это тип события, например щелчок.
  • Второй параметр — это функция, которую мы хотим вызвать при возникновении события.
  • Третий параметр является необязательным и представляет собой объект, определяющий характеристики прослушивателя событий, и одно из этих свойств будет использоваться ниже. Не волнуйся!

Ниже приведен пример прослушивателя событий.

Когда я нажимаю на кнопку, запускается событие click, и на экране печатается привет. Примечание. Я нажал кнопку 8 раз, и Hi печатается 8 раз. Поэтому иногда нам нужно удалить списки событий, например, после однократного запуска или, может быть, когда будет достигнуто определенное значение. я расскажу о них ниже

Есть три способа удалить прослушиватели событий в js.

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

Установите {once: true} в объекте параметров, как показано ниже.

Независимо от того, сколько раз я нажимал кнопку, событие «щелчок» срабатывало только один раз, а затем переходило в своего рода спящий режим. Конечно, тогда функция также будет выполняться один раз, так как это зависит от запуска события. Так понял мою мысль?

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

removeEventListener() также ожидает два обязательных объекта и один объект параметров.

  • Первый параметр — это тип события, например щелчка, который следует удалить.
  • Второй параметр — это функция, которую мы записали при запуске этого события.

Выполнение функции произошло только один раз, как и в приведенном выше примере. Вы можете протестировать сами.

Примечание: removeEventListener() также имеет те же параметры, что и add EventListener().

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

Этот метод не очень популярен, но очень эффективен. Например, вы хотите удалить событие на основе определенного условия, тогда это лучший способ. У меня есть счетчик, когда я нажимаю, счетчик увеличивается, но как только он достигает значения 3, я хочу удалить событие щелчка и остановить счетчик. Давайте посмотрим на код ниже

Вы можете использовать свойство сигнала в объекте параметров списка событий и использовать AbortController(), доступный в js. Это встроенный класс в js, и вы можете использовать его методы и переменные.

В качестве свойства сигнала вы указываете сигнальную переменную объекта контроллера, и когда ваше условие достигнуто, вы можете использовать controller.abort() для удаления прослушивателя событий.

Как только значение стало === 3, оно было удалено, и значение больше не было напечатано, потому что событие не сработало, а функция не выполнилась, и поэтому значение не было напечатано, но теперь счетчик определенно имеет значение, равное 3.

Вот и все. Я надеялся, что вы нашли это полезным. Ваше здоровье!