在前端开发中，我们经常需要对表单进行处理和验证。当输入值通过编程方式发生更改时，我们可能需要触发一些特定的操作，如验证表单字段是否有效，计算表单字段之间的关系等。
监听输入值变化
要监听输入值的变化，我们可以使用 addEventListener 监听 input 事件。例如：
----- ----- - ------------------------------------ ------------------------------- ------- -- - ----- ----- - ------------------- ------------------- ---
上面的代码将在每次输入框的值发生变化时输出新的值到控制台中。
编程方式更改输入值
为了通过编程方式更改输入值，我们可以使用 JavaScript 操作 DOM 元素。例如：
----- ----- - ------------------------------------ ----------- - ---- -------
上述代码将把输入框的值设置为 'new value'。当然，这只是一个简单的例子，实际情况中我们可能需要根据业务逻辑动态地更改表单的值。
触发操作
要在输入值更改时触发操作，我们可以直接在 input 事件的回调函数中执行相应的操作。例如：
----- ----- - ------------------------------------
------------------------------- ------- -- -
----- ----- - -------------------
-- ----------
-- ----------------- -
-------------------- --------
-------
-
-- -----------
----- ------ - -----------------
-- ------
---------------------
---上述代码中，我们假设 isValid、calculate 和 updateResult 分别是验证输入值是否有效、计算结果和更新页面结果的函数。在每次输入框的值发生变化时，我们都会调用这些函数来执行相应的操作。
示例代码
下面是一个完整的示例代码，展示当用户在输入框中输入数字时，如何通过编程方式更改输入值并触发相应的操作。
--------- -----
------
------
-------------- ------ -- ------------ ------ -- -- ----- -------------
-------
------
------ -------------------- - ---------------
------ ------------- --------------
---- ------------------
--------
-------- -------------- -
------ --------------
-
-------- ---------------- -
------ ----- - --
-
-------- -------------------- -
----- ------- - ----------------------------------
------------------- - -------- -----------
-
----- ----- - ------------------------------------
------------------------------- ------- -- -
----- ----- - -------------------
-- ----------------- -
-------------------- --------
-------
-
----- ------ - -----------------
---------------------
-- ---------
------------- -- -
----------- - ----- - --
----------------------- ----------------
-- ------
---
---------
-------
-------在上述示例代码中，我们定义了 isValid、calculate 和 updateResult 函数，和一个输入框 my-input。当用户在输入框中输入数字时，我们会先验证输入值是否有效，然后计算结果并更新页面上的结果。
在最后，我们通过 setTimeout 函数模拟了一个编程方式更改输入值的场景：1秒钟后将输入框的值设置为原来的3倍，然后手动触发 input 事件以重新计算结果并更新页面上的结果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30249