关于前端:JavaScript的事件捕获和事件冒泡

让咱们先看一段代码

<!DOCTYPE html>
<html>
<head>
    <title>Event Capture and Propagation</title>
</head>
<body>
    <div id="parent" style="width:120px; height:120px; background:#090; padding:60px">
        <div id="child" style="width:120px; height:120px; background:#0CC"></div>
    </div>
    <script type="text/javascript">
    function alertName(e) {alert(this.id);
    }

    document.getElementById('child').onclick = alertName;
    document.getElementById('parent').onclick = alertName;
    </script>
</body>
</html>

咱们在外层 div 和内层 div 的 onclick 事件上都绑定了 alertName(e) 办法，关上浏览器试试。当咱们点击外层绿色局部，外层 div 的事件响应了；让咱们点击内层蓝色局部，内层 div 的事件先响应，而后外层 div 的事件再响应。

所以咱们很容易得出结论，浏览器是先找到以后被点击的元素，如果该元素上注册了 onclick 事件则响应；而后浏览器持续寻找被点击元素的父元素，如果其也注册了 onclick 事件，则该事件也响应，而后再持续向下层寻找。这就是 JS 的事件冒泡机制。咱们换个浏览器试试，目前版本的 Chrome, Safari, Firefox 和 IE 都是同样的后果。

其实事件处理有两种模型。一种叫冒泡型，也就是下面咱们看到的例子，程序是从里到外”div”->“body”->“html”->“document”->“window”。还有一种叫捕捉型，程序正好颠倒。IE 是反对冒泡型，据说历史上的 Netscape 是反对捕捉型。那咱们支流的 W3C 规范呢？答案是都反对，默认是冒泡型。这要怎么了解？咱们先来看下 W3C DOM 事件流的过程：

当一个事件产生时，先进入捕捉阶段，也就是从最外层开始，顺次向里流传事件，始终到触发事件的指标元素（上例中的 div child)。随后再进入冒泡阶段，从触发事件的元素开始，顺次向外流传，直到最外层元素。那么为什么咱们在后面的例子中看不到事件捕捉的阶段呢？这里咱们要先说另外一个概念。

下面的例子是将 onclick 事件属性设置为 alertName(e) 办法，这样的事件绑定办法个别不举荐，因为会笼罩之前所绑定的其余函数。咱们倡议采纳 addEventListener 办法。咱们将上例中绑定事件的代码做如下改变：

    child = document.getElementById('child');
    parent = document.getElementById('parent');
    child.addEventListener("click", alertName);    // 留神，这里要写 click，不是 onclick
    parent.addEventListener("click", alertName);

addEventListener办法的第一个参数是事件名称，第二个参数是响应函数。关上浏览器点击下，是不是跟之前用 onclick 绑定的成果一样啊？那这么做的益处是什么呢？咱们试试在上段代码的前面增加上面的代码：

    function alertAgain(e) {alert(this.id + ", again")
    }
    child.addEventListener("click", alertAgain);

再次点击内层蓝色 div 局部，你会看到该元素上绑定的两个点击事件办法都响应了，响应的程序同代码中绑定的程序统一。所以，应用 addEventListener 就不会笼罩掉之前已绑定的办法。

介绍完 addEventListener 办法的作用，就要说下，这个办法其实有第三个参数的。参数名称叫 useCapture，类型是布尔型。从名称里预计大家就猜到了，如果将它设为 true 的话，事件处理将会是捕捉型的，也就是事件将会在捕捉阶段响应，而不是冒泡阶段响应。咱们将下面例子中addEventListener 局部改变一下：

    child = document.getElementById('child');
    parent = document.getElementById('parent');
    child.addEventListener("click", alertName);    // 留神，这里要写 click，不是 onclick
    parent.addEventListener("click", alertName, true);
    parent.addEventListener("click", alertAgain);

