微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

TypeScript之自定义事件

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之自定义事件

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