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

Question

[Алексей]

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

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

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

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

Может быть есть способ лаконичнее?

Answer 1

[Александр Черемхин]

Стандартное решение вешать событие event click на внешний блок <div/>.
Тогда в event.currentTarget - получите элемент на котором событие произошло, ну и далее логика Ваша.

P.S. Приз моих симпатий за внятно сформулированный вопрос.

Comments

[Алексей]

Если я повешу событие на .chat то в event.currentTarget я получу именно .chat, а не нажатый элемент. Нажатый элемент я получаю при event.target

Вы видимо именно это имели в виду? Но тогда как мне понять что нажатый элемент это именно тот что мне нужен? Я знаю лишь способ с методом .closest()

[Александр Черемхин]

Нажатый элемент я получаю при event.target

Именно так, я ошибся.

Но тогда как мне понять что нажатый элемент это именно тот что мне нужен?

Можно по атрибутам элемента. Например по id кнопки. Обработчик ниже.

$('#parentBlock').on('click',  function(event){
     const  $chat = $('#chat')
     switch(event.target.id){  // id нажатой кнопки
       case "remove-select-txt": {
           event.preventDefault(); // ?  если нужно 
          //  удалить выделенное  в #chat 
          breack;
       }
       case "bold-select-text":{
          //  отметить жирным выделенное
          breack;
       }
     }
  })

Answer 2

[Александр Епихин]

Может так

Comments

[Алексей]

Классное решение! Но почему бы не заменить

Object.prototype.hasOwnProperty.call(handlers, handlerName)

на
handlers.hasOwnProperty(handlerName)

[Александр Епихин]

Ответ на Stack Overflow

[Алексей]

Александр Епихин, Спасибо. Понял