事件冒泡和事件捕获

事件冒泡

其实事件冒泡的原理很简单：
当一个节点触发了一个事件，它会先执行它自身的事件处理程序(event handler),然后再执行其父节点上的事件处理程序(event handler)，然后依次向上。。。直到document对象。

举例：

<div onclick="alert('冒泡到了div')">
    <p onclick="alert('冒泡到了p')">
        <span onclick="alert('冒泡到了span')">这是span内的内容span>
    p>
div>
//当点击<span>内的内容时，会依次执行<span>、<p>、<div>节点的事件处理程序。
//即依次执行alert("冒泡到了span")
//alert("冒泡到了p")
//alert("冒泡到了div")

这个过程叫做冒泡，因为事件就像气泡从水底向上浮一样，从触发节点一直在向上层节点移动。

要注意的是，绝大部分的事件会冒泡，少部分的事件不会冒泡如：focus事件，页面的load事件等等

事件捕获

另一个事件处理的阶段叫做捕获，它在代码中很少使用(通常对外界不可见)，但是有时很有用。
W3C规定的处理事件的三个过程：

1. capture阶段，事件对象由window向下捕捉到触发节点的父节点
2. target阶段，事件到达目标节点
3. bubble阶段，事件从目标节点向上冒泡

下面是一个table元素中的td元素的onclick事件的处理过程。

当在td节点点击时，事件由window向下捕捉到td节点的父tr节点，然后到达目标节点，接着向上冒泡，依次执行沿途上的事件处理程序。

原文地址