码迷,mamicode.com
首页 > 其他好文 > 详细

TypeScript之自定义事件

时间:2020-01-16 23:52:38      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:mic   eve   get   ima   stat   inf   com   pat   targe   

class MyEvent<T> extends CustomEvent<T> { public static readonly CMD: string = "EVENT_NAME"; public constructor($type: string , $data: T ) { super( $type , { detail: $data, bubbles: true, cancelable: true, composed: true }); } } class MyDispatch extends EventTarget { private static _instance: MyDispatch; public static get Instance(): MyDispatch { if (!MyDispatch._instance) MyDispatch._instance = new MyDispatch(); return MyDispatch._instance; } public send<T>($data: T, $type: string = MyEvent.CMD): void { const $event: CustomEvent = new MyEvent<T>($type, $data); this.dispatchEvent($event); } } class Test { public constructor() { MyDispatch.Instance.addEventListener(MyEvent.CMD, this.onEvent as EventListener); } private onEvent($e: MyEvent<ITest>): void { console.log(`target ${$e.target}`); console.log(`name: ${$e.detail._name} , occupation: ${$e.detail._occupation}`); } } interface ITest { _name: string; _occupation: string; } let $test: Test = new Test(); MyDispatch.Instance.send<ITest>({ _name: `Aonaufly`, _occupation: `it` });

技术图片

TypeScript之自定义事件

标签:mic   eve   get   ima   stat   inf   com   pat   targe   

原文地址:https://blog.51cto.com/aonaufly/2467379

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!