事件触发机制

DOM 事件

HTML DOM 会对JavaScript 做出响应。(点击 ，键盘被按，输入框输入内容以及页面加载完毕等)

事件流

一个 DOM 事件可以分为捕获过程、触发过程、冒泡过程
如图参考

当目标为红框a标签时，通过给a绑定事件监听，可以得到相应的响应（触发过程），但如果同时给红绿虚线中的其他标签绑定监听，也会在捕获过程以及冒泡过程触发该标签的监听响应，比如

    <table id="tableNode">
        tableNode
        <tr id="tdNode">
            <td >
                tdNode
            </td>
        </tr>
    </table>

    <script>
        // 捕获
        document.addEventListener('click', function () {
            alert('capture：' + 1)
        }, true);
        tableNode.addEventListener('click', function () {
            alert('capture：' + 2);
        }, true);
        tdNode.addEventListener('click', function () {
            alert('capture：' + 3);
        }, true);

        // 冒泡
        document.addEventListener('click', function () {
            alert('bubble：' + 1);
        });
        tableNode.addEventListener('click', function () {
            alert('bubble：' + 2);
        });
        tdNode.addEventListener('click', function () {
            alert('bubble：' + 3);
        });
    </script>

明明只是点击了最内层的标签，却alert了6次，

注意

可以利用事件冒泡的机制，对类似表格等标签，比如一个场景是，表格里面的内容会动态自动添加，所以就不好给其中绑定事件监听，但是如果利用冒泡，可以给表格外部的table标签绑定，在点击内部的时候，虽然不会响应到内部，但是在冒泡回document的时候，可以经过table，在这里做出响应即可