各种监听事件

1.click 点击

 box.addEventListener("click",()=>{
             console.log("鼠标按下和松开时  鼠标指针在被选元素区域内部 ");
           })

2.dblclick双击

box.addEventListener("dblclick",()=>{
            console.log("双击事件");
           })

3.mousedown 按下事件

box.addEventListener("mousedown",()=>{
             console.log("鼠标按下就触发");
           })

4.mouseup 松开事件

 box.addEventListener("mouseup",()=>{
             console.log("鼠标松开就触发");
           })

 5.鼠标移入mouseover  子元素也被算在里面

 box.addEventListener("mouseover",function(){
             box.style.backgroundColor="#000"
             box.style.width="800px"
            box.style.height="800px"
           })

6.鼠标移出mouseout

box.addEventListener("mouseout",function(){
             box.style.backgroundColor="brown"
             box.style.width="400px"
             box.style.height="300px"
           })

7.mouseleave 鼠标离开

box.addEventListener("mouseleave",function(){
             box.style.backgroundColor="brown"
             box.style.width="400px"
             box.style.height="300px"
           })

8.mouseenter  鼠标进入

box.addEventListener("mouseenter",function(){
            box.style.backgroundColor="brown"
            box.style.width="800px"
            box.style.height="400px"
          })

9.wheel 鼠标滚动事件

 box.onwheel=function(){
            console.log("鼠标滚轴滚动时在目标内部");
          }

10.元素滚动条触发scroll

box.addEventListener("scroll",function(){
            console.log("元素自身滚动条滚动");
        })

input框

11.键盘敲击事件

var box2=document.querySelector("#box2")
        box2.addEventListener("keydown",function(){
            alert("请充值会员！")
             console.log("按一下键盘触发一次");
            setInterval(function(){
                box2.value=""
            },100)
        })

 12 keyup输入框的键盘松开

box2.addEventListener("keup",function(){
              console.log("松开键盘触发一次");
         })

13 keypress 按下

 box2.addEventListener("kepress",function(){
              console.log("输入框键盘按下");
         })

14.input

box2.addEventListener("input",function(){
              console.log("输入框键盘按下");
         })

15 change 输入框失焦并且value改变

 box2.addEventListener("change",function(){
             console.log("输入框失焦并且value改变");
        })

16输入框刚开始就有焦点

box2.focus()

17 focus 输入框获取焦点时 触发

 box2.addEventListener("focus",function(){
             console.log("获得焦点触发");
        })

18 blur失去焦点时触发

box2.addEventListener("blur",function(){
             console.log("失去焦点触发");
        })

19 onload 加载事件 加载完毕时执行

 window.onload=function(){
            alert("加载完毕时执行:5大BOM功能加载完毕")
        }