导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

事件对象

• 事件触发时那一刻，所有相关信息和方法的集合
  • chrome：最外层多了个 pointerEvent
  • 其他浏览器：最外层是 mouseEvent

var container = document.querySelector('.container');
container.addEventListener('click', function(e) {
  console.log(e);
});

// [pointerEvent]PointerEvent ->
// MouseEvent.prototype ->
// UIEvent.prototype ->
// Event.prototype ->
// Object.prototype

🔥 event.target 和 event.currentTarget 的区别

• event.target：是谁被点到了？（事件最初发生的那个元素）
• event.currentTarget：谁正在处理这个事件？（当前绑定事件监听器的那个元素）

在上述事件冒泡中：

1. 点了子元素 #btn（target）
2. 事件会往外冒泡到父元素 .wrapper
3. 但父元素也能收到这个事件（currentTarget）

结果：

• 点击的是子元素，监听器却在父元素执行
• 你打印时看到：
  • target 是子
  • currentTarget 是父