初识-鼠标、键盘、表单、触摸事件

鼠标事件

click 点击事件

box.onclick = function(){
        console.log("单机执行");
    } 

dblclick双击事件

box.ondblclick = function(){
        console.log("双击执行");
    }

contextmenu 右键单击

box.oncontextmenu=function(){
        console.log("右键单击.自定义右键菜单");
    }

mousedown鼠标按下 mousemove移动 mouseup抬起

btn.onmousedown=function(){
        console.log("鼠标按下");
    }
    
       //移动
    var i=document.querySelector("#move")
    i.onmousemove=function(){
        console.log("鼠标移动");
    }
    
        //抬起
    btn.onmouseup=function(){
        console.log("鼠标抬起");
    }

移入移出 mouseover mouseout

进入子元素也会移出。

m2.onmouseover=function(){
        console.log("移入");
    }
    m2.onmouseout=function(){
        console.log("移出");
    }

移入移出 mouseenter mouseleave

    m2.onmouseenter=function(){
        console.log("移入");
    }
    m2.onmouseleave=function(){
        console.log("移出");
    }

键盘事件

用于（ window,document, 输入框 input）

例如< input type="text" id="username">

keydown按下键盘

username.onkeydown = function(){
            console.log("按下键盘");
        }

keyup抬起键盘

username.onkeyup = function(){
            console.log("抬起键盘");
        }

表单事件

focus 获取焦点 blur 失去焦点

//光标所在 获取焦点
 box.onfocus = function(){
        console.log("获取焦点");
    }
    //光标移开 失去焦点
    box.onblur = function(){
        console.log("失去焦点");
    }  

change 获取焦点

在失去焦点时对比里面内容不一样才会触发

box.onchange = function(){
        console.log("change");
    } 

input内容不一样类似于百度，每输入一个，就执行一次。

box.oninput=function(){
        console.log("input");
    }

submit 提交, reset 重置

在form表单中使用

myform.onsubmit = function(){
            console.log("submit");
            return false//阻止事件
        }

myform.onreset = function(){
            console.log("reset");
        }

触摸事件

<div id="box"></div>

触摸touchstart、按住移动touchmovr、松开touchend

box.ontouchstart = function(){
        console.log("触摸touchstart");
    }

    box.ontouchmove = function(){
        console.log("按住移动touchmovr");
    }

    box.ontouchend = function(){
        console.log("松开touchend");
    }

按住移动中来电打断的情况 触发

box.ontouchcancel = function(){
        console.log("touchcancel");
    }