javascript 角2事件的 typescript 类型是什么

c2e8gylq  于 2022-12-21  发布在  Java
关注(0)|答案(4)|浏览(153)

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

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

另外,在相应的组件中,我有以下函数

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

是否应该为$event输入分配一个合适的类型?event参数本身是一个对象,但是如果我将其分配给一个type对象,就会得到一个错误
类型对象上不存在属性“stopProposation”
那么,Typescript认为$event输入是什么呢?

332nm8kg

332nm8kg1#

@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…}

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

    • 编辑**

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

vatpfxk5

vatpfxk52#

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

通用Event与以下各项关联:

  • 关闭
    *更改
  • 残废的
  • 玩耍
  • 复位
    *滚动
  • 选择
    *提交
    *切换
  • 等待

如果深入研究Typescript's repository, dom.generated.d.ts provides a global events interfaceEric's answer功不可没),可以在第5419行找到所有的事件处理程序Map:

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

ijxebb2r3#

根据官方消息,event的类型为Object,同样在我的情况下,当我将event类型转换为对象时,它不会引发任何错误,但在阅读angular2的文档后,发现event的类型为EventEmitter,因此您可以将事件类型转换为EventEmitter
这里是相同http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview的plunkr
有关详细信息,请参阅此处https://angular.io/docs/ts/latest/guide/template-syntax.html#!#事件绑定

7qhs6swi

7qhs6swi4#

前面的回答很好地处理了原来的问题,引导我走上了正确的方向。
然而,我在开始学习Angular(和前端)时偶然发现了这个页面,并且对所提到的类型是如何记录和维护的没有一个清晰的了解。
MouseEventFocus Event都是Mozilla的Web API's规范的一部分--大多数现代Web浏览器使用的事实上的API,用于向JavaScript运行时公开功能。
如果您习惯于Java这样的后端环境,则可以将Web API规范看作是由语言提供者维护的中心文档(在Java的情况下是Oracle's Java Doc)加上一些对第三方API的引用的大致等价物。
与Java/C#规范不同,在前端,每个浏览器提供商都可以自由选择支持哪些部分-虽然市场上的所有产品都很可能支持常见事件(如click),但随着您深入了解更高级的功能,这并不是一个保证。然而,Web API的规范文档在跟踪主要浏览器对所有指定功能的支持方面做得很好,例如,这里可以参考MouseEvent的浏览器兼容性。
有关Web API的详细介绍,请查看Mozzila's Page上的官方演示文稿

相关问题