JavaScript事件

定义：

响应用户操作、完成交互效果

 组成:

触发谁的事件：事件源

触发的什么事件：事件类型

触发以后做什么：事件处理函数

事件绑定:

方式1：

         box1.onclick=function(){

            console.log("div1")

         }

         box1.onclick=function(){

             console.log("div2")

         }

以上这种方式进行事件绑定时，后面的会覆盖掉前面的，故最终单击元素时只会打印出div2

方式2：addEventListener()事件监听函数：可以绑定多事件函数，依次执行

         box2.addEventListener("click",function(){

             console.log("box2_1")

         })

         box2.addEventListener("click",function(){

             console.log("box2_2")

        })

此种方式可以给事件绑定多个事件处理函数，且不会被覆盖，依次执行

兼容性问题解决：主要是解决低版本ie浏览器的兼容性问题，但此方法ie11已经不支持了，此种绑定函数还需要在事件前面加上on，但使用addEventListener时已经不需要这样做了

         box2.attachEvent("onclick",function(){

             console.log("兼容性")

        })

事件解绑

方式1：

        box1.onclick=function(){

            console.log("谢谢惠顾")

            this.onclick=null

        }

方式2：

         function test(){

             console.log("谢谢惠顾")

             //解绑

             this.removeEventListener("click",test)

         }

        box2.addEventListener("click",test)

兼容性问题解决：

        function test2(){

            console.log("谢谢惠顾")

            解绑

            box2.detachEvent("onclick",test2)

        }

        box2.attachEvent("onclick",test2)    

事件类型:单击/双击事件

        var div_0=document.querySelector("#div_0")

        var div_1=document.querySelector("#div_1")

        var div_2=document.querySelector("#div_2")

        var div_3=document.querySelector("#div_3")

         div_0.onclick=function(){

             console.log("单击事件")

         }

         div_1.ondblclick=function(){

            console.log("双击事件")

         }



         //mousedown  mousemove mouseup

        div_2.onmousedown=function(){

             console.log("鼠标按下，不松手")

         }

         div_2.onmousemove=function(){

            console.log("鼠标移动")

         }

        div_2.onmouseup=function(){

             console.log("鼠标抬起")

         }



        //移入 移出mouseover  mouseout：不仅在元素本身起作用，还会将事件绑定在子元素上

         div_3.onmouseover=function(){

             console.log("移入")

         }

         div_3.onmouseout=function(){

             console.log("移出")

         }

        //移入 移出mouseenter mouseleave：仅仅在元素本身起作用，在其子元素上不起作用

         div_3.onmouseenter=function(){

             console.log("移入")

         }

         div_3.onmouseleave=function(){

            console.log("移出")

         }

键盘事件:

   //keydown    keyup

         username.onkeydown=function(){

             console.log("键盘按下")

         }

         username.onkeyup=function(){

             console.log("键盘抬起")

         }

表单事件:

 //获取/失去焦点  focus    blur



        //change  对比获取焦点和失去焦点时里面内容不一样才会触发

         username.onchange=function(){

             console.log("change")

         }



        //input  只要内容不一样就触发

         username.oninput=function(){

             console.log("input")

         }



        //reset(重置事件)  submit(提交事件)：这两个事件必须在form表单中才能使用

         var myform=document.querySelector("#myform")

         myform.onreset=function(){

             console.log("重置")

         }

         myform.onsubmit=function(){

             console.log("提交")

             return false

         }

移动端的触摸事件：

        //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")

         }