为什么我的事件没有冒泡？

Question

这是一些演示代码：

<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>

当我点击文本时，控制台只记录“child”。为什么单击事件不会冒泡到#test的父节点？甚至html元素也无法获得单击事件。请问有谁能解释一下问题所在？

- SantinoDu

---

你不理解什么是“事件捕获”和“事件冒泡”。需要更多地了解它。 - Andrew D.

Answer 1

事件正在冒泡，这就是为什么注册到文档对象的处理程序会被触发。文档对象是dom中最顶层的对象，即它是html元素的父级。如果没有发生冒泡，则处理程序将不会被调用。

但在所有处理程序中，Event.target将引用事件起始的原始元素，因此它始终指向子元素。

引用分派事件的对象。当事件处理程序在事件的捕获或冒泡阶段被调用时，它与event.currentTarget不同。

如果要测试祖先元素，则需要从事件目标向上遍历，并查看其中是否有任何一个满足条件。

document.addEventListener('click', function(e) {
  var target = e.target;
  while (target) {
    if (target.classList.contains('child')) {
      snippet.log('child')
    }
    if (target.id === 'test') {
      snippet.log('test')
    }
    if (target.tagName === 'HTML') {
      snippet.log('html')
    }
    target = target.parentNode;
  }
}, false)

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

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

- Arun P Johny

---

请注意，event.target.parentNode将返回parentNode，如果需要，您可以遍历该树直到文档。或者使用target树中节点的event.path。 - frikinside

@ArunPJohnny，我刚刚看到它。我的评论和你的编辑之间只有两秒钟。对此很抱歉！ - frikinside

非常感谢。现在我可以理解了。你太好了！ - SantinoDu

在移动Web上使用snippet.js进行调试是一个不错的选择。但是这个片段可能有一个错误"else if (typeof object === "object")"，你的arg [0]是msg，所以应该是"else if (typeof msg === "object")"。 - SantinoDu