JavaScript addEventListener: 'input'与'keyup'的区别

Question

当我想要立即获取文本输入框中插入的值时，我使用“keyup”事件。

现在我在一个CodeReview问题中看到了使用“input”事件来实现相同功能。

CodeReview问题(第5行)：https://codereview.stackexchange.com/questions/141937/registration-form-validation-in-jquery

我尝试了一下并制作了这个演示：

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
*/

<input type="text" />

如您所见：没有区别！

因此，我的问题是：

在读取文本输入的值时，使用keyup事件和input事件之间有区别吗？

还有：

是否存在应该优先选择其中一种的情况？

- cluster1

---

是的！如果你使用“右键单击”粘贴数值，keyup-handler 不会被调用，但 input-handler 会被调用... 还有其他一些区别也存在... - Rayon

我很惊讶我找不到完全相同的 _dupe_。 - Rayon

可能是__https://dev59.com/s1kT5IYBdhLWcg3wf_pN。 - Rayon

鼠标抬起是指在元素内松开鼠标键，而输入是指在输入元素上输入内容。 - Beginner

好的，我现在知道区别了。如果你输入：“a”，“b”，“c”，那么两个事件都会被触发。但是如果你右键点击鼠标并从上下文菜单中选择“粘贴”，将剪贴板中的内容复制到文本框中，那么你会发现只有输入事件被触发。结论：每当文本输入的值改变时，输入事件就会被触发。只有涉及键盘时，才会触发keyup事件。 - cluster1

Answer 1

按键抬起事件还可以检测控制键，如回车、Ctrl、退格、删除等，而输入事件仅针对字符、数字和符号。这是我发现的一个区别。

按键抬起事件监听所有按键

输入事件仅监听字符、数字和特殊字符按键

- Mukul Jayaprakash

---

@Rayon 请指出错误。 - Mukul Jayaprakash

是的，它会监听 Ctrl 按钮。 - Mukul Jayaprakash

现在按下 a-z 键... - Rayon

它也会听取那些声音。 - Mukul Jayaprakash

KeyUp 在安卓设备上无法正常工作。 - Iglesias Leonardo