DOM事件模型
在0级DOM事件模型中，它只是简单的执行你为它绑定的事件，比如你为某个元素添加了一个onclick事件，当事件触发时，它只是去调用我们绑定的那个方法，不再做其他的操作。
在2级DOM事件模型中，就比较复杂一些，它将不再是单纯的调用一下自身绑定的事件就完事了，它还拥有机会去处理它的祖先节点，在DOM2级事件模型中，它有一个事件传播过程，分为3个阶段，从“事件捕获”Document开始来到“目标节点”再从“目标节点”冒泡回Document对象，举段代码
<div id="div">
<a href="javascript:;">DOM事件模型</a>
</div>
<script>
var div = document.getElementById("div"); var a = div.children[0]; document.onclick = function(){ console.log("document");
};
a.onclick = function(){ console.log("a");
};
div.onclick = function(){ console.log("div");
}; </script>
可以看到我只是点击了a元素，但是div和document绑定的事件也被触发了，这就是DOM2级和1级的区别，同时你也看到，它是先输出的a，而不是div和document，虽然说它有3个阶段，但浏览器默认是在冒泡阶段才执行的，如果不这样的话，我们点击a元素就会执行多次啦。
如果你想让浏览器在捕获阶段执行，那么就不能直接使用onclick添加事件了，而是要使用addEventListener添加事件，它的第三个参数就是用来设置在哪个阶段执行，具体可以看
网友评论
