浅谈js事件流

什么是事件流？ 事件流分为三个阶段即：事件捕获阶段、处于目标阶段、事件冒泡阶段 什么是事件捕获？ 当某个事件发生时，父元素应该更早接收到事件，具体元素则最后接收到事件 如下面例子：

<ul id="js_ul">
    <li id="js_li">
        <button id="js_click_me">点我吖</button>
    </li>
</ul>

// addEventListener的第三参数为true时，即是事件捕获，为false即是事件冒泡
let button = document.getElementById('js_click_me'),
        ul = document.getElementById('js_ul'),
        li = document.getElementById('js_li'),
        body = document.body,
        html = document.documentElement;
    button.addEventListener('click', function(e) {
        console.log('button');
    }, true);
    ul.addEventListener('click', function(e) {
        console.log('ul');
    }, true);
    li.addEventListener('click', function(e) {
        console.log('li');
    }, true);
    body.addEventListener('click', function(e) {
        console.log('body');
    }, true);
    html.addEventListener('click', function(e) {
        console.log('html');
    }, true);
    document.addEventListener('click', function(e) {
        console.log('document');
    }, true);
    window.addEventListener('click', function(e) {
        console.log('window');
    }, true);

如果点击button，那么这个事件发生的顺序是这样的： 1.window 2.document 3.html 4.body 5.ul 6.li 7.button 什么是事件冒泡？ 由最具体的元素接收，然后逐级向上传播到不具体的节点 这里只需要将上面的addEventListener的第三个参数修改为false即可 如果点击button，那么这个事件发生的顺序是这样的： 1.button 2.li 3.ul 4.body 5.html 6.document 7.window