JavaScript 中的 Event 和 EventTarget是什么，有什么作用

发表于 作者 IT之美

在 JavaScript 中,Event 和 EventTarget 用于实现事件驱动模型。

EventTarget 是事件目标的基类,用于管理事件的注册与触发。常见的 EventTarget 有:

  • Document
  • Window
  • DOM 节点(Node)
  • XMLHttpRequest
  • AudioContext 等

它们都继承自 EventTarget,可以添加事件监听器,触发事件。

Event 是事件的基类,表示事件发生时的状态。常见的 Event 有:

  • UI事件:click、scroll、mouseover 等
  • 键盘事件:keydown、keyup 等
  • 表单事件:submit、input、change 等
  • 触屏事件:touchstart、touchend 等
  • 自定义事件等

所以 EventTarget 和 Event 的主要作用是:

  1. 允许在事件目标(元素、对象)上注册事件监听器
  2. 在事件触发时,使用 Event 对象保存事件的相关信息(事件类型、触发元素、时间戳等)
  3. 事件目标触发注册的事件监听器,并传入对应的 Event 对象
  4. 事件监听器可以通过 Event 对象访问事件信息,并执行相应的逻辑

例如:

// 获取事件目标(button元素)
let button = document.querySelector('button'); 

// 事件监听器 
button.addEventListener('click', (event) => {
  // event 是事件对象,包含事件类型、触发元素等信息
  console.log(event.type);  // click
  console.log(event.target); // button元素
});

// 触发click事件 
button.click(); 

// 输出:
// click 
// <button>...</button>

这里 button 是 EventTarget,它继承自 Node 并注册了 click 事件的监听器。

当 click 事件触发时,会创建一个 Event 对象,其中包含事件类型(click)和触发元素(button)等信息。

该 Event 对象将会作为参数传入事件监听器,用于获取事件的相关信息。
所以总结来说,EventTarget 和 Event 用于实现事件驱动的程序结构。EventTarget 负责维护事件与对应的监听器,Event 用于传递事件发生时的状态与信息。
它们允许我们在事件目标(元素、对象等)上轻松注册事件监听器,并在事件触发时执行自定义逻辑,这是 JavaScript 中实现交互效果的基础。