事件捕获和事件冒泡的区别

事件是javascript的客户端编程中很常见，常见的事件有click,mouseover,mouseenter,keyup,focus等只要接触到事件，相信事件冒泡和事件捕获这两个概念都或多或少的听说过，那么它们到底有什么区别呢？先看一下事件冒泡：

当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick。

在上一篇文章《HTML中动态生成内容的事件绑定问题》中，我们讲到了事件冒泡这个问题，简单来说，就是子元素绑定的事件，会逐级冒泡到父元素，当它的一个或多个父元素上绑定有相同事件时，相应的事件处理函数会被触发。

事件冒泡比较好理解，我们知道，子元素被父元素包涵，当子元素上发生事件（例如点击）时，实际上子元素也会发生事件，来看下面的例子：

<div id="parent" onclick="alert('Parent')" style="width:200px;height:200px;border:1px solid #ccc">
	<div id="child" onclick="alert('Child')" style="width:98px;height:98px;border:1px solid #ccc;margin:50px">
          Child</div>
</div>

当单击id为Child的盒子时，也意味着单击了id为Parent的盒子，因为Child本来就在parent中。那么，这个执行的结果是先弹出Child然后弹出Parent。
那么就这一个例子，能不能让Parent先弹出来呢？实际上，高级浏览器提供这样的方法，父元素能够捕获到子元素发生的事件，并作出一定的动作，这就是事件捕获。也就是说，在子元素事件已经发生，注册的事件处理函数被调用之前，父元素能够捕获到这个事件。同样是一个例子：

<div id="parent" style="width:200px;height:200px;border:1px solid #ccc">
<div id="child" onclick="alert('Child')" style="width:98px;height:98px;border:1px solid #ccc;margin:50px">
Child</div>
</div>	
<script>
 var parent=document.getElementById("parent");
 parent.addEventListener("click",function(){alert('Parent')},true);
</script>

当点击id为child的盒子时，先弹出Parent后弹出Child。

总结：事件冒泡和事件捕获实际上是定义具有父子关系的元素上注册事件调用的先后顺序，事件冒泡是子元素事件逐级触发到父元素，事件捕获是父元素有捕获其子元素事件发生的能力，并在这个事件发生之前作出反应。