事件类型

鼠标事件 

设置一个按钮   

    <button>点击</button><br /><br /><br />

      var btn = document.querySelector("button");

       btn.addEventListener("click", () => {

          console.log("鼠标按下松开时 鼠标指针在被选元素区块内部");

        });

     btn.addEventListener("dblclick", () => {

           console.log(

             "鼠标第一次按下和第二次松开时 鼠标指针在被选元素区块内部 并且间隔时间不能太长"

          );

        });

       btn.addEventListener("mousedown", () => {

          console.log("鼠标在被选元素内按下");

        });

     btn.addEventListener("mouseup", () => {

          console.log("鼠标在被选元素内松开");

        });

         btn.addEventListener("mouseover", () => {

           console.log("鼠标进入被选元素内 经过就触发");

         });

         btn.addEventListener("mouseout", () => {

           console.log("鼠标离开被选元素内");

         });

      以下两个和上面不同的是mouseleave mouseenter不支持时间冒泡 mouseover和mouseout支持事件冒泡

     btn.addEventListener("mouseenter", () => {

          console.log("鼠标进入被选元素内");

        });

       btn.addEventListener("wheel", () => {

           console.log("鼠标滚轮滚动");

        });

       btn.addEventListener("scroll", () => {

           console.log("元素自身滚动 滚动条");

         });

 

    输入框事件 

    <input type="text" />

      var input = document.querySelector("input");

         input.addEventListener("keydown", () => {
          console.log("输入框键盘按下了");

         });//监听键盘 不是键盘输入就没用

         input.addEventListener("keyup", () => {

           console.log("输入框键盘松开了");

         });

         input.addEventListener("keypress", () => {

         console.log("输入框键盘按下了");

         });

     input.addEventListener("input", () => {

           console.log("输入框键盘按下了");

         });//监听输入框 任何输入都可以监听

         input.addEventListener("change", () => {

          console.log("输入框值发生变化 并且失去焦点");

         });//常用于做表单验证

        input.addEventListener("focus", () => {

           console.log("输入框获取焦点");

         });

         input.addEventListener("blur", () => {

           console.log("输入框失去焦点");

         });

      onload事件 浏览器5大BOM功能加载完毕时才执行