测试一下，当点击内层蓝色局部时，外层 div 的 alertName 办法先响应了，而后是内层 div 的 alertName 办法，最初是外层 div 的 alertAgain 办法。也就是说，语句 parent.addEventListener("click", alertName, true); 注册的事件，被提前到捕捉阶段响应，即最外层的响应会先被执行。

留神了，IE8 之前是不反对 addEventListener 的，所以只能用 attachEvent 办法来增加事件绑定，代码如下：

    child = document.getElementById('child');
    parent = document.getElementById('parent');
    child.attachEvent("onclick", alertName);    // 留神，这里要写 onclick
    parent.attachEvent("onclick", alertName);

attachEvent办法没有第三个参数，所以说老版本的 IE 只反对事件冒泡，而不反对事件捕捉。即便是在后续的 IE 版本中能够调用 addEventListener 办法，但大家也要留神，外面的”this 指针”的指向跟 W3C 规范浏览器不一样。父元素在冒泡过程中响应时，”this 指针”将指向 window 对象，所以下面的例子在 IE 高版本中测试时，第二个”alert”内容会是undefined。哎，万恶的 IE！

有时候，咱们心愿事件被响应一次就停了，不心愿子元素（在捕捉过程中）或者父元素（在冒泡过程中），再次响应同样的事件，这个要怎么做呢？咱们还是看例子。这次咱们要改变的是 alertName 办法。

    function alertName(e) {alert(this.id);
        stopBubble(e);
    }

    function stopBubble(e) {if (e && e.stopPropagation)
            e.stopPropagation();    // W3C
        else
            window.event.cancelBubble = true;  // Old IE
    }

event对象上的 stopPropagation 办法能够阻止事件沿父节点（冒泡阶段）或子节点（捕捉阶段）进一步流传。所以通过上述改变后，咱们发现点击事件只会被响应一次。留神了，如果以后解决响应的节点上还有其余事件响应函数，那还是会被调用的，stopPropagation只是阻止事件往别的节点流传。万恶的 IE 在以前的版本中（应该是 IE8 往上）不反对 stopPropagation，所以要用window.event.cancelBubble=true 来阻止事件流传。

总结下，咱们介绍了事件处理模型中的事件捕捉和事件冒泡。在 W3C 规范中，事件响应时先进入捕捉阶段从最外层元素向内流传，始终到触发事件的指标元素；而后进入冒泡阶段从指标元素向外流传，始终到最外层元素。咱们能够通过 addEventListener 办法的第三个参数来决定事件是由捕捉阶段解决还是冒泡阶段解决。而事件对象 event 上的 stopPropagation 办法能够阻止事件再次流传。说到这里，事件处理模型到底有什么意义呢？集体认为有两个益处：

首先如果父元素里有很多子元素都要绑定同一个事件，而且事件的解决办法很相似，那咱们齐全能够只在父元素中绑定该事件作对立解决，这样代码会简洁很多。
事件产生时，以后元素及其流传门路上的元素都要对该事件作不同的解决，那咱们能够在各自元素上绑定对于该事件各自的解决形式。这要，当事件产生时，每个元素都只管解决本人的响应函数，有点像责任链模式。

最初，要说下两个留神点：

blur, focus, load, unload 事件是不流传的。
stopPropagation不能阻止对象的默认行为流传, 比方”submit”类型按钮的提交。如果你还是想做到，那就要阻止事件的默认行为。办法如下：

    <a href="http://www.baidu.com/" id="link">Baidu</a>
    <script type="text/javascript">
    function stopDefault(e) {if (e && e.preventDefault)
            e.preventDefault();    // W3C
        else
            window.event.returnValue = false;  // Old IE
    }

    link = document.getElementById('link');
    link.onclick = function(e) {alert("Prevent open the link of Baidu");
       stopDefault(e);
    }
    </script>

event对象上的 preventDefault 办法能够阻止事件的默认解决行为，比方在上例中，点链接时就不会关上百度页面。

事件冒泡机制

事件处理模型

增加事件绑定

捕捉阶段事件响应

阻止事件流传