What Typescript type is Angular2 event
According to official event
is of type Object
, also in my case when i typecaste event
to the Object it does't throw any error, but after reading documentation of angular2 found event
is of type EventEmitter
so you can type caste your event into EventEmitter
see here is plunkr for the same http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview
for more info refer here https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding
Some commonly used events and their related names (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 | |
The generic Event is associated to:
- close
- change
- invalid
- play
- reset
- scroll
- select
- submit
- toggle
- waiting
If you dig in Typescript's repository, dom.generated.d.ts provides a global events interface (credit goes to Eric's answer) where you may find all the event handlers mappings at line 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;
}
As suggested by @AlexJ
The event you passed through $event
is a DOM event, therefore you can use the EventName
as the type.
In your case this event is a MouseEvent
, and the docs says, quoting
The MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include click, dblclick, mouseup, mousedown.
In all those cases you'll get a MouseEvent
.
Another example : if you have this code
<input type="text" (blur)="event($event)"
When the event triggers you'll get a FocusEvent
.
So you can do it really simple, console log the event and you'll see a message similar to this one that'll we have the event name
FocusEvent {isTrusted: true, relatedTarget: null, view: Window, detail: 0, which: 0…}
You can always visit the docs for a list of existing Events.
Edit
You can also check for TypeScript dom.generated.d.ts
with all the typings ported. In your case stopPropagation()
is part of Event
, extended by MouseEvent
.