你真的了解浏览器事件冒泡吗

先上一段代码

<div id="test">
    <div class="child">
        click
    </div>
</div>

<script>
   document.addEventListener(‘click‘, function (e) {
       if(e.target.classList.contains(‘child‘)){
           console.log(‘child‘)
       }
       if(e.target.id===‘test‘){
           console.log(‘test‘)
       }
       if(e.target.tagName === ‘HTML‘){
           console.log(‘html‘)
       }
   }, false)
</script>

　　想一下，当点击click的时候，控制台会打印出什么？

一开始我认为是顺序打印出child,test,html。但是实际上只打印了child。理解不深啊。

实际上一个监听事件的处理函数handle的e.target只有一个，就是指向被点击最具体的那个节点。所以这里的e.target就是child这个节点。故后面两个if是不成立的。

如何想实现上面的功能了，具体代码

<script>    document.addEventListener(‘click‘, function(e) {        console.log(e.path,"e.path")        var target = e.target;        while (target) {            if (target.classList && target.classList.contains(‘child‘)) {                console.log(‘child‘)            }            if (target.id === ‘test‘) {                console.log(‘test‘)            }            if (target.tagName === ‘HTML‘) {                console.log(‘html‘)            }            target = target.parentNode;        }    }, false)</script>

　　手动冒泡来或者这些节点。这样就可以顺序打印出child，test，html了。