Оптимизация target.parentNode или как убрать апаттерн «Магическая кнопка»?
Привет!
Есть калькулятор с динамическими селектами.
Чтобы они работали, вешаю клики на документ и сравниваю класс у таргета.
Однако, количество таких элементов вырастает и код становится какой-то абстрактной колбасой со сравнениями и множеством parentNode.
По какому правилу или паттерну можно оптимизировать клики по динамическим элементам?
Чтобы все выглядело не только красиво и компактно, но и было расширяемо?
Использовать один обработчик клика на документе.
Внутри использовать switch-case.
Код выполняющий работу повыносить в функции.
Станет расширяемо и легко читаемо.
Mesuti, в функцию можете передавать как event.target так и event.target.parentElement, но здесь уже происходит зависимость от вложенности разметки. Лучше, конечно, такого избегать и работать либо только с целевым элементом, либо передавать какой-то общий контейнер event.target.closest('.element-wrapper'), который точно не планируется со временем менять, а внутри функции уже искать, например, по классу внутри этого контейнера (arg): arg.querySelector('.some-class'). Это сделает код чуть менее зависимым от структуры разметки, которая может со временем поменяться, а значит чуть более надёжным.
