Объясните почему click() стоит перед addEventListener('click', () => resolve()), но слушатель всё равно выполнятся?

Question

Этот код мне написал chatGpt

function awaitAfterClick(selector) {
    return new Promise(resolve => {
    const element = document.querySelector(selector);
    element.click();
    element.addEventListener('click', () => resolve());
});
}

Он сказал, что не смотря на то, что element.addEventListener('click', () => resolve()); добавляется после клика он будет выполнен. Я не понимаю почему. Клик уже произошел, как будущий слушатель сможет обработать событие из прошлого?

Answer 1

В данном случае нет никакой связи между element.click(); и element.addEventListener('click', () => resolve());

У любого элемента по умолчанию есть обработчик click, который ничего не делает. В данном случае element.click(); вызовет именно его, если до этого не были добавлены какие-то другие обработчики. Именно он и будет вызван.

После этого будет добавлен новый обработчик element.addEventListener('click', () => resolve()); который завершит Promise. Однако выполнен он будет только после следующего клика по элементу.

Поэтому на вопрос как будущий слушатель сможет обработать событие из прошлого? - ответ - никак.

БЛОГ НА HUSL

Объясните почему click() стоит перед addEventListener('click', () => resolve()), но слушатель всё равно выполнятся?

Ответы (1 шт):