为什么访问EventTarget的parentElement属性会抛出TypeScript错误？

TypeScript 中的EventTarget是通用基础类型，除了 DOM 元素外，window、XMLHttpRequest等非 DOM 对象也实现了该接口，这些对象本身不存在parentElement属性，因此 TypeScript 静态校验时默认不会给EventTarget类型挂载 DOM 元素专属属性，就会抛出该错误。
你在 Chrome 中能正常运行，是因为focusin/focusout事件的实际触发源都是页面 DOM 元素，运行时event.target必然携带parentElement属性，只是 TypeScript 静态分析阶段无法推断这个场景下的具体类型。

方案1：类型断言（简单高效，适合业务场景） #

直接将event.target断言为HTMLElement类型，配合可选链语法简化非空判断，代码示例如下：

// focusin 事件逻辑
document.addEventListener(
  'focusin',
  (event) => {
    const target = event.target as HTMLElement | null;
    if (target?.parentElement?.classList.contains('note')) {
      target.parentElement.style.backgroundColor = "#E6FBFF";
    }
  }
);

// focusout 事件逻辑
document.addEventListener('focusout', (event) => {
  const target = event.target as HTMLElement | null;
  if (target?.parentElement) {
    target.parentElement.style.backgroundColor = "white";
  }
});

方案2：类型守卫（更严谨，适合底层公共代码） #

如果需要兼顾运行时的类型校验，可以先定义类型守卫函数判断目标是否为 DOM 元素，再执行后续逻辑：

// 定义类型守卫
function isHTMLElement(target: EventTarget | null): target is HTMLElement {
  return target !== null && 'parentElement' in target;
}

// focusin 事件逻辑
document.addEventListener(
  'focusin',
  (event) => {
    if (isHTMLElement(event.target) && event.target.parentElement.classList.contains('note')) {
      event.target.parentElement.style.backgroundColor = "#E6FBFF";
    }
  }
);

// focusout 事件逻辑
document.addEventListener('focusout', (event) => {
  if (isHTMLElement(event.target) && event.target.parentElement) {
    event.target.parentElement.style.backgroundColor = "white";
  }
});

这种方案会在运行时也做属性存在性校验，避免极端场景下出现运行时错误。

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