Menu
The event you passed through $event is a DOM event, therefore you can use the EventName as the type. 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.
Angular includes $event that contains the information about an event. The type of $event depends on the target event, e.g., if the target event is a native DOM element event, then it is an object. A component should define the onShow(event) method where the type of the parameter can be KeyboardEvent, MouseEvent, etc.
The $event object often contains information the method needs, such as a user's name or an image URL. The target event determines the shape of the $event object. If the target event is a native DOM element event, then $event is a DOM event object, with properties such as target and target.
Angular 2 is built on TypeScript, which uses ES6 syntax and compiles to vanilla JavaScript. Standard ES5 JavaScript is also valid TypeScript, so you can still use your existing code. Where TypeScript differs is in the typing system. Although it is optional, I recommend you use the typing system in your projects.
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.
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:
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 5752:
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;
"cuechange": Event;
"dblclick": MouseEvent;
"drag": DragEvent;
"dragend": DragEvent;
"dragenter": DragEvent;
"dragexit": Event;
"dragleave": DragEvent;
"dragover": DragEvent;
"dragstart": DragEvent;
"drop": DragEvent;
"durationchange": Event;
"emptied": Event;
"ended": Event;
"error": ErrorEvent;
"focus": FocusEvent;
"focusin": FocusEvent;
"focusout": FocusEvent;
"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;
"stalled": Event;
"submit": Event;
"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;
"wheel": WheelEvent;
}
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With