JavaScript表单事件、鼠标事件、键盘事件、正则表达式

表单事件

表单事件	意义
focus	获取焦点
blur	失去焦点

username.onfocus = function(){
    console.log("获取焦点")
}
username.onblur= function(){
    console.log("失去焦点")
}

键盘事件

键盘事件	意义
onkeydown	按下一个键
onkeyup	松开一个键
onkeypress	按下然后松开一个键

        当获取用户正按下键码时，可以使用 keydown、keypress 和 keyup 事件获取这些信息。其中 keydown 和 keypress 事件基本上是同义事件，它们的表现也完全一致，不过一些浏览器不允许使用 keypress 事件获取按键信息。所有元素都支持键盘事件，但键盘事件多被应用在表单输入中。

 var username = document.querySelector("#username");
        username.onkeydown = function () {
            console.log("按下键盘");
        }
        username.onkeyup = function () {
            console.log("松开键盘");
        }

鼠标事件 

鼠标事件	意义
onmousedown	按下鼠标键
onmousemove	移动鼠标
onmouseout	鼠标离开某一个网页对象
onmouseover	鼠标移动到某一个网页对象上
onmouseup	松开鼠标键
onclick	单机鼠标键
ondblclick	双击鼠标键

移动端的触摸事件

        //touchstart   touchmove   touchend
          var div_1=document.querySelector("#div_1")
 
         div_1.ontouchstart=function(){
 
             console.log("touchstart")
 
         }
 
         div_1.ontouchmove=function(){
 
             console.log("touchmove")
 
         }
 
         div_1.ontouchend=function(){
 
             console.log("touchend")
 
         }

正则表达式

使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

通配符：

匹配符	说明
\b	匹配单词边界
\d	匹配单个数字字符
\f	匹配单个换页符
\n	匹配单个换行符
\r	匹配单个回车符
\s	匹配任何空白符，包括空格、制表符、换页符等
\t	匹配单个制表符
\v	匹配单个垂直制表符
\w	匹配包含下划线的任意单词字符

使用正则表达式使密码框长度在6-8位，只能包含字母和数字

 var pwd = document.querySelector("#pwd")
        pwd.onblur = function () {
            var reb = /\b[a-zA-Z0-9]{6,8}\b/
            var str = pwd.value
            if (reb.test(str) == true) {
                console.log("格式正确");
            } else {
                console.log("格式错误");
                var span = document.querySelector("#two span")
                span.innerHTML = "格式错误"
            }
        }