Events change, input, cut, copy, paste
JavaScript Events: change, input, cut, copy, paste
In this chapter, we are going to cover different events that accompany data updates. Among them are events such as change, input, cut, copy and paste. Let’s dive into some details. （在本章中，我们将介绍伴随数据更新的不同事件。其中包括更改、输入、剪切、复制和粘贴等事件。让我们深入了解一些细节。）
Event: change
Event: change
When the element has finished changing the change event triggers. For text inputs, it indicates that the event triggers when it loses the focus. （当元素完成更改时，将触发更改事件。对于文本输入，它表示事件在失去焦点时触发。）
Let’s check out an example of the change event for text inputs:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<input type="text" onchange="alert(this.value)">
<input type="button" value="Click on button">
</body>
</html>
For other elements, like select, input type=checkbox/radio, it occurs just after the change of the selection, like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<select onchange="alert(this.value)">
<option value="">Select something</option>
<option value="One">Value 1</option>
<option value="Two">Value 2</option>
<option value="Three">Value 3</option>
</select>
</body>
</html>
Event: input
Event: input
Every time the user modifies a value, the input event triggers. As opposed to the keyboard events, it can occur on any value change, even those that don’t include keyboard actions (for example, pasting using the mouse or applying speech recognition). （每次用户修改值时，都会触发输入事件。与键盘事件相反，它可以发生在任何值变化上，即使不包括键盘操作（例如，使用鼠标粘贴或应用语音识别）。）
Here is an example of the input event:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<input type="text" id="input"> oninput: <span id="result"></span>
<script>
input.oninput = function() {
result.innerHTML = input.value;
};
</script>
</body>
</html>
This event is the best choice if you intend to handle each modification of an <input>. On the other hand, the input event doesn’t occur on the keyboard input or other actions that do not include value change ( for example, pressing arrow keys ⇦ ⇨ during the input).
So, the event input triggers, after the value is modified. Therefore, the event.preventDefault() can’t be used in this case: it’s just a belated action and would give no effect.
Events: cut, copy, paste
Events: cut, copy, paste
The cut/copy/paste events are the most common ones. They trigger on cutting/copying/pasting a value. （剪切/复制/粘贴事件是最常见的。它们在剪切/复制/粘贴值时触发。）
These events are considered a part of the Clipboard event class and are used for providing access to the data that is copied/pasted. For aborting the action, here you can use event.preventDefault() . As a result, nothing will get copied/pasted. （这些事件被视为剪贴板事件类的一部分，用于提供对复制/粘贴的数据的访问。 要中止操作，您可以在此处使用event.preventDefault ()。 因此，不会复制/粘贴任何内容。）
Let’s see an example of using the cut/copy/paste events:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<input type="text" id="input">
<script>
input.oncut = input.oncopy = input.onpaste = function(evn) {
alert(evn.type + ' - ' + evn.clipboardData.getData('text/plain'));
return false;
};
</script>
</body>
</html>
The best thing is that you can copy/paste not just the text but everything you want. For example, it is possible to copy a file in the OS file manager and paste it. （最好的事情是，您不仅可以复制/粘贴文本，还可以复制/粘贴您想要的一切。例如，可以在操作系统文件管理器中复制文件并将其粘贴。）
But, it would be best if you noted that the clipboard is on “global” OS-level. Most of the browsers reading/writing access to the clipboard only in the extent of specific user actions for the safety ( for instance, onclick event handlers). （但是，最好注意剪贴板处于“全局”操作系统级别。大多数浏览器对剪贴板的读/写访问权限仅限于特定用户的安全操作（例如， onclick事件处理程序）。）
Also, note that you are not allowed to create “custom” clipboard events using dispatchEvent in all browsers except for Firefox. （此外，请注意，除Firefox外，您不得在所有浏览器中使用dispatchEvent创建“自定义”剪贴板事件。）
Summary
Summary （概要）
In brief, we can notice that the following data change events are commonly used in JavaScript:
the change event: it generally occurs on the focus loss for text input. So, this event triggers when a value was changed.
the input event: it occurs for text inputs on every change. Unlike the change event, it triggers immediately.
the cut/copy/paste events: these events occur while cutting/copying/pasting a value. Their actions can’t be prevented. The property event.clipboardData allows reading/writing access to the clipboard.