什么 Typescript 类型是 Angular2 事件

2022-08-30 04:57:36

如果我在 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


答案 1

正如@AlexJ所建议的那样

您传递的事件是 DOM 事件,因此您可以使用 作为类型。$eventEventName

在你的情况下,这个事件是一个MouseEvent,文档说,引用

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

在所有这些情况下,您将获得.MouseEvent

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

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

当事件触发时,您将获得一个焦点事件

因此,您可以非常简单地执行此操作,控制台记录事件,您将看到与此消息类似的消息,我们将具有事件名称

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

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

编辑

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


答案 2

一些常用事件及其相关名称(MouseEventFocusEventTouchEventDragEventKeyboardEvent):

| 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 的答案),你可以在其中找到第 5419 行的所有事件处理程序映射:

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