MouseEvent 的目标总是一个元素吗？答案

【问题标题】：Is the target of MouseEvent always an Element?MouseEvent 的目标总是一个元素吗？
【发布时间】：2020-02-21 11:57:29
【问题描述】：

Visual Studio Code 在以下 TypeScript 代码中显示目标变量是 EventTarget 类型：

document.addEventListener('click', (event) => {
  let target = event.target
})

为什么不将其标记为Element？ CharacterData 或 Document 也可以成为 MouseEvent 的目标吗？我使用以下 HTML 代码在 Web 浏览器窗口中单击，但无法获取除 Element 之外的 EventTarget 类型。

<!DOCTYPE html>
<html>
<head>
 <title>Test</title>
 <script>
   document.addEventListener('click', (event) => {  
     let target = event.target
     console.log(target instanceof Element)
   })
 </script>
</head>
<body>
test
</body>
</html>

如果 Visual Studio Code 将 MouseEvent 的目标标记为 Element，那么我可以用 Typescript 编写：

document.addEventListener('click', (event) => {
  if (event.target.matches('.carousel__control--prev'))
    shiftCarouselLeft(event.target.closest('.carousel'))
})

但现在我必须将 event.target 显式转换为 Element 才能在其上调用 match() 函数：

document.addEventListener('click', (event) => {
  let target = <Element>event.target
  if (target.matches('.carousel__control--prev'))
    shiftCarouselLeft(target.closest('.carousel'))
})

【问题讨论】：

这里有什么问题？
@evolutionxbox：我一直想知道 VS Code 或 TypeScript 是否可以更好地工作，因此我可以避免强制转换：let target = event.target

标签： javascript typescript visual-studio-code

【解决方案1】：

任何 EventTarget 都可以是 MouseEvent 事件的目标：

const foo = new EventTarget();
foo.addEventListener('click', (evt) => {
  console.log('is `foo`', evt.target === foo);
  console.log('is MouseEvent',  evt instanceof MouseEvent);
});
foo.dispatchEvent( new MouseEvent('click') );

【讨论】：

【解决方案2】：

可以在整个Document 节点上获取鼠标事件，但不是针对所有事件。您可以获得Document 节点，例如mouseenter 和 mouseleave 与 it's shown in the demo 一样（适用于 Chrome，但不适用于 Firefox 或 Safari）。

理论上也可以在文本节点上获取此类事件，但 AFAIK 没有浏览器这样做。

【讨论】：