Why does a `click` event get triggered on my <button> when I press Enter on it?

Question

I'm only adding a click event handler on my <button>.

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

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

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

(Demo link)

Nevertheless, when I tab to the button in Firefox, then press Enter, I see the click event being fired. However, I cannot see this behaviour documented anywhere. Is this standard behaviour, and can I count on it working in all browsers?

Answer 1

This is largely because lots of authors have historically written code using click events while forgetting to account for users who don't click (whether because they prefer to use a keyboard to navigate, have a disability which makes it hard to use a pointing device, or whatever other reason).

The behaviour is documented in the HTML specification:

Certain elements in HTML have an activation behavior, which means that the user can activate them. This triggers a sequence of events dependent on the activation mechanism, and normally culminating in a click event, as described below.

…

For accessibility, the keyboard’s Enter and Space keys are often used to trigger an element’s activation behavior.

It then goes on to explain the steps in detail.