Почему Event.target не элемент в машинописном тексте?

Question

Я просто хочу сделать это с моим KeyboardEvent

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

Хотя Event.target имеет тип EventTarget не наследуем от элемента. Так что я должен бросить это так:

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

Это, вероятно, из-за некоторые браузеры не ниже стандартов, не так ли? Какова правильная реализация агностики браузера в TypeScript?

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

Answer 1

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

From MDN:

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

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

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

Дальнейшее чтение: https://typescript.codeplex.com/discussions/432211

Answer 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 }); 
    } 

В моей USECASE, это четко определенно, что только вызывающее handleChange является элемент HTML типа ввода текста.