键盘事件、表单事件

## 一、表单事件

1.form内元素的事件

        <form action="" method="GET">
            <input type="text" name="" id="inp1">
            <input type="radio" name="" id="inp2">
            <input type="radio" name="" id="inp3">
            <input type="checkbox" name="" id="inp4">
            <select name="" id="sel5">   
                <!-- 有name一定有value -->
                <option value="0">周天</option>
                <option value="1">周一</option>
                <option value="2">周二</option>
                <option value="3">周三</option>
                <option value="4">周四</option>
                <option value="5">周五</option>
                <option value="6">周六</option>
            </select>
        </form>

		// id可以直接用，但实际工作中要先获取再用
        // 有onfocus和onblur事件的特殊元素： 表单（各种type类型）、window、documents、a标签、css3可以吧div改为文本域后的div：<div contenteditable = "true">,这个div就变成了可编辑的div。
        inp1.onfocus = function(){
            console.log('得到焦点时触发')   // 光标在文本栏中
        }
        inp1.onblur = function(){
            console.log('失去焦点时触发')   // 光标离开文本栏
        }
       inp1.onchange = function () {
            console.log("获得焦点，输入内容，失去焦点时触发，且获得焦点时与失去焦点时，内容不同")
       }
       // type为radio时，点击且为选中状态即触发
       inp2.onchange = function () {
            console.log("触发inp2")
       }
       inp3.onchange = function () {
            console.log("触发inp3")
       }
       // type为checkbox时，点选触发
       inp4.onchange = function(){
           console.log('触发inp4')
       }
       // select时，改变状态触发
       sel5.onchange = function(){
           console.log('触发sel5')
           console.log(this.value) // 对应上面的value
       }

       inp1.focus()  // 使得焦点开始时就在指定位置，或者<input type="text" name="" id="inp1" autofocus>  ,焦点只能有一个，只能写一个

       inp1.oninput = function(){
           console.log('输入或删除内容就会触发') // 只有可输入的input才有oninput事件
       }

       if (this.value.length === 3) {
           this.blur()   // 当value值长度等于3时，自动失去焦点
       }

2.form本身的事件

        <button id="btn">提交</button>
        
        btn.onclick = function (){
            // 提交表单
            form.submit()
            // 重置表单
            form.reset()
        }

二、键盘事件

        // 能获得焦点的元素才有按键
        document.onkeydown = function (){
            console.log("除特别功能按键外，按下其他键触发keydown")
        }
        document.onkeyup = function (){
            console.log("除特别功能按键外，抬起其他键触发keyup")
        }

        document.onkeydown = function (e){
            console.log(e)
        }

        window.onkeydown = function (){
            if(e.keycode === 116){     // 判断key也可以
                e.preventDefault();  // f5 键值为116 ，阻止他的默认事件                
            }
        }

        document.onkeypress = function(){
            // 与onkeydown相同，按下触发。但它只响应能输入内容的键，如：1、2、d
            console.log('keypress')  // 特殊可响应enter
        }
        document.onkeydown = function(){
            // 与onkeydown相同，按下触发。但它只响应能输入东西的键
            console.log('keydown')
        }