1. “触发事件” vs “监听事件”#

• 用户的动作（触发）：当你点击页面上的一个子元素（比如 <li> 或 <input>）时，这个点击动作客观上已经发生了。浏览器会生成一个“点击事件”对象。
• 代码的捕获（监听/绑定）：addEventListener 只是我们在路边设的一个“观察哨”。
  • 即使子元素上没有“观察哨”（没写 addEventListener），点击本身还是发生了。
  • 浏览器会拿着这个“点击消息”，沿着 DOM 树一层一层往上跑（这就是冒泡），问问爸爸元素、爷爷元素有没有人对这个消息感兴趣。

2. 为什么没给子元素加事件，父元素却能通过冒泡收到？#

这就好比 公司里的层级汇报制度：

1. 场景：基层员工（子元素）干了一件事（被点击了）。
2. 现状：基层员工自己没有被要求写汇报材料（没有给子元素添加事件监听）。
3. 机制（冒泡）：但是公司规定，任何基层发生的事，流程上都会自动算作部门的事，也会算作公司的事。
4. 结果：如果经理（父元素）那里装了一个监听器（addEventListener），经理就会说：“嘿，我听到我的地盘上发生了一件事（冒泡上来的），虽然不是直接点在我身上，而是点在我手下身上的，但我也要处理一下。”

3. 在事件委托中的应用#

在你提供的截图中（ul 和 li 的例子），正是利用了这一点：

• 不给子元素加事件：省内存，不需要给 100 个 li 都贴这种便条。
• 只给父元素加事件：利用“冒泡”机制，只要有人点到了 li，这个消息最终一定会传到 ul 那里。
• e.target：父元素通过事件对象中的 e.target 属性，就能知道消息是从哪个“基层员工”（具体的子元素）发出来的。

总结： 即使子元素没有绑定事件函数，用户的点击动作依然发生在子元素上，浏览器依然会按照冒泡机制向上并传递这个信号。父元素只要在“必经之路”上等着，就能抓到这个信号。

1. 核心区别：console.log vs console.dir#

虽然它们都是用来打印信息的，但在打印 DOM 元素时，表现完全不同：

• console.log(element)：

  • 侧重于 HTML 结构。
  • 它会把标签以 XML/HTML 的树状形式打印出来，方便你看这个标签里包裹了什么内容，长什么样。
  • 输出示例：<li>第1个孩子</li>

• console.dir(element)：

  • 侧重于 对象属性。
  • 它会把这个标签当做一个 JavaScript 对象（Object）打印出来，展开后全是属性键值对。
  • 输出示例：HTMLLIElement { tagName: "LI", className: "", style: ... }

2. 在你代码中的作用#

你在代码中有这样一行逻辑：

1
if (e.target.tagName === 'LI')

你使用了 tagName 这个属性。

如果你只用 console.log(e.target)，你只能看到 <li...> 这个标签，很难直观地发现它其实有一个叫做 tagName 的属性藏在对象里。

如果你使用 console.dir(e.target)，展开打印结果，往下拉，你就能亲眼看到：

• tagName: "LI"
• innerHTML: "第1个孩子"
• style: ...

总结： 当你想要查找一个 DOM 元素身上有哪些属性（比如想确认属性名是叫 classname 还是 className，是叫 tagname 还是 tagName）时，使用 console.dir() 是查看对象内部细节的最佳方式。

[web APIs 第三天.xmind](C:\Users\k\Desktop\前端资料\myRepository01\2.JavaScript\web APIs第三天\03-Xmind\web APIs 第三天.xmind)