JS Events: 监听文本输入框值变化事件

文本输入框是 Web 应用中常见的用户输入控件，当用户在文本框中输入文字时，我们通常需要对输入值进行处理。本文将介绍如何使用 JavaScript 监听文本输入框的值变化事件，以及如何在值变化后执行相应操作。

1. 监听值变化事件

文本输入框的值变化可以通过监听 input 事件来实现。具体代码如下：

const inputElement = document.querySelector('#my-input');

inputElement.addEventListener('input', (event) => {
  const value = event.target.value;
  // 处理输入值
});

以上代码中，我们首先通过 querySelector 方法获取到了一个 id 为 my-input 的文本输入框元素，然后给它添加了一个 input 事件监听器。当文本框的值发生改变时，该监听器会被触发，通过 event.target.value 获取到当前文本框的值，从而进行相应的处理。

需要注意的是，input 事件会在任何时候都会被触发，包括用户输入、粘贴、剪切等操作。如果我们只关心用户手动输入的情况，可以使用 keyup 或 keydown 事件代替 input 事件。

2. 防抖和节流

由于 input 事件可能会频繁触发，我们需要考虑性能问题。一种常见的做法是使用防抖或节流技术，以减少事件处理函数的执行次数。

2.1 防抖

防抖是指在事件触发 n 秒后才执行回调函数，若在此期间又触发了该事件，则重新计时。这样可以有效避免事件被频繁触发导致的性能问题。下面是一个简单的实现：

// www.javascriptcn.com code example
function debounce(func, wait) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, arguments);
    }, wait);
  }
}

const inputElement = document.querySelector('#my-input');
inputElement.addEventListener('input', debounce((event) => {
  const value = event.target.value;
  // 处理输入值
}, 500)); // 延迟 500ms 执行回调函数

以上代码中，我们定义了一个 debounce 函数，它接受一个回调函数和一个等待时间 wait，返回一个新的函数。新函数会在 wait 毫秒后执行回调函数，如果在此期间再次触发，会取消之前的计时器并重新计时。

2.2 节流

节流是指在一定时间范围内只执行一次回调函数，无论事件触发多少次。这样可以平滑地控制事件的触发频率，避免过度渲染和卡顿等问题。下面是一个简单的实现：

// www.javascriptcn.com code example
function throttle(func, wait) {
  let canRun = true;
  return function() {
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      func.apply(this, arguments);
      canRun = true;
    }, wait);
  }
}

const inputElement = document.querySelector('#my-input');
inputElement.addEventListener('input', throttle((event) => {
  const value = event.target.value;
  // 处理输入值
}, 500)); // 每隔 500ms 执行一次回调函数

以上代码中，我们定义了一个 throttle 函数，它接受一个回调函数和一个时间间隔 wait，返回一个新的函数。新函数会在每个时间间隔内只执行一次回调函数，如果在此期间再次触发事件，会被忽略。

3. 实例演示

下面是一个实例演

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/29300