Angular2 이벤트 유형

Angular2 이벤트 유형

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의 제안대로

통과하신 이벤트$eventDOM 이벤트이기 때문에EventName타입으로서

당신의 경우 이 이벤트는 입니다.또한 문서에는 다음과 같이 기재되어 있습니다.

MouseEvent 인터페이스는 사용자가 포인팅 디바이스(마우스 등)와 상호 작용하기 때문에 발생하는 이벤트를 나타냅니다.이 인터페이스를 사용하는 일반적인 이벤트에는 click, dblclick, mouseup, mousedown 등이 있습니다.

그 모든 경우에, 당신은 그것을 얻게 될 것입니다.MouseEvent.

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

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

이벤트가 트리거되면가 표시됩니다.

매우 간단하게 할 수 있습니다.콘솔에 이벤트를 로그에 기록합니다.이 메시지와 유사한 메시지가 표시되며 이벤트 이름이 표시됩니다.

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

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

편집

또한 모든 입력이 포팅된 TypeScript를 확인할 수도 있습니다.고객님의 경우stopPropagation()는 의 일부이며, 에 의해 확장됩니다.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 |               |

일반 이벤트는 다음 항목에 관련지어집니다.

• 가까운.
• 바꾸다
• 무효한
• 놀고
• 리셋
• 스크롤
• 선택한다.
• 제출하다
• 토글
• 대기중

Typescript의 저장소를 참조하면 dom.generated.d.ts는 5419행의 모든 이벤트 핸들러 매핑을 찾을 수 있는 글로벌 이벤트인터페이스(Credit은 Eric의 답변으로 넘어갑니다)를 제공합니다.

interface GlobalEventHandlersEventMap {
    "abort": UIEvent;
    "animationcancel": AnimationEvent;
    "animationend": AnimationEvent;
    "animationiteration": AnimationEvent;
    "animationstart": AnimationEvent;
    "auxclick": MouseEvent;
    "beforeinput": InputEvent;
    "blur": FocusEvent;
    "canplay": Event;
    "canplaythrough": Event;
    "change": Event;
    "click": MouseEvent;
    "close": Event;
    "compositionend": CompositionEvent;
    "compositionstart": CompositionEvent;
    "compositionupdate": CompositionEvent;
    "contextmenu": MouseEvent;
    "cuechange": Event;
    "dblclick": MouseEvent;
    "drag": DragEvent;
    "dragend": DragEvent;
    "dragenter": DragEvent;
    "dragleave": DragEvent;
    "dragover": DragEvent;
    "dragstart": DragEvent;
    "drop": DragEvent;
    "durationchange": Event;
    "emptied": Event;
    "ended": Event;
    "error": ErrorEvent;
    "focus": FocusEvent;
    "focusin": FocusEvent;
    "focusout": FocusEvent;
    "formdata": FormDataEvent;
    "gotpointercapture": PointerEvent;
    "input": Event;
    "invalid": Event;
    "keydown": KeyboardEvent;
    "keypress": KeyboardEvent;
    "keyup": KeyboardEvent;
    "load": Event;
    "loadeddata": Event;
    "loadedmetadata": Event;
    "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;
    "slotchange": Event;
    "stalled": Event;
    "submit": SubmitEvent;
    "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;
    "webkitanimationend": Event;
    "webkitanimationiteration": Event;
    "webkitanimationstart": Event;
    "webkittransitionend": Event;
    "wheel": WheelEvent;
}

관계자에 의하면event종류Object제 경우도 타이프캐스트를 했을 때event오브젝트에는 에러가 발생하지 않지만 angular2의 문서를 읽어본 결과event종류EventEmitter그래서 당신은 당신의 이벤트를 카스트(cast)로 입력할 수 있다.EventEmitter

같은 http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview 의 plunkr 를 참조해 주세요.

자세한 것은, https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding 를 참조해 주세요.

앞의 답변은 원래의 질문을 훌륭하게 다루어 올바른 방향으로 인도해 주었습니다.

그러나 저는 Angular(및 프런트 엔드)를 배우기 시작하다가 이 페이지를 우연히 발견하게 되었습니다.이러한 유형의 문서화와 유지보수가 어떻게 되어 있는지 명확하게 알 수 없었습니다.추가 컨텍스트에 대한 짧은 참조:

및 는 모두 Mozilla 사양의 일부입니다.Mozilla는 최신 웹 브라우저가 JavaScript 런타임에 기능을 노출하기 위해 사용하는 사실상의 API입니다.

Java와 같은 백엔드 환경에 익숙하다면 웹 API 사양은 언어 공급자가 관리하는 중앙 문서(Java의 경우 Oracle의 Java Doc)와 서드파티 API에 대한 참조와 대략적으로 동등하다고 볼 수 있습니다.

메인 디스트리뷰션의 완전한 실장이 보증되는 Java/C# 사양과는 달리 프런트 엔드에서는모든 브라우저 프로바이더는 지원 대상 부품을 자유롭게 선택할 수 있습니다.클릭과 같은 일반적인 이벤트는 시장에 나와 있는 모든 것을 지원하지만 고급 기능을 자세히 살펴볼수록 보증은 되지 않습니다.단, Web API의 사양 설명서는 주요 브라우저의 지원을 지정된 모든 기능에 의해 추적하는 훌륭한 작업을 수행합니다.예를 들어, 여기에서는, 「브라우저 호환성」의MouseEvent참조할 수 있습니다.

웹 API에 대한 뛰어난 소개는 Mozila's Page의 공식 프레젠테이션을 확인하십시오.

언급URL : https://stackoverflow.com/questions/35966965/what-typescript-type-is-angular2-event