JavaScript事件处理

HTML5开发中的事件处理，一般交给javaScript来处理。而JS的处理事件方式一般有三种：

    1.HTML事件处理

             直接将事件添加到HTML结构中，这种方法随便普遍，但是修改起来较为麻烦。

    <button οnclick="demo()"></button>
    <script>
        function demo(){
            alert("demo");
        }
    </script>

    2.DOM0级事件处理

             把一个函数赋值给一个事件处理程序属性。  这种方法是在JS中通过DOM获取元素ID,然后来设置他的事件。

     不过这个方式有个弊端，就是后一个事件会覆盖掉前一个相同的事件。

<button id="btn2">demo2</button>
<script>
    var btn2=document.getElementById("btn2");
    btn2.οnclick=function (){       //事件1
        alert("demo2事件1");
    }
    btn2.οnclick=function (){         //事件2    事件2会覆盖掉事件1
        alert("demo2事件2");
    }
    btn2.οnclick=null;  //清除事件

</script>

   3.DOM2级事件处理

             通过 addEventListener("事件名","事件处理函数","布尔值")     其中的布尔值  true:事件捕获     false:事件冒泡

                   事件冒泡：有最具体的元素接收事件，然后将事件逐级向上传递。（每一级可能都会对事件进行处理，所以需要调用事件对象的stopPropagation方法来阻止事件冒泡）

                   事件捕获：由最外级先接受事件，逐步向具体事件传递。

          通过DOM2级事件处理方式，解决了dom0的问题。后面的相同事件不会覆盖掉前面的事件。

          当我们需要移除事件时：removeEventListener("事件名","事件处理函数");

    <button id="btn3">demo3</button>
    <script>
        var btn3=document.getElementById("btn3");
        btn3.addEventListener("click",fun1);
        btn3.addEventListener("click",fun2);

        function fun1(){
            alert("demo3  DOM2级事件");
        }
        function fun2(){
            alert("demo3  DOM2级事件 22");
        }
    </script>

事件对象：

        在事件调用函数时，可以获取事件对象，只需要在事件的参数中加入参数event

         事件对象event方法：

             1.type:获取事件类型

              2.target:获取事件目标

            3.stopPropagation:阻止事件冒泡

            4.preventDefault():阻止事件默认行为