Event.target이 Typescript의 요소가 아닌 이유는 무엇입니까?

Event.target이 Typescript의 요소가 아닌 이유는 무엇입니까?

---

내 KeyboardEvent로이 작업을 수행하고 싶습니다.

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

Event.target은 EventTarget 유형이지만 Element에서 상속하지 않습니다. 그래서 다음과 같이 캐스팅해야합니다.

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

이것은 아마도 표준을 따르지 않는 일부 브라우저 때문일 것입니다. TypeScript에서 올바른 브라우저 불가지론 적 구현은 무엇입니까?

추신 : 저는 jQuery를 사용하여 KeyboardEvent를 캡처하고 있습니다.

---

Element모든 이벤트 대상이 요소가 아니기 때문에 상속되지 않습니다 .

MDN에서 :

요소, 문서 및 창은 가장 일반적인 이벤트 대상이지만 다른 개체도 이벤트 대상이 될 수 있습니다 (예 : XMLHttpRequest, AudioNode, AudioContext 등).

KeyboardEvent사용하려는 것 조차도 DOM 요소 또는 창 객체 (그리고 이론적으로는 다른 것들)에서 발생할 수 있으므로 바로 거기 evt.target에서 Element.

DOM 요소에 대한 이벤트 인 경우 안전하게 가정 할 수 있습니다 evt.target. 입니다 Element. 나는 이것이 브라우저 간 동작의 문제라고 생각하지 않습니다. 단순히 그 EventTarget보다 더 추상적 인 인터페이스입니다 Element.

추가 정보 : https://typescript.codeplex.com/discussions/432211

---

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) { /*...*/ }

---

타이프 스크립트 3.2.4

속성을 검색하려면 대상을 적절한 데이터 유형으로 캐스팅해야합니다.

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

---

e.currentTarget대신 사용 e.target하면 이미 적절하게 입력됩니다.

참고 URL : https://stackoverflow.com/questions/28900077/why-is-event-target-not-element-in-typescript