为何document.querySelector获取的元素addEventListener仅提示两类全屏事件？

问题原因 #

document.querySelector默认返回Element | null类型，Element类型仅包含所有DOM元素通用的基础事件（如fullscreenchange、fullscreenerror），而document是Document类型，继承了更全面的事件接口，因此能显示全量事件提示。要让具体元素也触发全量提示，需要让编辑器识别元素的具体HTML类型。

解决方案 #

1. 泛型参数指定元素类型 #

直接给querySelector传入泛型参数，明确目标元素的具体类型：

const titleElement = document.querySelector<HTMLHeadingElement>("#title");

if (titleElement) {
  titleElement.addEventListener("", (ev) => {});
  // 此处将显示对应元素的全量事件提示
}

根据元素实际类型替换HTMLHeadingElement，比如按钮用HTMLButtonElement，输入框用HTMLInputElement。

2. 类型断言（快速但需确保元素存在） #

如果能确定元素一定存在，可直接用类型断言指定类型：

const titleElement = document.querySelector("#title") as HTMLHeadingElement;

titleElement.addEventListener("", (ev) => {});

3. 类型守卫（安全写法） #

用instanceof做类型守卫，既确保元素非空，又明确类型：

const titleElement = document.querySelector("#title");

if (titleElement instanceof HTMLHeadingElement) {
  titleElement.addEventListener("", (ev) => {});
}

内容的提问来源于stack exchange，提问作者Librouse