如果我在 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页面上的官方演示文稿