JavaScript事件处理

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

1.HTML事件处理

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

<button onclick="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.onclick=function (){       //事件1
alert("demo2事件1");
}
btn2.onclick=function (){         //事件2    事件2会覆盖掉事件1
alert("demo2事件2");
}
btn2.onclick=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():阻止事件默认行为