Почему Event.target not Element в Typescript?

Я просто хочу сделать это с помощью своего KeyboardEvent

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

Пока Event.target имеет тип EventTarget, он не наследует от Element. Поэтому я должен сделать это следующим образом:

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

Вероятно, это связано с тем, что некоторые браузеры не соответствуют стандартам, не так ли? Какова правильная реализация агностики браузера в TypeScript?

PS: Я использую jQuery для захвата KeyboardEvent.

Ответы

Ответ 1

Он не наследуется от Element, потому что не все объекты событий являются элементами.

Из MDN:

Элемент, документ и окно являются наиболее распространенными целями событий, но другие объекты также могут быть объектами событий, например XMLHttpRequest, AudioNode, AudioContext и т.д.

Даже те KeyboardEvent, которые вы пытаетесь использовать, могут возникать в элементе DOM или в объекте окна (и, теоретически, на других вещах), поэтому прямо здесь не было бы смысла определять evt.target как a Element.

Если это событие в элементе DOM, я бы сказал, что вы можете смело предположить evt.target. является Element. Я не думаю, что это вопрос кросс-браузерного поведения. Просто, что EventTarget является более абстрактным интерфейсом, чем Element.

Дополнительная литература: https://typescript.codeplex.com/discussions/432211

Ответ 2

Используя машинопись, я использую пользовательский интерфейс, который применяется только к моей функции. Пример использования.

  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.

Ответ 3

JLRishe ответ правильный, поэтому я просто использую это в своем обработчике событий:

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

Ответ 4

Машинопись 3.2.4

Для получения свойства вы должны привести цель к соответствующему типу данных:

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

Ответ 5

Просто используйте e.currentTarget вместо e.target и он уже будет напечатан соответствующим образом