HTML5---6.表单新增的事件

1.oninput:监听当前指定元素内容的改变：只要内容改变(添加内容，删除内容)，就会触发这个事件
2.onkeyup:键盘弹起的时候触发：每一个键的弹起都会触发一次
3.oninvalid:当验证不通过时触发事件

<form action="">
        用户名：<input type="text" name="userName" id="userName"><br>
        电话：<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"> <br>
        <input type="submit">
    </form>
    <script>
        /*1.oninput:监听当前指定元素内容的改变：只要内容改变(添加内容，删除内容)，就会触发这个事件*/
        document.getElementById("userName").oninput=function(){
            console.log("oninput:"+this.value);
        }
    
        /*onkeyup:键盘弹起的时候触发：每一个键的弹起都会触发一次*/
        document.getElementById("userName").onkeyup=function(){
            console.log("onkeyup:"+this.value);
        }
    
        /*oninvalid:当验证不通过时触发*/
        document.getElementById("userPhone").oninvalid=function(){
            /*设置默认的提示信息*/
            this.setCustomValidity("请输入合法的11位手机号");
       }
    </script>