Why is Event.target not Element in Typescript?

event.target.value typescript
property 'id' does not exist on type 'eventtarget'.
event.target.value typescript angular
property 'target' does not exist on type 'htmlinputelement'
typescript click event
property 'closest' does not exist on type 'eventtarget'
onblur event typescript
event target id

I simply want to do this with my KeyboardEvent

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

While Event.target is of type EventTarget it does not inherit from Element. So I have to cast it like this:

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

This is probably due to some browsers not following standards, right? What is the correct browser agnostic implementation in TypeScript?

PS: I am using jQuery to capture the KeyboardEvent.

It doesn't inherit from Element because not all event targets are elements.

From MDN:

Element, document, and window are the most common event targets, but other objects can be event targets too, for example XMLHttpRequest, AudioNode, AudioContext, and others.

Even the KeyboardEvent you're trying to use can occur on a DOM element or on the window object (and theoretically on other things), so right there it wouldn't make sense for evt.target to be defined as an Element.

If it is an event on a DOM element, then I would say that you can safely assume evt.target. is an Element. I don't think this is an matter of cross-browser behavior. Merely that EventTarget is a more abstract interface than Element.

Further reading: https://typescript.codeplex.com/discussions/432211

Property 'value' does not exist on type EventTarget in TypeScript , event.target here is an HTMLElement which is the parent of all HTML elements, but isn't guaranteed to have the property value . TypeScript  typescript-bot commented Sep 21, 2019 This issue has been marked as a 'Duplicate' and has seen no recent activity. It has been automatically closed for house-keeping purposes.

Using typescript, I use a custom interface that only applies to my function. Example use case.

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

In this case, the handleChange will receive an object with target field that is of type HTMLInputElement.

Later in my code I can use

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

A cleaner approach would be to put the interface to a separate file.

interface HandleNameChangeInterface {
  target: HTMLInputElement;
}

then later use the following function definition:

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

In my usecase, it's expressly defined that the only caller to handleChange is an HTML element type of input text.

Event.currentTarget returns Element and not EventTarget · Issue , TypeScript Version: 2.1.4 Code Example from MDN: https://developer.mozilla.org/​en-US/docs/Web/API/Event/currentTarget function hide(e){ e. It's possible, for example, that the .target of an event is not an Element (you can add event listeners to XMLHttpRequest, for example, and XMLHttpRequest does not have a getBoundingClientRect method).

JLRishe's answer is correct, so I simply use this in my event handler:

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

EventTarget does not extend HTMLElement · Issue #29540 , TypeScript Version: 3.2.4 Search Terms: event.target instanceof HTMLElement eventTarget not instanceof HTMLElement Code // event.target is instanceof Consider clicking on the SVG element in the DOM structure below:. It doesn't inherit from Element because not all event targets are elements. From MDN : Element, document, and window are the most common event targets, but other objects can be event targets too, for example XMLHttpRequest, AudioNode, AudioContext, and others.

Typescript 3.2.4

For retrieving property you must cast target to appropriate data type:

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

EventTarget - Web APIs, EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for them. Many event targets (including elements, documents, and windows) also Living Standard, No change. Angular property 'parentNode' does not exist on type 'EventTarget' Ask Question Asked 2 years, 5 months ago. Why is Event.target not Element in Typescript?

@Bangonkali provide the right answer, but this syntax seems more readable and just nicer to me:

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

Event.target, The target property of the Event interface is a reference to the object appendChild(li2); function hide(e){ // e.target refers to the clicked <li> element // This is Event listeners are attached with the non-standard EventTarget. Property 'dataset' does not exist on type EventTarget in TypeScript I wanted to get to event.target.dataset of a clicked button element in React: <button onClick={onClickHandler} data-index="4" data-name="Foo Bar" > Delete Candidate </button>

TypeScript and React: Events, Events are key, and TypeScript's React typings have great support for them. That's why you can't use typical MouseEvent s or similar on your elements. You need to use the currentTarget.tagName); This is mainly because InputEvent is still an experimental interface and not fully supported by all browsers. If you use  I'm trying to transfer a dropdown menu from Javascript to Typescript to use in my Angular project. I can't figure out how to simulate event.target.matches though, which is giving me some problems. Is

target Event Property, More "Try it Yourself" examples below. Definition and Usage. The target event property returns the element that triggered the event. The target property gets the​  This will contain the element that actually has the event listener. So if the whole <section> has the eventlistener event.target will be the clicked element, the <section> will be in event.currentTarget. Otherwise parentNode might be what you're looking for.

TypeScript, Let's say I wanted to find an <input> element on the page: clientX in the example above is not a property available on any given event - it's With that setting, TypeScript will now complain if you try to access the property on an object that is  According to the DOM API, EventTarget does not extend HTMLElement — In fact, it is the other way around. HTMLElement extends Element, which extends Node, which extends EventTarget.

Comments
  • A bit cleaner syntax var element = ev.target as HTMLElement
  • In that case KeyboardEvent and MouseEvent should have it's own equivalent of EventTarget that will always contain the associated Element. DOM is so dodgy... :/
  • I am not an expert on DOM nor TypeScript but I would say the design of the EventTarget has too much ambiguity and that has nothing to do with TypeScript.
  • @daniel.sedlacek On the other hand, KeyboardEvents can occur on both DOM elements and on the window object (and theoretically other things), so right there it's impossible to give KeyboardEvent.target a type that's any more specific than EventTarget, unless you think KeyboardEvent should also be a generic type KeyboardEvent<T extends EventTarget> and would like to be forced to put KeyboardEvent<Element> all throughout your code. At that point, you're better off just doing the explicit cast, painful though it may be.
  • In cases it's helpful for anyone else in the future, I needed to cast as a specific element type in order to access the value property of a <select> tag. e.g. let target = <HTMLSelectElement> evt.target;
  • @munsellj (unfortunately) that is the correct way to handle ambiguities in a typed environment.
  • This worked perfectly for me - I was trying all sorts of nastiness, extending EventTarget etc. but this is the cleanest solution +1
  • Just to add to this, if you need to extend the event definition you can do something like this: handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement> & { target: HTMLInputElement }) => {...}
  • Is that the same as the <HTMLInputElement>event.target; syntax?
  • @KonradViltersten, they do the same thing. The as syntax was introduced because it conflicted with JSX. It's recommended to use as for consistency. basarat.gitbooks.io/typescript/docs/types/type-assertion.html
  • Aha, I see. It's also appearing more C#'ish which in many cases is an advantage, depending on the team's backend experience. As long as it's not one of those false friends where the syntax resembles something but implies something totally different technically. (I'm thinking var and const between Angular and C#, a sad experience of mine, hehe).
  • There is a big difference between currentTarget and target.