js中dom0级事件和dom2级事件使用

1.dom0级事件

在介绍dom0级事件之前，先简单介绍一下html事件，类似与一下代码的事件都叫做html事件：

<div onclick="fun([实参])"></div><script type="text/javascript">function fun([形参]){//代码部分}            </script>

以上的情况就叫做html事件，也算是比较常用的事件情况。

ok，下面介绍dom0级事件，直接看代码比较清晰，类似与下面的代码的情况：

<div id="mydiv"></div><script type="text/javascript">var mydiv=document.getElementById("mydiv");mydiv.onclick=function(){//代码部分}</script>

（名字是随便起的，便于理解），还可以是一下这种情况：

<div id="mydiv"></div><script type="text/javascript">document.getElementById("mydiv").onclick = function() {//代码部分}</script>

这两种情况本质上没有区别，只是获取多了一个获取元素对象的过程。

2.dom2事件

1.其实从dom0级事件到dom2级事件，当中也经历过dom1级事件，只不过没什么变化，所有也就忽略掉了。

如果要讲解dom2级事件，就会牵扯到js中事件的嵌套和传递,。该篇只介绍dom2级事件，其他的可以去看上一篇博客。

dom2级事件是通过以下方法来实现的：

addEventListener('事件类型'，'函数名'，'true/false')

2.dom2级事件可以用于多重嵌套的事件中，最后一个参数true表示捕获，false的话表示冒泡。如果不写的话默认是冒泡的。而且使用dom2级事件还可以同时给同一个元素设置多个事件，类似下面代码：

var oinput = document.getElementById("in");oinput.addEventListener('mouseover',f1);oinput.addEventListener('click',f2);oinput.addEventListener('click',f3);function f1(){oinput.style.width="300px";oinput.style.height="30px"}function f2(){oinput.style.background="red";}function f3(){oinput.style.border="3px solid yellow";}

为了说明所以写了很简单的代码，这些方法都会被调用，所以dom2级事件可以设置多个事件。

3.删除事件

1.删除dom0级事件：

document.getElement("..").onclick=null

2.删除dom2级事件：

removeEventListener('事件类型','函数名'，'true/false')

4.dom0级事件和dom2级事件的使用场景

其实这个应该是具体情况具体分析的，但是在使用dom0级事件的时候，这个只支持冒泡不支持捕获。dom2级事件可以通过设置true/false来实现冒泡或者捕获。但是注意

冒泡可以被阻止，捕获不能被阻止。