keypress event not capturing target value in ES6
<p>I've been refactoring a small javascript project to ES6 and noticed that an the <code>keypress</code> event listener that is applied to a text input is not including the pressed character in the target value for the event. This behaviour can be seen in this fiddle:</p>

<p><a href="http://jsbin.com/yayinalato/edit?js,console,output" rel="nofollow">http://jsbin.com/yayinalato/edit?js,console,output</a></p>

<pre><code>$input = document.querySelector('.input')

$input.addEventListener('keypress', (e) =&gt; {
  console.log(e.target.value)
})
</code></pre>

<p>The <code>keyup</code> event works but this also captures non-text input keypresses like arrow keys etc which is undesirable for this. This is why I'm confused as to why the <code>keypress</code> event does not work as I was under the impression a keyup had to happen for a keypress.</p>

<p>How can I get the value of the target to include the key pressed from this event? An explanation of how these events are captured would be helpful.</p>