js 事件监听

在 JavaScript 中，当 <input> 输入框的值发生变化时，可以通过监听 input 或 change 事件来触发函数。以下是几种常用方法：

---

1. 使用 addEventListener（推荐）

通过 JavaScript 监听 input 事件，实时触发函数：

<input type="text" id="myInput">

<script>
  const input = document.getElementById("myInput");
  input.addEventListener("input", function(event) {
    const value = event.target.value; // 获取输入的值
    console.log("当前输入值:", value);
    // 在这里调用你的函数
  });
</script>

---

2. 使用 oninput 属性（内联方式）

直接在 HTML 标签中绑定 oninput 事件：

<input type="text" oninput="handleInput(this.value)">

<script>
  function handleInput(value) {
    console.log("当前输入值:", value);
    // 在这里编写逻辑
  }
</script>

---

3. 使用 onchange 事件（仅在失去焦点时触发）

如果需要在输入框失去焦点时触发（比如用户按回车或点击其他地方），可以用 change 事件：

<input type="text" id="myInput">

<script>
  const input = document.getElementById("myInput");
  input.addEventListener("change", function(event) {
    console.log("最终输入值:", event.target.value);
  });
</script>

---

4. 防抖优化（减少高频触发）

如果输入触发频繁操作（如搜索建议），可以使用防抖（Debounce）优化：

<input type="text" id="searchInput">

<script>
  const searchInput = document.getElementById("searchInput");

  // 防抖函数
  function debounce(func, delay = 300) {
    let timer;
    return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => func.apply(this, args), delay);
    };
  }

  // 实际执行的函数
  function handleSearch(value) {
    console.log("搜索关键词:", value);
  }

  // 绑定防抖后的函数
  searchInput.addEventListener("input", debounce(function(event) {
    handleSearch(event.target.value);
  }));
</script>

---

关键点总结

• input 事件：在输入框的值每次变化时触发（实时）。
• change 事件：在输入框失去焦点且值已改变时触发。
• 获取输入值：通过 event.target.value 或直接传递 this.value。
• 防抖：高频触发时优化性能。

根据需求选择合适的方式即可！

​

​