灰猫警长
灰猫警长

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

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

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

HTML代码：

    <form action="">
        <input type="text" autofocus> <br>
        <input type="text"><br>
        <input type="search"><br>
        <input type="reset"><br>
        <input type="submit"><br>
        <textarea name="" id="area" cols="30" rows="10">textarea><br/>
        <input type="checkbox" name="hobby">篮球
        <input type="checkbox" name="hobby">足球
        <input type="checkbox" name="hobby">乒乓球
    form>

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	用户向搜索域输入文本时触发 ( )	
    aInput[2].onsearch = function (event) {
        console.log("onsearch事件");
        console.log(event);
    }


    // onselect	用户选取文本时触发 (  和