JS 自定义事件封装详解

2025-12-31 9919阅读

在 JavaScript 开发中，自定义事件封装是一项非常实用的技术。它可以让我们在代码中更灵活地处理各种交互和逻辑。

自定义事件的基本概念

自定义事件是我们自己定义的事件类型，与浏览器默认的事件（如 click、mouseover 等）类似，但具有我们特定的含义和用途。

简单的自定义事件封装示例

// 创建一个自定义事件类
class CustomEventEmitter {
    constructor() {
        // 用于存储事件监听器的对象
        this.eventListeners = {};
    }

    // 监听事件的方法
    on(eventName, callback) {
        if (!this.eventListeners[eventName]) {
            this.eventListeners[eventName] = [];
        }
        this.eventListeners[eventName].push(callback);
    }

    // 触发事件的方法
    emit(eventName, data) {
        const listeners = this.eventListeners[eventName];
        if (listeners && listeners.length > 0) {
            listeners.forEach(listener => listener(data));
        }
    }
}

// 使用示例
const emitter = new CustomEventEmitter();

// 监听自定义事件
emitter.on('myCustomEvent', (data) => {
    console.log('接收到自定义事件数据:', data);
});

// 触发自定义事件
emitter.emit('myCustomEvent', { message: '这是自定义事件的数据' });

在上述代码中，我们创建了一个 CustomEventEmitter 类。on 方法用于注册事件监听器，emit 方法用于触发事件并传递数据。

带命名空间的自定义事件封装

有时候，为了更好地组织和管理事件，我们可以给事件添加命名空间。

class NamespacedEventEmitter {
    constructor() {
        this.eventListeners = {};
    }

    // 监听带命名空间的事件
    on(namespaceEventName, callback) {
        const [namespace, eventName] = namespaceEventName.split('.');
        if (!this.eventListeners[namespace]) {
            this.eventListeners[namespace] = {};
        }
        if (!this.eventListeners[namespace][eventName]) {
            this.eventListeners[namespace][eventName] = [];
        }
        this.eventListeners[namespace][eventName].push(callback);
    }

    // 触发带命名空间的事件
    emit(namespaceEventName, data) {
        const [namespace, eventName] = namespaceEventName.split('.');
        const listeners = this.eventListeners[namespace] && this.eventListeners[namespace][eventName];
        if (listeners && listeners.length > 0) {
            listeners.forEach(listener => listener(data));
        }
    }
}

// 使用示例
const namespacedEmitter = new NamespacedEventEmitter();

namespacedEmitter.on('app.myEvent', (data) => {
    console.log('应用命名空间下的事件:', data);
});

namespacedEmitter.emit('app.myEvent', { appData: '应用相关数据' });

这里的 NamespacedEventEmitter 类允许我们通过 . 分隔命名空间和事件名来注册和触发事件，使事件管理更清晰。

移除事件监听器

为了避免内存泄漏等问题，我们还需要实现移除事件监听器的功能。

class EventEmitterWithOff {
    constructor() {
        this.eventListeners = {};
    }

    on(eventName, callback) {
        if (!this.eventListeners[eventName]) {
            this.eventListeners[eventName] = [];
        }
        this.eventListeners[eventName].push(callback);
    }

    emit(eventName, data) {
        const listeners = this.eventListeners[eventName];
        if (listeners && listeners.length > 0) {
            listeners.forEach(listener => listener(data));
        }
    }

    // 移除事件监听器
    off(eventName, callbackToRemove) {
        const listeners = this.eventListeners[eventName];
        if (listeners) {
            this.eventListeners[eventName] = listeners.filter(listener => listener!== callbackToRemove);
        }
    }
}

// 使用示例
const emitterWithOff = new EventEmitterWithOff();

const myCallback = (data) => {
    console.log('原始回调:', data);
};

emitterWithOff.on('anotherEvent', myCallback);
emitterWithOff.emit('anotherEvent', { initialData: '初始数据' });

// 移除事件监听器
emitterWithOff.off('anotherEvent', myCallback);
emitterWithOff.emit('anotherEvent', { newData: '新数据' }); // 此时不会触发 myCallback

通过添加 off 方法，我们可以在不需要某个事件监听器时将其移除。