文本输入框是 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 秒后才执行回调函数，若在此期间又触发了该事件，则重新计时。这样可以有效避免事件被频繁触发导致的性能问题。下面是一个简单的实现：
-- -------------------- ---- -------
-------- -------------- ----- -
--- --------
------ ---------- -
----------------------
------- - ------------- -- -
---------------- -----------
-- ------
-
-
----- ------------ - ------------------------------------
-------------------------------------- ---------------- -- -
----- ----- - -------------------
-- -----
-- ------ -- -- ----- ------以上代码中，我们定义了一个 debounce 函数，它接受一个回调函数和一个等待时间 wait，返回一个新的函数。新函数会在 wait 毫秒后执行回调函数，如果在此期间再次触发，会取消之前的计时器并重新计时。
2.2 节流
节流是指在一定时间范围内只执行一次回调函数，无论事件触发多少次。这样可以平滑地控制事件的触发频率，避免过度渲染和卡顿等问题。下面是一个简单的实现：
-- -------------------- ---- -------
-------- -------------- ----- -
--- ------ - -----
------ ---------- -
-- --------- -------
------ - ------
------------- -- -
---------------- -----------
------ - -----
-- ------
-
-
----- ------------ - ------------------------------------
-------------------------------------- ---------------- -- -
----- ----- - -------------------
-- -----
-- ------ -- -- ----- --------以上代码中，我们定义了一个 throttle 函数，它接受一个回调函数和一个时间间隔 wait，返回一个新的函数。新函数会在每个时间间隔内只执行一次回调函数，如果在此期间再次触发事件，会被忽略。
3. 实例演示
下面是一个实例演
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/29300