@fgehte

Почему не удаляется событие?

Добрый день! С толкнулся с такой проблемой, когда программировал в функциональном стиле, проблем с удалением событий не было, сейчас практикуюсь в ООП стиле и почему-то при таком же алгоритме, событие не удаляется.
Подробнее написал в примере кода.
Примерный код(второстепенную информацию удалил):
// В функциональном стиле. В данном коде работает каждая функция и все открывается и закрывается как должно.
// При открытии модального окна навешивается обработчик на нажатие клавиши ESC и если окно открыто, то при
// нажатие ESC оно закрывается и вместе с закрытием удаляется обрабочик нажатия клавиши
	function bindModal() {
		modal.addEventListener(`click`, (evt) => {
			if (evt.target === modal) {
				closePopup()
			}
		})

		triggers.forEach(trigger => {
			trigger.addEventListener(`click`, () => openPopup())
		})
		
		closeModalBtn.addEventListener(`click`, () => closePopup())
	}

	function openPopup() {
		modal.style.display = `block`
		document.addEventListener(`keydown`, (evt) => onPopupCloseEscPress(evt))
	}
		
	function closePopup() {
		modal.style.display = ``
		document.removeEventListener(`keydown`, (evt) => onPopupCloseEscPress(evt))
	}

	function onPopupCloseEscPress(evt) {
		if (evt.key === `Escape`) {
			closePopup()
		}
	}

// В ООП стиле, код почти один в один
// В данном коде тоже все работает и даже при нажатие клавиши ESC всё закрывается, но если проверить
// и вывести в консоль event, то даже после закрытия overlay'я события продолжают выводиться в консоль.
	bindTriggers() {
		this.overlay.addEventListener(`click`, (evt) => {
			if (evt.target === this.overlay) {
				this.closeOverlay();
			}
		});

		this.close.addEventListener(`click`, () => this.closeOverlay())

		this.btns.forEach(btn => {
			btn.addEventListener(`click`, () => {
				this.openOverlay();
			});
		});
	}
	
	openOverlay() {
		this.overlay.style.display = `flex`;
		document.addEventListener(`keydown`, (evt) => this.onOverlayCloseEscPress(evt))
	}
	
	closeOverlay() {
		this.overlay.style.display = `none`;
		document.removeEventListener(`keydown`, (evt) => this.onOverlayCloseEscPress(evt))
	}

	onOverlayCloseEscPress(evt) {
		if (evt.key === `Escape`) {
			this.closeOverlay();
                        console.log(evt)
		}
	}
  • Вопрос задан
  • 130 просмотров
Решения вопроса 1
bingo347
@bingo347 Куратор тега JavaScript
Бородатый программер
проблем с удалением событий не было
Разве?
В обоих вариантах обработчики не будут удаляться.
В removeEventListener нужно передавать тот же самый listener, что и был передан в addEventListener.
Обратите внимание, что именно не такой же, а тот же самый.
ТО есть вот так удалится:
const listener = event => console.log(event);
element.addEventListener('click', listener);
element.removeEventListener('click', listener);

А так уже нет:
element.addEventListener('click', event => console.log(event));
element.removeEventListener('click', event => console.log(event));
ибо это 2 разные функции, не смотря на то, что делают одно и то же, и одинаковы до каждого символа.

P.S.
когда программировал в функциональном стиле
то что в обоих Ваших примерах - это процедурный стиль. От того что Вы завернули код в класс - он не становится ООП, как и то что написали набор функции - не ФП.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы