Почему событие <click> вызывается на моей <button>, когда я нажимаю Enter?

Я только добавляю обработчик событий click на <button>.

document.getElementsByTagName("button")[0].addEventListener("click", event => {
  event.preventDefault();

  console.log("Click:", event);
});

<button>Press <kbd>Enter</kbd> on me</button>

Ответ 1

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

Поведение задокументировано в спецификации HTML:

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

...

Для удобства доступа клавиши Enter и пробел часто используются для запуска поведения активации элементов.

Затем он продолжает объяснять шаги подробно.

Ответ 2

Потому что для пользователей клавиатуры (когда мышь недоступна), когда кнопка находится в фокусе и вы нажимаете Enter (возможно, также и Space), она имитирует событие щелчка.

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

Ответ 3

Это задокументировано в WCAG: SCR35: Доступ к действиям на клавиатуре с помощью события onclick якорей и кнопок:

В то время как onclick звучит так, как будто оно привязано к мыши, событие onclick фактически отображается в действие по умолчанию для ссылки или кнопки. Действие по умолчанию происходит, когда пользователь щелкает мышью по элементу, но оно также происходит, когда пользователь фокусирует элемент и нажимает enter или space, и когда элемент запускается через API доступности.

Об этом также говорится в разделе UIEVents/click:

В дополнение к тому, что он связан с указательными устройствами, тип click event ДОЛЖЕН быть отправлен как часть активации элемента, как описано в §3.5 Триггеры активации и поведение.

В пункте "Активация триггеров" говорится, что:

Инициируемые пользователем триггеры активации включают в себя нажатие кнопки мыши на активируемом элементе, нажатие Enter key, когда активируемый элемент имеет фокус, или нажатие клавиши, которая каким-либо образом связана с активируемым элементом (горячая клавиша или клавиша доступа), даже когда этот элемент не имеет фокуса.

Это означает, что любой из этих триггеров отправит событие click.