Element input 事件

事件介绍

想象你在微信里和朋友聊天：你每打一个字，输入框上方立刻显示“正在输入…”。

这个实时反馈的效果，就是 input 事件在做的事情。input 事件就像是一个贴身小秘书，它时刻盯着输入框，只要你动了里面的内容（敲键盘、粘贴、剪切、删除），它立刻就会向你报告。

input 事件在 <input>、 <textarea> 或 <select> 元素的值发生任何变化时，会立即触发。

下面是一个简单的示例，展示如何使用 input 事件实时显示用户输入的内容：

<input type="text" id="myInput" placeholder="在这里打字试试">
<p>你输入的是：<span id="display"></span></p>

<script>
  // 1. 先把输入框和显示区域“抓”过来
  const inputEl = document.getElementById('myInput');
  const displayEl = document.getElementById('display');

  // 2. 给输入框绑定 input 事件
  inputEl.addEventListener('input', function(event) {
    // 3. 获取当前输入框里的最新值
    const currentValue = event.target.value; 
    
    // 4. 把值显示在页面上
    displayEl.textContent = currentValue;
  });
</script>

input 事件 VS change事件

这是新手最头疼的地方，我打个比方你就懂了：