javascript - para - ¿Qué tipo de mecanografía es el evento Angular2?

tipos de letras online

Question

Si tengo el siguiente botón en un archivo html

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

Además, en el componente correspondiente, tengo esta función

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

¿Hay un tipo apropiado que debería asignarse a la entrada del $event ? El parámetro de evento en sí es un objeto, PERO si lo asigno a un objeto tipo, obtengo un error

La propiedad ''stopPropogation'' no existe en el objeto de tipo

Entonces, ¿qué considera Typecript la entrada del $event ?

Answer 1

Algunos eventos de uso común y sus nombres relacionados ( 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 | |

El Events genérico está asociado a:

• cerrar
• cambio
• inválido
• jugar
• Reiniciar
• Desplazarse
• seleccionar
• enviar
• palanca
• esperando

Si dom.generated.d.ts en dom.generated.d.ts (el crédito va a la respuesta de Eric ) donde puede encontrar todas las asignaciones de controladores de eventos en la línea 5725 :

interface GlobalEventHandlersEventMap { "abort": UIEvent; "animationcancel": AnimationEvent; "animationend": AnimationEvent; "animationiteration": AnimationEvent; "animationstart": AnimationEvent; "auxclick": MouseEvent; "blur": FocusEvent; "cancel": Event; "canplay": Event; "canplaythrough": Event; "change": Event; "click": MouseEvent; "close": Event; "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; "loadend": ProgressEvent; "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; }

Answer 2

Según el event oficial es de tipo Object , también en mi caso cuando escribo el event al objeto no arroja ningún error, pero después de leer la documentación del event angular2 encontrado es de tipo EventEmitter para que pueda escribir caste su evento en EventEmitter

ver aquí es plunkr para el mismo http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview

Para obtener más información, consulte aquí https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

Answer 3

Según lo sugerido por @AlexJ

El evento que pasó por $event es un evento DOM, por lo tanto, puede usar EventName como tipo.

En su caso, este evento es un MouseEvent , y los documentos dicen, citando

La interfaz MouseEvent representa eventos que ocurren debido a que el usuario interactúa con un dispositivo señalador (como un mouse). Los eventos comunes que utilizan esta interfaz incluyen clic, dblclick, mouseup, mousedown .

En todos esos casos obtendrás un MouseEvent .

Otro ejemplo: si tienes este código

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

Cuando se FocusEvent el evento, obtendrás un FocusEvent .

Para que pueda hacerlo realmente simple, la consola registra el evento y verá un mensaje similar a este que tendrá el nombre del evento

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

Siempre puede visitar los documentos para obtener una lista de Events existentes.

Editar

También puede verificar TypeScript dom.generated.d.ts con todas las tipificaciones portadas. En su caso, stopPropagation() es parte de Event , extendido por MouseEvent .