[javascript] Angular2 이벤트는 어떤 Typescript 유형입니까?

Program / 글쓴이

html 파일에 다음 버튼이있는 경우

<button (click)="doSomething('testing', $event)">Do something</button>

또한 해당 구성 요소에는이 기능이 있습니다.

doSomething(testString: string, event){
    event.stopPropagation();
    console.log(testString + ': I am doing something');
}

$event입력에 할당해야하는 적절한 유형이 있습니까? 이벤트 매개 변수 자체는 객체이지만 유형 객체에 할당하면 오류가 발생합니다.

유형 개체에 ‘stopPropogation’속성이 없습니다.

그렇다면 Typescript는 $event입력을 무엇으로 간주 합니까?

답변

@AlexJ가 제안한대로

전달한 이벤트 $event는 DOM 이벤트이므로을 EventName유형으로 사용할 수 있습니다 .

귀하의 경우이 이벤트는 MouseEvent이며 문서는 다음과 같이 말합니다.

된 MouseEvent의 인터페이스 (마우스와 같은) 포인팅 디바이스와 상호 작용하는 사용자에 의한 이벤트 발생을 나타낸다. 이 인터페이스를 사용하는 일반적인 이벤트에는 click, dblclick, mouseup, mousedown 등이 있습니다.

이 모든 경우에 MouseEvent.

또 다른 예 :이 코드가있는 경우

<input type="text" (blur)="event($event)"

이벤트가 트리거되면 FocusEvent.

정말 간단하게 할 수 있습니다. 콘솔에서 이벤트를 기록하면 이벤트 이름이있는 이와 유사한 메시지가 표시됩니다.

FocusEvent {isTrusted: true, relatedTarget: null, view: Window, detail: 0, which: 0…}

언제든지 문서를 방문하여 기존 이벤트 목록을 볼 수 있습니다 .

편집하다

dom.generated.d.ts모든 타이핑이 포팅 된 TypeScript 를 확인할 수도 있습니다 . 귀하의 경우 stopPropagation()의 일부 Event확장, MouseEvent.

답변

일반적으로 사용되는 일부 이벤트 및 관련 이름 ( MouseEvent , FocusEvent , TouchEvent , DragEvent , KeyboardEvent ) :

| MouseEvent | FocusEvent |  TouchEvent | DragEvent | KeyboardEvent |
|:----------:|:----------:|:-----------:|:---------:|:-------------:|
|    click   |    focus   |  touchstart |    drag   |    keypress   |
|   mouseup  |    blur    |  touchmove  |    drop   |     keyup     |
| mouseleave |   focusin  | touchcancel |  dragend  |    keydown    |
|  mouseover |  focusout  |   touchend  |  dragover |               |

일반 이벤트 는 다음과 연관됩니다.

  • 닫기
  • 변화
  • 유효하지 않음
  • 플레이
  • 초기화
  • 스크롤
  • 고르다
  • 제출
  • 비녀장
  • 기다리는

당신이 발굴되면 타이프 라이터의 저장소, dom.generated.d.ts는 제공하는 글로벌 이벤트 인터페이스 (신용 간다 에릭의 대답은 당신이 모든 이벤트 처리기 매핑을 찾을 수 있습니다) 라인 5725을 :

interface GlobalEventHandlersEventMap {
  "abort": UIEvent;
  "animationcancel": AnimationEvent;
  "animationend": AnimationEvent;
  "animationiteration": AnimationEvent;
  "animationstart": AnimationEvent;
  "auxclick": MouseEvent;
  "blur": FocusEvent;
  "cancel": Event;
  "canplay": Event;
  "canplaythrough": Event;
  "change": Event;
  "click": MouseEvent;
  "close": Event;
  "contextmenu": MouseEvent;
  "cuechange": Event;
  "dblclick": MouseEvent;
  "drag": DragEvent;
  "dragend": DragEvent;
  "dragenter": DragEvent;
  "dragexit": Event;
  "dragleave": DragEvent;
  "dragover": DragEvent;
  "dragstart": DragEvent;
  "drop": DragEvent;
  "durationchange": Event;
  "emptied": Event;
  "ended": Event;
  "error": ErrorEvent;
  "focus": FocusEvent;
  "focusin": FocusEvent;
  "focusout": FocusEvent;
  "gotpointercapture": PointerEvent;
  "input": Event;
  "invalid": Event;
  "keydown": KeyboardEvent;
  "keypress": KeyboardEvent;
  "keyup": KeyboardEvent;
  "load": Event;
  "loadeddata": Event;
  "loadedmetadata": Event;
  "loadend": ProgressEvent;
  "loadstart": Event;
  "lostpointercapture": PointerEvent;
  "mousedown": MouseEvent;
  "mouseenter": MouseEvent;
  "mouseleave": MouseEvent;
  "mousemove": MouseEvent;
  "mouseout": MouseEvent;
  "mouseover": MouseEvent;
  "mouseup": MouseEvent;
  "pause": Event;
  "play": Event;
  "playing": Event;
  "pointercancel": PointerEvent;
  "pointerdown": PointerEvent;
  "pointerenter": PointerEvent;
  "pointerleave": PointerEvent;
  "pointermove": PointerEvent;
  "pointerout": PointerEvent;
  "pointerover": PointerEvent;
  "pointerup": PointerEvent;
  "progress": ProgressEvent;
  "ratechange": Event;
  "reset": Event;
  "resize": UIEvent;
  "scroll": Event;
  "securitypolicyviolation": SecurityPolicyViolationEvent;
  "seeked": Event;
  "seeking": Event;
  "select": Event;
  "selectionchange": Event;
  "selectstart": Event;
  "stalled": Event;
  "submit": Event;
  "suspend": Event;
  "timeupdate": Event;
  "toggle": Event;
  "touchcancel": TouchEvent;
  "touchend": TouchEvent;
  "touchmove": TouchEvent;
  "touchstart": TouchEvent;
  "transitioncancel": TransitionEvent;
  "transitionend": TransitionEvent;
  "transitionrun": TransitionEvent;
  "transitionstart": TransitionEvent;
  "volumechange": Event;
  "waiting": Event;
  "wheel": WheelEvent;
}

답변

official eventis of type 에 따르면 Object, 내 경우에도 eventObject에 typecaste 할 때 오류가 발생하지 않지만 angular2의 문서를 읽은 후 발견 event된 유형이 EventEmitter있으므로 이벤트를 입력 할 수 있습니다.EventEmitter

동일한 http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview에 대한 plunkr는 여기를 참조하십시오

자세한 내용은 여기를 참조하십시오 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

답변