Обработчик одного события «клик» для всей страницы ⇐ Javascript

[Anonymous]

Это странный вопрос. Я думаю, что у меня есть то, что я хочу сделать, но я не уверен, почему это работает и хорошая ли это идея.
Я очень новичок в JavaScript и надеюсь, что кто-нибудь поможет мне понять и то, и другое.
Мое приложение создает страницу динамически и содержит множество кнопок, которые при нажатии изменяют страницу и создают больше ссылок.
Изначально я написал функцию для создания кнопки, добавил обработчик события щелчка с помощью встроенная функция, которая обычно делает что-то сложное — вызывает несколько функций со сложными параметрами.

Код: Выделить всё

const addType1Button = (label, func, args) => {
const id = crypto.randomUUID();

const html = `${label} - Click Me

leftSideDiv.addEventListener('click', ev => {
func(..args);
})
}

Затем в разных местах моего кода я много раз вызываю что-то вроде `addType1Button("label", doSomething, ["A", "B"])`, и это работает нормально, но, конечно, в конечном итоге я получаю много прослушивателей событий (в конечном итоге сотни или тысячи) и нет очевидного способа их удалить. Я пытался использовать метод AbortController, о котором читал, но не смог заставить его работать.
Мой новый подход заключается в том, чтобы создавать фрагменты HTML таким же образом с уникальным идентификатором, помещать объект с идентификатором и функцией в массив каждый раз, когда я создаю кнопку.

Код: Выделить всё

const addType1Button = (label, func, args) => {
const id = crypto.randomUUID();

const html = `${label} - Click Me

handlers.push({
id: id,
fn: () => {
func(...args)
};
}
}

Затем у меня есть прослушиватель событий одного клика в документе, и обработчик для него просматривает массив обработчиков на предмет соответствующего идентификатора во входящем событии и, если он найден, вызывает функцию.
Так как массив обработчиков просто растет вечно, но я хочу иметь некоторый код, который периодически удаляет неиспользуемые записи.
Это работает хорошо, но разумен ли такой подход?
/>Как функция, помещенная в массив, сохраняет значения функции и аргументов, которые передаются в функцию, в которой она вызывается?
Приложение имеет разные разделы (на самом деле элементы div), поэтому мой план остановить слишком большой рост массива состоял в том, чтобы добавить имя раздела к каждой записи обработчика, и поэтому, когда этот раздел воссоздается после нажатия кнопки где-то еще, я просматриваю массив обработчиков и удаляю все записи, соответствующие разделу, который я воссоздаю.
/>Мой вопрос: ужасно ли неэффективно сканировать массив из нескольких сотен объектов, искать строку в одном из объектов и затем удалять ее из массива?
Заранее спасибо — этот подход станет основой для чего-то более сложного, и я хочу сделать все правильно и убедиться, что я все понимаю, прежде чем продолжить.>

Подробнее здесь: https://stackoverflow.com/questions/798 ... whole-page