javascript - para - ¿Qué tipo de mecanografía es el evento Angular2?
tipos de letras online (3)
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; }
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
?
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
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
.