JavaScript 当向输入框添加值时发生哪个事件

JavaScript具有事件来为网页提供动态界面。这些事件与文档对象模型（DOM）中的元素相关联。这些事件默认使用冒泡传播，即从子元素向父元素上升。我们可以将事件绑定为内联或外部脚本。与JavaScript相关的有多个事件，包括onClick()、onChange()、onmouseleave()、onmouseout()、onmouseover()、onload()等。

在本文中，我们将专门学习在JavaScript中向输入框添加值时发生的事件。

JavaScript oninput() 事件： 当向输入框添加值时，触发oninput() 事件。我们使用键盘输入值。因此，我们可以在使用键盘向输入框添加值时关联特定的键盘事件。

这些事件可能包括：

onkeypress： 当用户按下产生字符值的键时。
onkeyup： 在按下键后释放键。
onkeydown： 当用户按下键时。即使按下的键不产生字符值也会触发该事件。

我们还可以在使用键盘向输入框添加值时关联onChange事件。

onChange： 此事件检测此事件中列出的任何元素的值的变化。

示例1： 下面是一个显示这些事件用法的示例。

HTML

<body id="GFG">
    <form>
        <label>Type Something</label>
        <input type="text"    
            onChange=invokingOnChangeEvent() 
            oninput=invokingOnInputEvent()
            onkeydown=invokingOnKeyDownEvent() 
            onkeyup=invokingOnKeyUpEvent() 
            onkeypress=invokingOnKeyPressEvent()>
    </form>
 
    <script>
        function invokingOnInputEvent(event) {
            console.log("onInput event occurred")
        }
 
        function invokingOnChangeEvent(event) {
            console.log("onChange event occurred")
        }
 
        function invokingOnKeyPressEvent(event) {
            console.log("onKeyPress event occurred")
        }
 
        function invokingOnKeyUpEvent(event) {
            console.log("onKeyUp event occurred")
        }
 
        function invokingOnKeyDownEvent(event) {
            console.log("onKeyDown event occurred")
        }
    </script>
</body>

输出：

JavaScript 当向输入框添加值时发生哪个事件

示例2： 在事件发生时，此示例将更改背景颜色。

HTML

<body id="GFG">
    <form>
        <label> Type Something</label>
        <input type="text"
            onChange=invokingOnChangeEvent() 
            oninput=invokingOnInputEvent()
            onkeydown=invokingOnKeyDownEvent() 
            onkeyup=invokingOnKeyUpEvent() 
            onkeypress=invokingOnKeyPressEvent()>
    </form>
    <script>
        function invokingOnInputEvent(event) {
            console.log("onInput event occurred")
            document.getElementById("GFG")
                .style.backgroundColor = 'red';
        }
 
        function invokingOnChangeEvent(event) {
            console.log("onChange event occurred")
            document.getElementById("GFG")
                .style.backgroundColor = 'green';
 
        }
 
        function invokingOnKeyPressEvent(event) {
            console.log("onKeyPress event occurred")
            document.getElementById("GFG")
                .style.backgroundColor = 'yellow';
        }
 
        function invokingOnKeyUpEvent(event) {
            console.log("onKeyUp event occurred")
            document.getElementById("GFG")
                .style.backgroundColor = 'pink';
        }
 
        function invokingOnKeyDownEvent(event) {
            console.log("onKeyDown event occurred")
            document.getElementById("GFG")
                .style.backgroundColor = 'orange';
        }
    </script>
</body>

输出：

JavaScript 当向输入框添加值时发生哪个事件