事件冒泡是如何工作的，它是什么？ [复制]

Question

注意：这个问题用Difference between Event Bubbling and Event Capture 标记为 dup，但事实并非如此。我想问一下 Event、Target 和 TagName 是什么的基本问题。我想了解，什么是偶数，什么是target和tagName，就像函数中传递的参数一样。

我试图理解 events 和 target，换句话说，事件冒泡，我完全不知道它是什么以及如何理解它，我知道一切都是事件，但有人能解释打个比方，哪里用一个例子就很容易理解了

document.addEventListener = ("click", (event) => {
   event.target.tagName
});

tagName 是我想知道的。

Answer 1

您的问题似乎命名错误。从您的编辑看来，您确实想了解更多关于 event 对象的信息，尤其是 target 和 target.tagName 属性。

下面是一个事件冒泡的例子，展示了有问题的属性：

• event 保存有关已发生事件的元数据；
• event.target 持有对原始事件源的引用，例如单击的按钮；
• event.target.tagName 只是 target 的标签的大写名称，例如'DIV' 或 'P';
• event.currentTarget 持有对附加事件侦听器的节​​点的引用。

let handler = event => {
  console.log('Handler fired!')
  console.log('Event listener attached to:', event.currentTarget)
  console.log('Event originally occurred on:', event.target)
}

document.getElementById('outer').addEventListener('click', handler)
document.getElementById('inner').addEventListener('click', handler)
document.body.addEventListener('click', handler)

<div id="outer">
  <button id="inner">Click Me!</button>
</div>