EventTarget：从事件目标说开去

2023-12-21 08:09:12

JS提供了多种操作DOM的基础API，它们是实现复杂web应用的基础。其中事件目标EventTarget对象，它是很多基础对象的基类，包括Element Document和Window。是所有DOM对象事件行为的抽象。 listener 是个函数或EventListner对象。

当在DOM元素添加事件监听器时，实际上就是让EventTarget对象去调用指定的listener函数。 EventTarget接口提供了添加事件、删除事件和派发事件三个方法：

addEventListener ：向DOM元素添加一个事件侦听器。
removeEventListener ：从DOM元素中删除一个事件侦听器。
dispatchEvent ：向DOM元素派发一个事件。

EventTarget接口提供了添加事件、删除事件和派发事件三个方法：

addEventListener ：向DOM元素添加一个事件侦听器。addEventListener方法接受三个参数：事件类型、事件处理函数和一个可选的布尔值。事件类型指定要侦听的事件类型，事件处理函数指定在事件发生时要调用的函数，布尔值指定事件是否在捕获或冒泡阶段触发。
removeEventListener ：从DOM元素中删除一个事件侦听器。removeEventListener方法接受三个参数：事件类型、事件处理函数和一个可选的布尔值。事件类型和事件处理函数必须与addEventListener方法中使用的参数相同，布尔值指定事件是否在捕获或冒泡阶段触发。
dispatchEvent ：向DOM元素派发一个事件。dispatchEvent方法接受一个参数：事件对象。事件对象指定要派发的事件类型和其他信息。

EventTarget接口还定义了以下属性：

onabort ：当HTML文档加载被用户中断时触发的事件。
onerror ：当HTML文档加载时发生错误时触发的事件。
onload ：当HTML文档加载完成时触发的事件。

EventTarget接口是DOM中一个非常重要的接口，它提供了操作DOM事件的基础方法。

具体示例

以下是一个使用EventTarget接口的示例：

// 获取要添加事件侦听器的元素
const element = document.getElementById('my-element');

// 创建一个事件处理函数
const handleClick = (event) => {
  console.log('The element was clicked!');
};

// 向元素添加一个事件侦听器
element.addEventListener('click', handleClick);

// 从元素中删除一个事件侦听器
element.removeEventListener('click', handleClick);

// 向元素派发一个事件
element.dispatchEvent(new Event('click'));