为什么 Event.target 不是 Typescript 中的元素？

Question

我只是想用我的 KeyboardEvent

 var tag = evt.target.tagName.toLowerCase();

虽然 Event.target 属于 EventTarget 类型，但它不继承自 Element 。所以我必须像这样投射它：

 var tag = (<Element>evt.target).tagName.toLowerCase();

这可能是由于某些浏览器不遵循标准，对吧？ TypeScript 中正确的与浏览器无关的实现是什么？

PS 我正在使用 jQuery 来捕获 KeyboardEvent 。

原文由 daniel.sedlacek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

它不继承自 Element 因为并非所有事件目标都是元素。

来自 MDN ：

元素、文档和窗口是最常见的事件目标，但其他对象也可以是事件目标，例如 XMLHttpRequest、AudioNode、AudioContext 等。

即使是 KeyboardEvent 您尝试使用的对象也可能出现在 DOM 元素或窗口对象上（理论上也可能出现在其他事物上），因此对于 evt.target 没有意义 --- 定义为 Element 。

如果它是 DOM 元素上的事件，那么我会说您可以放心地假设 evt.target 。是 Element 。我不认为这是跨浏览器行为的问题。仅仅是 EventTarget 是一个比 Element 更抽象的接口。

进一步阅读： https ://github.com/Microsoft/TypeScript/issues/29540

原文由 JLRishe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于 Angular 10+ 用户

只需声明 HTML 输入元素并将其扩展为使用目标作为对象，就像我在下面为我的 bootstrap 4+ 文件浏览器输入所做的那样。这样可以节省大量工作。

   selectFile(event: Event & { target: HTMLInputElement}) {
    console.log(event.target.files);
    this.selectedFile = event.target.files[0];
  }

原文由 Jorge Uriel Lopez Diaz de Leon 发布，翻译遵循 CC BY-SA 4.0 许可协议