Sự kiện Angular2 loại Typecript nào

Question 1

Nếu tôi có nút sau trong tệp html

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

Ngoài ra, trong thành phần tương ứng, tôi có chức năng này

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

Có loại thích hợp nào nên được gán cho $eventđầu vào không? Bản thân tham số sự kiện là một đối tượng, NHƯNG nếu tôi gán nó cho một đối tượng kiểu, tôi sẽ gặp lỗi

Thuộc tính 'stopPropogation' không tồn tại trên đối tượng loại

Vì vậy, Typecript coi $eventđầu vào là gì?

Question 2

Theo gợi ý của @AlexJ

Sự kiện bạn đã chuyển qua $eventlà sự kiện DOM, do đó bạn có thể sử dụng kiểu này EventNamelàm kiểu.

Trong trường hợp của bạn, sự kiện này là một MouseEvent, và tài liệu nói, trích dẫn

Các MouseEvent giao diện đại diện cho sự kiện xảy ra do người dùng tương tác với một thiết bị trỏ (ví dụ như một con chuột). Các sự kiện phổ biến sử dụng giao diện này bao gồm nhấp chuột, nhấp chuột, nhấp chuột lên, di chuyển xuống .

Trong tất cả những trường hợp đó, bạn sẽ nhận được một MouseEvent.

Một ví dụ khác: nếu bạn có mã này

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

Khi sự kiện kích hoạt, bạn sẽ nhận được FocusEvent.

Vì vậy, bạn có thể làm điều đó thực sự đơn giản, bảng điều khiển ghi lại sự kiện và bạn sẽ thấy một thông báo tương tự như thông báo này rằng chúng tôi sẽ có tên sự kiện

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

Bạn luôn có thể truy cập tài liệu để biết danh sách các Sự kiện hiện có .

Biên tập

Bạn cũng có thể kiểm tra TypeScript dom.generated.d.tsvới tất cả các kiểu chữ đã được chuyển. Trong trường hợp của bạn stopPropagation()là một phần của Event, được gia hạn bởi MouseEvent.

Question 3

Một số sự kiện thường được sử dụng và tên liên quan của chúng ( 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 |               |

Sự kiện chung được liên kết với:

đóng
thay đổi
không hợp lệ
chơi
cài lại
cuộn giấy
lựa chọn
Gửi đi
chuyển đổi
đang chờ đợi

Nếu bạn tìm hiểu kho lưu trữ của Typescript , dom.generated.d.ts cung cấp giao diện sự kiện toàn cầu (tín dụng cho câu trả lời của Eric ), nơi bạn có thể tìm thấy tất cả các ánh xạ trình xử lý sự kiện tại dòng 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;
}

Question 4

Theo quan chức eventlà thuộc loại Object, cũng trong trường hợp của tôi khi tôi gõ eventvào Đối tượng, nó không gây ra bất kỳ lỗi nào, nhưng sau khi đọc tài liệu về angle2 được tìm thấy eventthuộc loại EventEmitterđể bạn có thể nhập đẳng cấp sự kiện của mình vàoEventEmitter

xem đây là plunkr cho cùng một http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview

để biết thêm thông tin, hãy tham khảo tại đây https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding