在 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 的主要作用是:
- 允许在事件目标(元素、对象)上注册事件监听器
- 在事件触发时,使用 Event 对象保存事件的相关信息(事件类型、触发元素、时间戳等)
- 事件目标触发注册的事件监听器,并传入对应的 Event 对象
- 事件监听器可以通过 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 中实现交互效果的基础。