#javascript #typescript
#javascript #typescript
Вопрос:
Я работаю над проектом, использующим TypeScript
, и я сталкиваюсь с проблемой, связанной с элементами, имеющими дубликаты addEventListener
.
Способ работы приложения заключается в том, что при первой загрузке страницы ничего не выполняется. Все TS
классы продолжают работать в ожидании отправки события. Это событие поступает из серверной части, которая сообщает приложению, что оно готово к запуску.
const dbEvent = new CustomEvent("backendLoadEvent");
document.dispatchEvent(dbEvent);
Когда TS
класс получает это событие, он начинает сам проходить через dom, получая элементы и применяя все eventListeners
необходимое для его правильной работы.
Внутри TS
файла я добавлю слушателя так же, как обычно:
const btnOrder = document.getElementById('btn-order');
btnOrder.addEventListener('click', function (e) {
// Business logic here
console.log('debug button order click');
});
Проблема в том, что серверная часть запускается несколько раз, что приводит к тому, что нажатие кнопки выполняется также несколько раз. Например, иногда console.log
внутри события щелчок срабатывает дважды одновременно.
Я пытался сделать что-то вроде этого:
const btnOrder = document.getElementById('btn-order');
if (btnOrder.getAttribute('listener') !== 'true') {
btnOrder.addEventListener('click', function (e) {
const elementClicked = e.target;
elementClicked.setAttribute('listener', 'true');
});
}
Проблема с этим подходом заключается в том, что он полагается на щелчок, поэтому, если пользователь нажимает после второго события из базы данных, это не сработает. Я не знаю, когда событие поступит в приложение и когда пользователь нажмет на кнопку.
Есть ли другой подход, который я мог бы использовать, чтобы предотвратить такое поведение?
Обратите внимание, что это простой пример, но в некоторых элементах страницы происходит много событий, это проект панели мониторинга. Итак, у нас есть такие модальности, как open / close, упорядочивание и фильтрация таблиц, добавление, удаление и редактирование элементов в таблице и так далее…
Комментарии:
1. Есть шанс, что вместо того, чтобы прикреплять прослушиватели событий к элементам, вам действительно нужно делегирование событий.
2. @zerkms это уже улучшило бы мой код, потому что мне не нужно вручную объявлять несколько addEventListener. Но как это предотвращает повторное добавление события? Даже если это родительский элемент в dom?
3. Вы добавляете его только один раз при загрузке приложения.
4. @zerkms Да, но, например, если у меня есть таблица, которую нужно отсортировать по имени, если серверной части потребуется больше времени, чтобы предоставить мне данные, кнопка будет готова к нажатию до поступления данных, и если пользователь нажмет, он выдаст ошибку, поскольку нет элемента для сортировки.быть отсортированным. Я что-то здесь упускаю?
5. В обработчике кнопок вы добавляете столько логики, сколько вам нужно.