史上最详细的DOM事件之表单事件

朱雀 2023-02-14 01:16 86阅读 0赞

## 史上最详细的DOM事件之表单事件 ##

上篇博客讲了DOM的键盘事件，这篇博客我们来讲一讲DOM的表单事件。

**HTML代码：**

#### 1.焦点事件 ####

// onblur 元素失去焦点时触发
        aInput[0].onblur = function (event) { 
            console.log("onblur事件");
            console.log(event);
        }
        // onfocus 元素获取焦点时触发
        aInput[0].onfocus = function (event) { 
            console.log("onfocus事件");
            console.log(event);
        }
    
        // onfocusin 元素即将获取焦点时触发 
        aInput[0].onfocusin = function (event) { 
            console.log("onfocusin事件");
            console.log(event);
        }
        // onfocusout 元素即将失去焦点时触发 
        aInput[0].onfocusout = function (event) { 
            console.log("onfocusout事件");
            console.log(event);
        }

#### 2.输入事件 ####

// InputEvent 输入事件
        // oninput 元素获取用户输入时触发 
        aInput[1].oninput = function (event) { 
            console.log("oninput事件");
            console.log(event);
        }

#### 3.重置事件和提交事件 ####

// onreset 表单重置时触发 事件绑定到form表单上
        oForm.onreset = function (event) { 
            console.log("onreset事件");
            console.log(event);
        }
    
        // onsubmit 表单提交时触发 事件绑定到form表单上
        oForm.onsubmit = function (event) { 
            console.log("onsubmit事件");
            console.log(event);
        }

#### 4.onsearch事件，onselect事件，onchange事件 ####

// onsearch 用户向搜索域输入文本时触发 ( <input="search">) 
        aInput[2].onsearch = function (event) { 
            console.log("onsearch事件");
            console.log(event);
        }
    
    
        // onselect 用户选取文本时触发 ( <input> 和 <textarea>) 
        aInput[1].onselect = function (event) { 
            console.log("onselect事件");
            console.log(event);
        }
        oArea.onselect = function (event) { 
            console.log("onselect事件");
            console.log(event);
        }
    
    
    
    
        // onchange 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)
            
        aInput[1].onchange = function (event) { 
            console.log("onchange事件");
            console.log(event);
        }

**注意：** 需要注意每一个方法什么时候触发，同时知道onreset事件和onsubmit事件绑定到表单上，而不是表单的元素上。

**视频讲解链接：  
https://www.bilibili.com/video/BV1PT4y1g7gJ/**