Чем отличается событие клика от button.click();?

Question

[urajo]

Есть два кода, первый вызывается на клику на кнопку, второй вызывается из скрипта

button.addEventListener('click', () => {
        Promise.resolve().then(() => console.log('Resolve promise 1'));
        console.log('Listener 1');
});
button.addEventListener('click', () => {
        Promise.resolve().then(() => console.log('Resolve promise 2'));
        console.log('Listener 2');
});

и

button.D('click', () => {
        Promise.resolve().then(() => console.log('Resolve promise 1'));
        console.log('Listener 1');
});
button.addEventListener('click', () => {
        Promise.resolve().then(() => console.log('Resolve promise 2'));
        console.log('Listener 2');
});
button.click();

почему они отрабатывают по разному? Какая это вообще тема в js?

Comments

[Вадим]

button.D(

Что такое .D ?

Чем отличается событие клика от button.click()

Событие вызывается когда пользователь нажмёт на кнопку.
button.click() - программный тригери клика на кнопке без участия пользователя. То есть клик из под скрипта.

Объект event, который пробросится в обработчик клика будет не одинаковый.
Например, будет отличаться свойство isTrusted - у программного клика будет false.

Ну и не на всё можно сделать клик программно.

[urajo]

Вадим, .D это я случайно, поправил.
Я понимаю что клики не одинаковые но в чем причина? Как вообще сформулировать гуглу запрос на эту тему, что бы статью какую-то почитать

[Вадим]

urajo, сейчас попробую найти конкретную статью где будет объяснение почему разный результат.
Это связано с эвент лупом.

[Вадим]

urajo, Дописал в ответ

Answer 1

[Вадим]

Чем отличается событие клика от button.click()

Событие вызывается когда пользователь нажмёт на кнопку.
button.click() - программный тригер клика на кнопке без участия пользователя. То есть клик из под скрипта.

Объект event, который пробросится в обработчик клика будет не одинаковый.
Например, будет отличаться свойство isTrusted - у программного клика будет false.

Ну и не на всё можно сделать клик програмно.

Как вообще сформулировать гуглу запрос на эту тему, что бы статью какую-то почитать

- События и обработка событий в javascript.
- Эвент луп, микро и макро таски

Ну и обо всём в js стоит начинать поиск отсюда https://learn.javascript.ru/
Например, события - https://learn.javascript.ru/introduction-browser-events

Вот тут вроде описано почему разные результат между пользовательским кликом и программным. Рекомендую всю статью к изучению
https://jakearchibald.com/2015/tasks-microtasks-qu...
Перевод на хабре: https://habr.com/ru/post/264993/

Answer 2

[Alexandroppolus]

https://qna.habr.com/q/1082296