Which event should be used for buttons?

Question

I have a button and I want to perform an action if the user fires this button.

I remember being told that the click event should not be used for this purpose because it only fires if the user, well, clicks the button and not if keyboard is used; BUT, in practice this does not seem to be the case:

document.getElementById('asdf').onclick = () => {
  document.getElementById('log').appendChild(
    document.createTextNode('click\n')
  )
}

<button id="asdf">Press me</button>
<pre id="log"></pre>

It would seem that the spacebar fires the click event just fine!

This seems contrary to the MDN docs about click, which say:

An element receives a click event when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.

Is it, therefore, OK to use click?

If it is not, which event should I use?

Should it be submit?

If so, isn't submit only related to the <form> tag, not a <button> tag as stated per the MDN?

space and enter fire the click event on buttons. There are people that do not use a mouse and space is used in a lot of inputs to perform the action. — epascarello, Sep 19 '19 at 18:13

James Taber · Accepted Answer · 2019-09-19T18:57:21.193

An actual click, pressing enter (when the button has focus), and pressing of the space bar (when the button has focus) will trigger a click event on a button.

Adding the ARIA role "button" makes it clear that this is a button control and not a link. Because we are using an anchor element, the control is focusable and the browser will automatically call the onclick handler for the Enter keystroke. Since users expect to be able to activate buttons with either Enter or Space, a keyboard handler provides the support for activating the button via the Space character.

source: https://www.w3.org/WAI/GL/wiki/Making_actions_keyboard_accessible_by_using_keyboard_event_handlers_with_WAI-ARIA_controls#Example_1:_Using_Space_to_activate_a_button

onClick and onDblClick The onClick event handler is triggered when the mouse is pressed when over an HTML element. onClick is intended to be a mouse dependent event handler. However, if the onClick event handler is used with keyboard-navigable links or form controls, then most major browsers and assistive technologies trigger onClick if the Enter key is pressed when the link or control has focus. In these cases, onClick is a device independent event handler.

source: https://webaim.org/techniques/javascript/eventhandlers

added a couple of items to the answer – James Taber Sep 19 '19 at 19:30 — James Taber, Sep 19 '19 at 19:30

score 0 · Answer 2 · answered Sep 19 '19 at 18:46

You can use the click event when determining if a button has been clicked. It also fires when a button has focus (i.e. the user presses the tab key to focus on the button) and the user presses enter or spacebar. Both of those actions will trigger the click event.

There are only 2 times the click event will NOT be triggered. One is when the user clicks on the button and holds the click button down, then moves the cursor out of the button and releases the mouse click outside of the button. The other time is when a user focuses on the button with the tab key, holds the spacebar down and then presses the tab key again to lose focus on the button. This prevent the button from fully being clicked.

However, holding and pressing the enter button (when the button is focused) triggers multiple click events.

Long story short, yes, it's totally OK to use the click event.

Which event should be used for buttons?

2 Answers2