事件传递

对于DOM模型中的事件传递（Event propagation），以前总是不太在意，直到遇到一个又一个坑，也没有将其重视，今天下定决心仔细理一理。之所以废话了这么一句，是不希望把学习变得过于科普了，见谅。

Back in old days，在过去，如果说到事件传递，有一个比较经典的问题：“如果一个元素和它的其中一个祖先（ansestor）元素都拥有同一个事件句柄，哪一个将会首先触发？”
不要惊讶，答案是：“这取决于浏览器。”

网景（Netscape）浏览器拥抱事件捕获（Event Capture），同时微软浏览器则大力发扬事件冒泡（Event Bubbling）。两种传递方式都是W3C DOM level 2 event 的标准（2000）。

还可以参考这里：W3C DOM level 3 event（2003）。

在事件传递中，分为三个阶段，分别是：事件捕获、事件触发、事件冒泡。后两者如同字面意思很好理解，而事件捕获被称为trickling，即“滴下”的意思，向下传递。也即是 Trickle down, bubble up。

事件捕获

如上所述，事件捕获阶段，事件从根对象向下传递，直至目标节点，如下图所示：

事件捕获阶段

假设buttonOne上注册了一个点击事件，当我们点击它的时候，实际上DOM将由上至下依次将点击事件传递，直至buttonOne，此过程中，无论每一个祖先节点是否注册有点击事件，都将被其捕获。

事件冒泡

在事件冒泡阶段，事件从目标节点开始向上传递，直至根对象，如下图所示：

事件冒泡阶段

同理，若buttonOne上注册了一个点击事件，DOM将由下至上依次将点击事件冒泡，直至window对象，在此过程中，无论每一个祖先节点是否注册有点击事件，都将进行冒泡传递。

举个栗子

事件冒泡

<!-- HTML -->
<h1>事件冒泡</h1>
<div id="parent">
    parent
    <div id="child">
        child
        <div id="grandchild">
            grandchild
        </div>
    </div>
</div>

document.getElementById('parent').addEventListener('click', function(e) {
    console.log('parent clicked');
}, false);
document.getElementById('child').onclick = function(e) {
    console.log('child clicked');
}
document.getElementById('grandchild').onclick = function(e) {
    console.log('grandchild clicked');
}

输出结果：

事件冒泡

如上可知，若我们采用事件冒泡的方式进行事件传递，首先触发的一定是目标节点上的事件。

事件捕获

<!-- HTML -->
<h1>事件冒泡</h1>
<div id="parent">
    parent
    <div id="child">
        child
        <div id="grandchild">
            grandchild
        </div>
    </div>
</div>

document.getElementById('parent').addEventListener('click', function(e) {
    console.log('parent clicked');
}, true);
document.getElementById('child').onclick = function(e) {
    console.log('child clicked');
}
document.getElementById('grandchild').onclick = function(e) {
    console.log('grandchild clicked');
}

值得注意的一点，这里我们将addEventListener的第三个参数，即useCapture设置为了true，意思是，在事件捕获阶段就触发该click事件，所以我们就有了如下结果。

输出结果：

事件捕获

如上可知，若我们采用事件捕获的方式进行事件传递，首先触发的一定是注册为捕获阶段（useCapture: true）的事件。

应该使用哪一种事件传递方式？捕获or冒泡？

实际上这应该取决于你想做什么，在绝大部分情况下，并没有孰优孰劣，现代浏览器默认的传递方式是冒泡传递。唯一的不同就是事件句柄执行的顺序而已。如果你想要一个祖先元素上的事件更早触发，你也可以按照捕获的方式来传递。

扩展阅读：在复杂的DOM结构下，捕获排序也许，也许，也许会有些许的性能优势（我并没有亲测）。

最近遇到的坑

最近遇到一个坑，究其原因之后，发现是在实际使用过程中，事件冒泡与浏览器默认行为产生了冲突，这里只是提一下，给大家一点启示。

情景如下：

<style>
input {
    position: absolute;
    left: -9999px;
}
</style>
<label id="label">
    选择
    <i class="fa fa-checkbox"></i>
    <input type="checkbox" />
</label>

<script>
document.getElementById('label').onclick = function() {
    console.log('label clicked');
};
</script>

上边的代码，实现了一个虚拟的复选框，真实的复选框被移除到了视图之外。

正常情况下，<label>上的点击事件会被触发一次，因为<input>并未注册任何事件句柄。实际的结果是，控制台输出了两次label clicked。

几经思考，终于发现了原因所在，流程如下：

1. 点击<label>，触发自身的点击事件，输出第一次label clicked
2. 由于浏览器的默认行为，<label>将会传递一个点击事件到其关联的<input>，由于事件冒泡的存在，首先会触发<input>的点击事件，随后再一次冒泡到<label>，输出第二次label clicked。

针对上面的问题，解决方案如下：

document.getElementById('label').onclick = function(e) {
    e.preventDefault();
    console.log('label clicked');
    // 然后手动toggle内部checkbox的checked状态即可
    ...
};

Tips: 如果改变HTML的结构，将<input>放置到<label>外部，并用for属性与id进行关联，便不会出现上边的问题了。

欢迎交流，完。

其他参考文献：
http://www.quirksmode.org/js/events_order.html
https://www.kirupa.com/html5/event_capturing_bubbling_javascript.htm
https://itbilu.com/javascript/js/Ek6pnznye.html
http://stackoverflow.com/questions/24501497/why-the-onclick-element-will-trigger-twice-for-label-element