什么打字稿类型是 Angular2 事件

What Typescript type is Angular2 event

本文关键字：Angular2 事件 类型 什么      更新时间：2023-09-26

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

的那样

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

在您的情况下，此事件是一个MouseEvent，文档说，引用

MouseEvent 接口表示由于用户与指针设备（如鼠标）交互而发生的事件。使用此接口的常见事件包括单击、dblclick、鼠标向上、鼠标向下。

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

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

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

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

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

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

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

编辑

您还可以检查移植所有键入的 TypeScript dom.generated.d.ts。在您的情况下，stopPropagation()是Event的一部分，由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 会在 GlobalEventHandlersEventMap 接口中提供所有全局事件处理程序的映射（归功于 Eric 的答案）：

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;
    "copy": ClipboardEvent;
    "cuechange": Event;
    "cut": ClipboardEvent;
    "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;
    "paste": ClipboardEvent;
    "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;
    "scrollend": 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 类型，因此您可以将您的事件键入 caste 到EventEmitter

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

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

前面的回答很好地处理了原始问题，并引导我朝着正确的方向前进。

但是，我在开始学习Angular（和前端）并且不清楚如何记录和维护上述类型时偶然发现了此页面。对其他上下文的简短参考：

MouseEvent和Focus Event都是Mozilla Web API's规范的一部分 - 大多数现代Web浏览器用于向JavaScript运行时公开功能的事实API。

如果您习惯了像Java这样的后端环境，则可以将Web API规范视为与语言提供商维护的中央文档（Java中的Oracle的Java Doc）以及一些对第三方API的引用的粗略等效

。

与保证主要发行版完全实现规范的 Java/C# 规范不同，在前端，每个浏览器提供商都可以自由选择支持哪些部分 - 虽然像 click 这样的常见事件很可能会被市场上的所有内容支持，但这并不是一个保证，因为您深入研究更高级的功能。但是，Web API 的规范文档在跟踪主要浏览器的所有指定功能支持方面做得很好，例如，在这里可以查阅MouseEvent的浏览器兼容性。

有关Web API的出色介绍，请查看Mozzila页面上的官方演示文稿

相关文章：