title: JavaScript addEventListener : 'input' versus 'keyup'
body: <p>I use the 'keyup' event when I want to get the value of a text-input immediately after insertion. </p>
  
  <p>Now I've seen in a CodeReview question the usage of an event 'input' for to accomplish the same. </p>
  
  <p><em>The CodeReview question (5th line):</em> <a href="https://codereview.stackexchange.com/questions/141937/registration-form-validation-in-jquery">https://codereview.stackexchange.com/questions/141937/registration-form-validation-in-jquery</a></p>
  
  <p>I've tinkered a bit. Made this demo:</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>var box = document.querySelector('input');
  
  box.addEventListener('keyup', function() {
    console.log('keyup: %s', this.value);
  });
  
  box.addEventListener('input', function() {
    console.log('input: %s', this.value);
  });
  
  /* RESULT
    input: a
    keyup: a
    input: ab
    keyup: ab
    input: abc
    keyup: abc
  */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As one can see: No difference!</p>
  
  <p>Therefore my question: </p>
  
  <p><strong>Is there a difference between the usage of the keyup-event and the input-event (for reading the value of a text-input)?</strong></p>
  
  <p>And:</p>
  
  <p><strong>Are there cases in which one should prefer the one over the other?</strong></p>