Javascript 事件冒泡是如何工作的，它是什么？

注意：这个问题被标记为dup with，但它不是。我试图问basic什么是事件、目标和标记名。我想了解什么是偶数，什么是目标和标记名，因为它就像在函数中传递的参数。

我试图理解

事件

和

目标

，换句话说，事件冒泡，我完全搞不清楚它是什么以及如何理解它，我知道一切都是一个事件，但有人能用一些类比来解释吗，哪一个例子容易理解

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

---

标记名是我想知道的东西。

看起来您可能将问题命名错误。从您的编辑中，听起来您确实想了解更多关于

事件

对象的信息，尤其是

目标

和

目标.tagName

属性

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

• event

  保存有关所发生事件的元数据

• event.target

  保存对原始事件源的引用，例如单击的按钮

• event.target.tagName

  只是

  target

  标记名的大写名称，例如

  'DIV'

  或

  'P'

• event.currentTarget

  保存对事件侦听器连接到的节点的引用

let handler=event=>{
log（'Handler fired！'）
console.log（'附加到：'的事件侦听器，Event.currentTarget）
console.log（'事件最初发生在：'，Event.target上）
}
document.getElementById（'outer'）。addEventListener（'click'，handler）
document.getElementById（'inner'）。addEventListener（'click'，handler）
document.body.addEventListener（'click'，handler）

点击我！

@caisah不，我读到了，但这并不能满足我的疑问，冒泡只是事件的一小部分。事件对象与冒泡没有太大关系。应在不诉诸stackoverflow的情况下设置目标<代码>标记名与事件无关，是。谢谢！这就是我想要的，你们可能想编辑这个问题，因为我不是以英语为母语的人。然而，我对

事件

和

目标

有点困惑。我可以说，

target

就像

单击

或

keydown

或

按键

，但它不是像event说的那样是一个

事件

。您所做的一切，例如滚动、单击、

keydown

、

keypress

、

zoom

或

pan

都是一个

事件，或者我遗漏了一些
事件。target
是页面上的DOM节点，如
或
。例如，
keydown
或
click
的属性将是
event.type
。我做了如下操作
document.addEventListener（“click”，函数（事件）{console.log（“单击“+event+”，并使用“+event.target.tagname”的标记名以“+event.target+”为目标；}”）
当我掌握它的时候，我不明白的是当上面的内容被输出时，它会像应该的那样被分解
[htmlilement]
，但是当我执行
event.target.tagName
时，它会给我完整的元素及其内容，差异原因
目标
本身是一个具有
文本内容
和
标记名
等属性的对象（两者都是字符串）。将对象打印到控制台时，它要么将其转换为类似于
'[htmlilement]'
的字符串，要么将其所有属性显示为树。另一方面，字符串将始终作为字符串打印。太好了，我将尝试使用您的最后一条评论，尝试消化它，但感谢您提供的伟大示例和解释！