我只是想用我的KeyboardEvent做这个

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

而事件。target是EventTarget类型,它不继承自Element。所以我必须像这样转换它:

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

这可能是因为一些浏览器不符合标准,对吧?TypeScript中正确的浏览器不可知实现是什么?

附注:我使用jQuery来捕获KeyboardEvent。


当前回答

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

中数:

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

甚至您尝试使用的KeyboardEvent也可以出现在DOM元素或窗口对象上(理论上也可以出现在其他东西上),所以在那里它对evt没有意义。目标定义为元素。

如果它是DOM元素上的一个事件,那么我想说您可以安全地假设event .target。是一个元素。我不认为这是跨浏览器行为的问题。只是EventTarget是一个比Element更抽象的接口。

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

其他回答

3.2.4条打印稿

要检索属性,必须将目标转换为适当的数据类型:

e => console.log((e.target as Element).id)

使用typescript,我使用了一个只适用于我的函数的自定义接口。示例用例。

  handleChange(event: { target: HTMLInputElement; }) {
    this.setState({ value: event.target.value });
  }

在这种情况下,handleChange将接收一个目标字段为HTMLInputElement类型的对象。

在后面的代码中,我可以使用

<input type='text' value={this.state.value} onChange={this.handleChange} />

更清晰的方法是将接口放到一个单独的文件中。

interface HandleNameChangeInterface {
  target: HTMLInputElement;
}

然后使用下面的函数定义:

  handleChange(event: HandleNameChangeInterface) {
    this.setState({ value: event.target.value });
  }

在我的用例中,明确定义了handleChange的唯一调用者是输入文本的HTML元素类型。

JLRishe的答案是正确的,所以我只是在我的事件处理程序中使用这个:

if (event.target instanceof Element) { /*...*/ }

@Bangonkali提供了正确的答案,但这个语法似乎更可读,对我来说更好:

eventChange($event: KeyboardEvent): void {
    (<HTMLInputElement>$event.target).value;
}

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

中数:

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

甚至您尝试使用的KeyboardEvent也可以出现在DOM元素或窗口对象上(理论上也可以出现在其他东西上),所以在那里它对evt没有意义。目标定义为元素。

如果它是DOM元素上的一个事件,那么我想说您可以安全地假设event .target。是一个元素。我不认为这是跨浏览器行为的问题。只是EventTarget是一个比Element更抽象的接口。

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