Javascript 什么 Typescript 类型是 Angular2 事件

What Typescript type is Angular2 event

提问by Alex J

If I have the following button in an html file

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

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

Also, in the corresponding component, I have this function

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

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

Is there a proper type that should be assigned to the $eventinput? The event parameter itself is an object, BUT if I assign it to a type object, I get an error

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

Property 'stopPropogation' does not exist on type object

类型对象上不存在属性“stopPropogation”

So, what does Typescript consider the $eventinput?

那么，Typescript 考虑$event输入的是什么？

采纳答案by Eric Martinez

As suggested by @AlexJ

正如@AlexJ 所建议的

The event you passed through $eventis a DOM event, therefore you can use the EventNameas the type.

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

In your case this event is a MouseEvent, and the docs says, quoting

在您的情况下，此事件是 a MouseEvent，并且文档说，引用

The MouseEventinterface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include click, dblclick, mouseup, mousedown.

所述的MouseEvent接口表示用户利用指示设备（如鼠标）的交互的发生是由于事件。使用此接口的常见事件包括click、dblclick、mouseup、mousedown。

In all those cases you'll get a MouseEvent.

在所有这些情况下，您都会得到一个MouseEvent.

Another example : if you have this code

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

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

When the event triggers you'll get a FocusEvent.

当事件触发时，您将获得一个FocusEvent.

So you can do it really simple, console log the event and you'll see a message similar to this one that'll we have the event name

所以你可以做的很简单，控制台记录事件，你会看到一条与此类似的消息，我们将拥有事件名称

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

You can always visit the docs for a list of existing Events.

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

Edit

编辑

You can also check for TypeScript dom.generated.d.tswith all the typings ported. In your case stopPropagation()is part of Event, extended by MouseEvent.

您还可以检查dom.generated.d.ts移植了所有类型的TypeScript 。在您的情况下stopPropagation()是 的一部分Event，由MouseEvent.

回答by CPHPython

Some commonly used events and their related names (MouseEvent, FocusEvent, TouchEvent, DragEvent, KeyboardEvent):

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

The generic Eventis associated to:

通用事件与：

• close
• change
• invalid
• play
• reset
• scroll
• select
• submit
• toggle
• waiting

• 关闭
• 改变
• 无效的
• 玩
• 重启
• 滚动
• 选择
• 提交
• 切换
• 等待

If you dig in Typescript's repository, dom.generated.d.tsprovides a global events interface(credit goes to Eric's answer) where you may find all the event handlers mappings at line 5725:

如果您深入Typescript 的存储库，dom.generated.d.ts提供了一个全局事件接口（归功于Eric 的回答），您可以在其中找到第 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;
}

回答by Pardeep Jain

According to official eventis of type Object, also in my case when i typecaste eventto the Object it does't throw any error, but after reading documentation of angular2 found eventis of type EventEmitterso you can type caste your event into EventEmitter

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

see here is plunkr for the same http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview

看到这里是相同的http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview 的plunkr

for more info refer here https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

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