title: Which event should be used for buttons?
body: <p>I have a button and I want to perform an action if the user fires this button.</p>
  
  <p>I remember being told that the <code>click</code> 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:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('asdf').onclick = () =&gt; {
    document.getElementById('log').appendChild(
      document.createTextNode('click\n')
    )
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="asdf"&gt;Press me&lt;/button&gt;
  &lt;pre id="log"&gt;&lt;/pre&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It would seem that the spacebar fires the click event just fine!</p>
  
  <p>This seems contrary to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event" rel="nofollow noreferrer">MDN docs about <code>click</code></a>, which say:</p>
  
  <blockquote>
    <p>An element receives a <code>click</code> 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.</p>
  </blockquote>
  
  <p>Is it, therefore, OK to use <code>click</code>?</p>
  
  <p>If it is not, which event should I use?</p>
  
  <p>Should it be <code>submit</code>? </p>
  
  <p>If so, isn't <code>submit</code> only related to the <code>&lt;form&gt;</code> tag, not a <code>&lt;button&gt;</code> tag <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event" rel="nofollow noreferrer">as stated per the MDN</a>?</p>