Question

注意：此问题已被Difference between Event Bubbling and Event Capture标记为重复，但它不是。我正在尝试询问什么是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>

事件冒泡如何运作，它是什么？

1 个答案: