Question

如果我在html文件中有以下按钮

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

另外，在相应的组件中，我有这个功能

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

是否有适当的类型应分配给$event输入？事件参数本身是一个对象，但是如果我将它分配给一个类型对象，我会得到一个错误

财产＆＃39; stopPropogation＆＃39;在类型对象
上不存在

那么，Typescript对$event输入的看法是什么？

Answer 1

正如@AlexJ

所建议的那样

您通过$event传递的事件是一个DOM事件，因此您可以使用EventName作为类型。

在您的情况下，此事件为MouseEvent，文档说明引用

MouseEvent 接口表示由于用户与指点设备（例如鼠标）交互而发生的事件。使用此界面的常见事件包括单击，dblclick，mouseup，mousedown 。

在所有这些情况下，您都会获得MouseEvent。

另一个例子：如果你有这个代码

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

当事件触发时，您将获得FocusEvent。

所以你可以做到这一点非常简单，控制台记录事件，你会看到类似这样的消息，我们有事件名称

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

您随时可以访问文档以获取现有Events的列表。

修改

您还可以检查TypeScript dom.generated.d.ts，其中包含所有类型的内容。在您的情况下，stopPropagation()属于Event，由MouseEvent扩展。

Answer 2

一些常用事件及其相关名称（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 |               |

通用Event与以下内容相关联：

关闭
更改
无效
播放
重置
滚动
选择
提交
切换
等待中

如果您深入Typescript's repository, dom.generated.d.ts provides a global events interface（贷记到Eric's answer），则可以在line 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;
}

Answer 3

根据官方event类型为Object，在我的情况下，当我向对象进行类型转换event时，它不会抛出任何错误，但在阅读完文档之后angular2 found event的类型为EventEmitter，因此您可以将事件输入EventEmitter

在这里看到同样的http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview

的plunkr

有关详细信息，请参阅此处https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

什么Typescript类型是Angular2事件

3 个答案: