title: Difference in behavior between onkeydown and onkeyup
body: <p>Wondering if anyone might be able to help me with the differences between keyup and keydown and why they don't work the same way?</p>
  
  <p>I have a jsfiddle here where I was doing some examples
  <a href="https://jsfiddle.net/m9wcn982/1/" rel="nofollow noreferrer">https://jsfiddle.net/m9wcn982/1/</a></p>
  
  <p>HTML:
      </p>
  
  <pre><code>&lt;div id="exercise"&gt;
      &lt;div&gt;
          &lt;input type="text" v-on:keyup="listen"&gt;
          &lt;p&gt;{{ value }}&lt;/p&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;input type="text" v-on:keydown="listen"&gt;
          &lt;p&gt;{{ value }}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>new Vue({
      el: '#exercise',
      data: {
          value: ''
      },
      methods: {
        listen: function(){
          this.value = event.target.value;
        }
      }
  });
  </code></pre>
  
  <p>Why does keydown lag 1 character behind while keyup always outputs what key was input immediately after depressing it for example, i'll type "foo" into the 2nd box, but only get "fo" as a value.  But if I type "foo" into the first box I get "foo" as the value.</p>