四种事件类型

鼠标事件

click 鼠标点击（在用户点击鼠标时作出反应）

mouseenter 鼠标经过

mouseleave 鼠标离开

如：点击div1，div2会冒出来。

let div1=document.querySelector(".test1");
        let div2=document.querySelector(".test");
        div1.addEventListener("click",function(){
            div2.style.display="block";
        })

焦点事件

focus 获得焦点

blur 失去焦点

如：为input添加焦点事件，鼠标点击搜索框div出来，再点击别处div消失。

input.addEventListener("focus",function(){
            div.style.display="block";
        })
        input.addEventListener("blur",function(){
            div.style.display="none";
        })

键盘事件

keydown 键盘按下触发

keyup 键盘抬起触发

键盘按下输出相关内容。

input.addEventListener("keydown",function(){
            console.log("keydown");
        })
        input.addEventListener("keyup",function(){
            console.log("keyup");
        })

文本事件

input 用户输入事件（在用户输入时作出反应）

输入框input有属性value，用于检测保留的内容，value.length用来表示文本长度。

如：用户输入文本，显示用户输入的字数。

let input=document.querySelector("input");
        input.addEventListener("input",function(){
            console.log(input.value.length);
        })