事件冒泡机制

让咱们先看一段代码

<!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办法能够阻止事件再次流传。说到这里，事件处理模型到底有什么意义呢？集体认为有两个益处：

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

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

  1. blur, focus, load, unload事件是不流传的。
  2. 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办法能够阻止事件的默认解决行为，比方在上例中，点链接时就不会关上百度页面。