在前端开发中，我们经常需要处理用户输入的数据，尤其是数字输入。当用户输入数字时，我们可以通过事件监听来捕获输入值的变化，并触发相应的事件。
监听输入事件
在 HTML 中，数字输入通常使用 input 标签和 type="number" 属性来实现。要监听数字输入的变化，我们可以使用 addEventListener 方法来添加一个 input 事件监听器，然后在事件处理函数里获取输入框的值：
-- -------------------- ---- ------- ------ ------------- ------------- -------- ----- ----- - ----------------------------------- ------------------------------- --------------- - ----- ----- - ------------------- ------------------ ----------- --- ---------
上面的代码中，我们首先获取了 ID 为 myInput 的输入框元素，然后在它上面添加了一个 input 事件监听器。当用户在输入框中输入数字时，事件处理函数将被调用，并打印出用户输入的值。
触发“火”事件
在实际开发中，我们可能需要在用户输入数字后执行一些特定的操作。比如，当用户输入的数字大于 100 时，我们可以让一个“火”图标显示出来，表示输入的数字太“热”了。
要实现这个功能，我们可以在事件处理函数中添加一些逻辑判断，以确定何时触发“火”事件。比如，下面的代码会在用户输入的数字大于 100 时显示一个 “🔥” 图标：
-- -------------------- ---- -------
------ ------------- -------------
---- ------------- --------------- ---------------
--------
----- ----- - -----------------------------------
----- -------- - ------------------------------------
------------------------------- --------------- -
----- ----- - -------------------
-- ------ - ---- -
---------------------- - ---------
- ---- -
---------------------- - -------
-
---
---------上面的代码中，我们首先获取了 ID 为 myInput 的输入框和 ID 为 fireIcon 的图标元素。然后，在 input 事件处理函数中，我们根据用户输入的值来判断是否要显示图标，如果用户输入的数字大于 100，就让 fireIcon 显示出来；否则，就让它隐藏起来。
总结
当用户输入数字时，我们可以使用 addEventListener 方法来添加一个 input 事件监听器，并在事件处理函数中获取用户输入的值。根据输入的值，我们可以触发相应的事件，比如显示一个“火”图标。这种技术在实际开发中非常有用，可以帮助我们更好地控制用户输入的数据，提高应用程序的易用性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12670