Что касается прослушивателей событий в JavaScript, существует несколько способов обработки событий в родительских элементах, а не непосредственно в их дочерних элементах. Вот несколько методов, которые вы можете использовать:

1. Делегирование событий. Используя делегирование событий, вы прикрепляете один прослушиватель событий к родительскому элементу и фиксируете события по мере их появления из дочерних элементов. Таким образом, вы можете обрабатывать события нескольких дочерних элементов, используя один прослушиватель. Вы можете проверить цель события, чтобы определить, какой дочерний элемент вызвал событие.

Пример:

document.addEventListener('click', function(event) {
  if (event.target.classList.contains('child-element')) {
    // Event handling logic for child elements
  }
});

Метод
2. closest. Метод closestпозволяет найти ближайший элемент-предок, соответствующий данному селектору. Вы можете прикрепить прослушиватель событий к родительскому элементу, а затем проверить, соответствует ли цель события или его предки желаемому дочернему элементу.

Пример:

document.addEventListener('click', function(event) {
  if (event.target.closest('.child-element')) {
    // Event handling logic for child elements
  }
});

Метод
3. matches: метод matchesпроверяет, соответствует ли элемент определенному селектору. Вы можете использовать этот метод в сочетании с всплытием событий, чтобы определить, соответствуют ли цель события или его предки желаемому дочернему элементу.

Пример:

document.addEventListener('click', function(event) {
  if (event.target.matches('.child-element')) {
    // Event handling logic for child elements
  }
});

Эти методы позволяют обрабатывать события в дочерних элементах, присоединяя прослушиватели событий к их родительским элементам. Это может быть полезно при работе с динамически создаваемыми или часто изменяющимися дочерними элементами.