按键事件未捕获ES6中的目标值

Question

我一直在向ES6重构一个小的javascript项目，并注意到应用于文本输入的keypress事件侦听器不包括事件目标值中的按下字符。这种行为可以在这个小提琴中看到：

http://jsbin.com/yayinalato/edit?js,console,output

$input = document.querySelector('.input')

$input.addEventListener('keypress', (e) => {
  console.log(e.target.value)
})

keyup事件有效，但这也会捕获非文本输入按键，如箭头键等，这对此不利。这就是为什么我对keypress事件不起作用的原因感到困惑，因为我认为按键必须发生在按键上。

如何获取目标的值以包含从此事件中按下的键？解释如何捕获这些事件会有所帮助。

Answer 1

e.target是指触发事件的元素，即输入字段。如果检查e.target.value，则会在触发按键事件时获取输入字段的值。这在文本实际输入字段之前发生。

您需要做的只是使用e.keyCode来检查按下了哪个键。

$input.addEventListener('keypress', (e) => {
  console.log("keypressed " + e.charCode);
})

另请注意，(e)=>仅适用于支持ES6的浏览器，或者您必须使用Babel转换回ES5