实现与优化事件管理器-CSDN博客

本文链接：https://blog.csdn.net/weixin_42276579/article/details/111908467

本文探讨了在HTML5环境中，如何使用TypeScript构建一个简单的事件管理器。从实际场景出发，介绍了事件管理器需要的方法，如addEventListener、dispatchEvent、removeEventListener和hasEventListener。文章通过分析第1版代码存在的问题——在遍历回调时可能导致的数组修改错误，提出了在第2版代码中解决该问题的改进措施。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.场景

假设你要实现一个需求，后端告诉你金币变化了，你在界面上更新金币数量

那么可以有一个发送者，用于在接到后端金币的变化的通知时，发送【金币变化】的消息
还需要一个侦听者，监听【金币变化】的通知并作出处理

2.需要方法

用于注册监听函数的方法：addEventListener
用于触发监听的方法：dispatchEvent
用于移除监听的方法：removeEventListener
用于判断是否有监听的方法： hasEventListener

第1个版本代码

// 第一个版本代码

class EventDispatcher {
   
    private $eventMap = {
   };

    /*
    * 注册监听函数
    */
    public addEventListener(type: string, listener: Function, thisObject: any): void {
   
        this.$addListener(type, listener, thisObject);
    }

    private $addListener(type, listener, thisObject): void {
   
        let eventMap = this.$eventMap;
        let list = eventMap[type];
        if (!list) {
   
            list = eventMap[type] = [];
        }
        this.$insertEventBin(list, type, listener, thisObject);
    }

    private $insertEventBin(list: any[], type: string, listener: Function, thisObject: any): boolean {
   
        let length = list.length;
        // 判断函数是否已经监听过了，监听过了直接返回
        for (let i = 0; i < length; i++) {
   
            let bin = list[i];
            if (bin.listener == listener && bin.thisObject == thisObject) {
   
                return false;
            }
        }

        let eventBin = {
   
            type: type, listener: listener, thisObject: thisObject
        }
        list.push(eventBin);
    }

    /*
    * 移除监听函数
    */
    public removeEventListener(type: string, listener: Function, thisObject: any)