Как лучше задать события когда много элементов?

Представьте что есть интерфейс какого-то модуля (пускай будет чат) у которого много кнопок (сюда же входят менюшки чата, диалоги и т.д. Так что кнопок точно больше 30, а вдруг их 100 и больше).

На все эти кнопки нужно навесить обработчики для выполнения определенной задачи. В верстке все эти кнопки являются потомками div с классом chat.

Вешать обработчик на каждую кнопку отдельно - на мой взгляд глупо. Хотел бы использовать всплытие событий и повесить клик на div(class="chat"). Но как действовать дальше?

Если создавать проверки типа
if (event.target.closest('.меню')) {
  ... какое то действие
}
if (event.target.closest('.кнопка1')) {
  ... какое то действие
}


То в этом случае всплытие события идет дальше и если верстка будет такой

<div class="меню">
  <button class="кнопка1">Кнопка
</div>


то вызовутся оба события.

Отменять всплытие не хочу, т.к есть скрипты с аналитикой, которые могут недосчитаться кликов.
Если в каждом if добавить return, то нужно следить за тем чтобы проверка "меню" была позже чем проверка "кнопка1". Что тоже коряво.

Мне видится лишь одно решение - вместо одного события на весь чат разделять события по блокам:

  • блок меню
  • блок отправки сообщений и т.д


и уже для них создавать обработчики с внутренними проверками

Может быть есть способ лаконичнее?
  • Вопрос задан
  • 525 просмотров
Решения вопроса 2
@Che603000
c 2011 javascript
Стандартное решение вешать событие event click на внешний блок <div/>.
Тогда в event.currentTarget - получите элемент на котором событие произошло, ну и далее логика Ваша.

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

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

Войти через центр авторизации
Похожие вопросы
10 апр. 2020, в 16:15
60000 руб./за проект
10 апр. 2020, в 16:12
1000 руб./в час
10 апр. 2020, в 16:09
500 руб./в час