当一个值被添加到 JavaScript 中的输入框时会发生什么事件？

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

在本文中，我们将具体了解在 JavaScript 的输入框中添加值时发生的事件。

oninput() 事件： oninput() 事件在将值添加到输入框时发生。我们使用键盘输入一个值。因此，当使用键盘在输入框中添加值时，我们可以关联某些键盘事件。

这些事件可能包括：

• onkeypress：当用户按下产生字符值的键时。
• onkeyup：按下后释放一个键。
• onkeydown：当用户按下键时。即使按下的键不产生字符值也会发生。

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

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

示例 1：以下示例显示了这些事件的用法。

HTML

 

    GFG events

 

    
        Type Something
        
        
    
 
    
        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")
        }
    

 

输出：

示例 2：此示例将更改发生事件的背景颜色

HTML

 

    GFG events

 

    
         Type Something
        
        
    
 
    
        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';
        }
    

 

输出：