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

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

// 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);
    }

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

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

// 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);
    }