什么Typescript类型是Angular2事件

Question

如果我在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输入什么？

Answer 1

正如@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.

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 |               |

通用事件与：

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

如果您深入Typescript 的存储库，dom.generated.d.ts提供了一个全局事件接口（归功于Eric 的回答），您可以在其中找到第 5752 行的所有事件处理程序映射：

interface GlobalEventHandlersEventMap {
    "abort": UIEvent;
    "animationcancel": AnimationEvent;
    "animationend": AnimationEvent;
    "animationiteration": AnimationEvent;
    "animationstart": AnimationEvent;
    "auxclick": MouseEvent;
    "beforeinput": InputEvent;
    "blur": FocusEvent;
    "cancel": Event;
    "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;
    "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;
    "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;
}