事件：change、input、cut、copy 和 paste

原文链接：http://javascript.info/events-change-input，translate with ❤️ by zhangbao.

本章我们讨论伴随数据更新的各种事件。

事件：change

change 事件在元素完成改变之后触发。

对于输入框来说，就是在失去焦点后触发的。

例如，当我们在下面的文本框里输入的时候，不会触发该事件。但当我们移动聚焦到别处时。例如，点击了一个按钮，就会触发 change 事件：

<input type="text" onchange="alert(this.value)">
<input type="button" value="按钮">

对其他元素：select、input type=checkbox/radio 等则是在选择更改后触发。

事件：input

input 事件是在每次值修改后触发。

例如：

<input type="text" id="input"> oninput: <span id="result"></span>
<script>
  input.oninput = function() {
    result.innerHTML = input.value;
  };
</script>

如果我们想在 <input> 每次修改值后处理数据的话，使用这个事件是最好的选择。

不同于键盘事件的是，它适用于任何值被改变的场景，即使是不涉及键盘操作的情况：比如，用鼠标粘贴或使用语音识别输入文本时，也会触发此事件。

不能阻止 **oninput**``

input 事件是在值改变后触发的。

因此，如果在事件处理器中使用 event.preventDefault() 的话，并不会起作用。

事件：cut、copy 和 paste

这些事件是在剪切/复制/粘贴内容时触发的。

这些事件属于 ClipboardEvent 类，提供了访问复制/粘贴文本的能力。

我们还可以使用 event.preventDefault() 阻止事件的默认行为。

例如，下面代码阻止了所有这些事件的默认行为，并且展示我们尝试剪切/复制/粘贴的内容：

<input type="text" id="input">
<script>
  input.oncut = input.oncopy = input.onpaste = function (event) {
    console.log(event.type + '-' + event.clipboardData.getData('text/plain'));
    return false;
  };
</script>

从技术上讲，我们可以复制/粘贴所有东西。例如，我们可以在OS文件管理器中复制，然后粘贴它。

规范中提供了一组可以处理不同的数据类型，读/写到剪贴板的方法。

需要注意的是，剪贴板是一个系统级别的“全局”事物。大多数浏览器只允许在特定的操作范围内对剪贴板进行读/写访问。此外，除了 Firefox 之外的其他浏览器禁止创建“自定义”剪贴板事件。

总结

数据改变时触发的事件：

（完）