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

阅读时长 4 分钟读完

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

1. 监听值变化事件

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

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

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

2. 防抖和节流

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

2.1 防抖

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

-- -------------------- ---- -------
-------- -------------- ----- -
  --- --------
  ------ ---------- -
    ----------------------
    ------- - ------------- -- -
      ---------------- -----------
    -- ------
  -
-

----- ------------ - ------------------------------------
-------------------------------------- ---------------- -- -
  ----- ----- - -------------------
  -- -----
-- ------ -- -- ----- ------

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

2.2 节流

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

-- -------------------- ---- -------
-------- -------------- ----- -
  --- ------ - -----
  ------ ---------- -
    -- --------- -------
    ------ - ------
    ------------- -- -
      ---------------- -----------
      ------ - -----
    -- ------
  -
-

----- ------------ - ------------------------------------
-------------------------------------- ---------------- -- -
  ----- ----- - -------------------
  -- -----
-- ------ -- -- ----- --------

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

3. 实例演示

下面是一个实例演

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/29300

纠错
反馈