Что происходит с событием если оно на уровне выше

Событие в DOM всплывает (bubbling) от элемента, на котором произошло, вверх по дереву DOM. Если событие не остановлено (event.stopPropagation()), оно будет обработано всеми родительскими элементами, пока не достигнет document.

Пример:

document.querySelector('.child').addEventListener('click', (e) => {
  console.log('Child clicked');
});

document.querySelector('.parent').addEventListener('click', () => {
  console.log('Parent clicked');
});

При клике на .child сначала сработает его обработчик, затем родительский. Если нужно остановить всплытие:

e.stopPropagation();

Также можно использовать event.stopImmediatePropagation() для полной остановки обработки события.