Оптимизация target.parentNode или как убрать апаттерн «Магическая кнопка»?

Question

[Mesuti]

Привет!
Есть калькулятор с динамическими селектами.
Чтобы они работали, вешаю клики на документ и сравниваю класс у таргета.
Однако, количество таких элементов вырастает и код становится какой-то абстрактной колбасой со сравнениями и множеством parentNode.

По какому правилу или паттерну можно оптимизировать клики по динамическим элементам?
Чтобы все выглядело не только красиво и компактно, но и было расширяемо?

Comments

[Пашенька]

Использовать один обработчик клика на документе.
Внутри использовать switch-case.
Код выполняющий работу повыносить в функции.
Станет расширяемо и легко читаемо.

[Mesuti]

Пашенька, спасибо за ответ!
Про switch не подумал.

В функциях также указывать parentNode у входящих аргументов?

[Пашенька]

Mesuti, в функцию можете передавать как event.target так и event.target.parentElement, но здесь уже происходит зависимость от вложенности разметки. Лучше, конечно, такого избегать и работать либо только с целевым элементом, либо передавать какой-то общий контейнер event.target.closest('.element-wrapper'), который точно не планируется со временем менять, а внутри функции уже искать, например, по классу внутри этого контейнера (arg): arg.querySelector('.some-class'). Это сделает код чуть менее зависимым от структуры разметки, которая может со временем поменяться, а значит чуть более надёжным.

[Mesuti]

Пашенька, спасибо за объяснение.
Разместите ответ в теме, отмечу решением