JavaScript 事件：change, input, cut, copy, paste

这些事件都与表单元素和用户输入交互相关，下面分别介绍每个事件的特性：

change 事件

• 触发时机：当元素的值发生改变并失去焦点时触发（对于<input>, <select>, <textarea>等）
• 特点：
  • 不会在每次值改变时触发，只在完成编辑并失去焦点时触发
  • 对于单选按钮和复选框，点击时就会触发（不需要失去焦点）

document.querySelector('input').addEventListener('change', function() {
  console.log('值已改变:', this.value);
});

input 事件

• 触发时机：每当元素的值改变时立即触发（包括键盘输入、粘贴、拖放文本等）
• 特点：
  • 实时响应值的变化
  • 不包含剪贴板操作（cut/copy/paste）本身，但这些操作导致值变化时会触发

document.querySelector('input').addEventListener('input', function() {
  console.log('当前值:', this.value);
});

cut/copy/paste 事件

这些事件与剪贴板操作相关：

cut 事件

• 当用户剪切内容时触发

copy 事件

• 当用户复制内容时触发

paste 事件

• 当用户粘贴内容时触发

共同特点：

• 可以通过event.clipboardData访问剪贴板数据
• 可以使用event.preventDefault()阻止默认行为

const input = document.querySelector('input');

input.addEventListener('cut', (e) => {
  console.log('剪切操作:', e.clipboardData.getData('text'));
});

input.addEventListener('copy', (e) => {
  console.log('复制操作:', input.selectionStart, input.selectionEnd);
});

input.addEventListener('paste', (e) => {
  const pastedText = e.clipboardData.getData('text');
  console.log('尝试粘贴:', pastedText);
  // e.preventDefault(); // 阻止默认粘贴行为
});

事件触发顺序示例

当用户粘贴内容到输入框时：

1. paste 事件（可在此阻止默认行为）
2. 如果未阻止，值发生变化
3. input 事件（因为值改变了）
4. 当元素失去焦点时，change 事件

实际应用建议

• 使用input事件实现实时搜索/验证
• 使用change事件处理最终值提交
• 使用剪贴板事件控制或监控剪贴板操作

这些事件在处理表单交互时非常有用，可以根据需求选择合适的事件类型。