事件目标的dom节点，同时绑定捕获事件和冒泡事件的话，是按照addEventListener绑定的顺序触发

今天遇到个关于捕获事件和冒泡事件执行顺序的问题，例子如下

 <div id="div1" style="height:300px;width:300px;background-color: green">
        <div id="div2" style="height:200px;width:200px;background-color: yellow">
            <div id="div3" style="height:100px;width:100px;background-color: red">
            </div>
        </div>
 </div>

let divs = document.getElementsByTagName('div');
        
[...divs].forEach((elem, index, array) => {
    elem.addEventListener('click', function(e){
        console.log('bubble:'+this.id);
    });
    elem.addEventListener('click', function(e){
        console.log('capture:'+this.id);
    }, true);
})

点击最里面的div3，输出结果如下：

div1，div2的顺序都很正常，div3的结果看起来有点微妙。

通过一番找资料……看到了这个博客 https://blog.youkuaiyun.com/aitangyong/article/details/43231111

结论是，作为事件目标的dom节点，同时绑定捕获事件和冒泡事件的话，是按照addEventListener绑定的顺序触发的。

而不是事件目标的dom节点，同时绑定捕获事件和冒泡事件的话，触发顺序是先捕获再冒泡