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

Представьте что есть интерфейс какого-то модуля (пускай будет чат) у которого много кнопок (сюда же входят менюшки чата, диалоги и т.д. Так что кнопок точно больше 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". Что тоже коряво.

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

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


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

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

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

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

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