无法移除浏览器DOM事件监听器问题求助

我实现了初始化和移除DOM事件监听器的方法，调用移除方法后控制台显示监听器数组已清空，但交互UI时监听器依然生效，DevTools的Event Listeners标签里也能看到监听器存在。手动在DevTools移除可以正常生效，怀疑是removeDOMListener方法的上下文丢失问题，求解决方案。

调用移除事件监听器方法后的输出结果：

Listeners before removal: 1
Listeners after removal: 0

相关代码 #

DOMListener.ts #

export abstract class DOMListener<T extends DOMElement> {
    protected readonly $root: T;
    protected readonly listeners: string[];

    protected constructor($root: T, listeners: string[] = []) {
        if (!$root) {
            throw new Error(`No $root provided for DomListener!`);
        }
        this.$root = $root;
        this.listeners = listeners;
    }

    [key: string]: any;
    public initDOMListener(): void {
        this.listeners.forEach((listener) => {
            const method = prefixSetter('on', listener);
            if (!this[method]) {
                const name = this.name || '';
                throw new Error(`Method ${method} is not implemented in ${name} Component`);
            }
            this[method] = this[method].bind(this);

            if (this.$root && this.$root.on) {
                this.$root.on(listener, this[method]);
                console.log(listener)
            }
        });
    }


    public removeDOMListener(): void {
        console.log('Listeners before removal:', this.listeners.length);
        this.listeners.forEach((listener) => {
            const method = prefixSetter('on', listener);
            const listenerFunction = this[method].bind(this);
            if (this.$root && this.$root.off) {
                this.$root.off(listener, listenerFunction);
            }
        });
        this.listeners.length = 0;
        console.log('Listeners after removal:', this.listeners.length);
    }
}

DOM.ts #

export class DOM {
    public $el: HTMLElement;

    constructor(selector: string | HTMLElement) {
        this.$el = typeof selector === 'string'
            ? document.querySelector(selector)!
            : selector;

    }

    public on(eventType: string, callback: EventListenerOrEventListenerObject) {
        this.$el.addEventListener(eventType, callback);
    }

    public off(eventType: string, callback: EventListenerOrEventListenerObject) {
        this.$el.removeEventListener(eventType, callback);
    }

    public append(node: DOM | HTMLElement): DOM {
        if (node instanceof DOM) {
            node = node.$el
        }

        this.$el.append(node)

        return this
    }
}

export function $(selector: string | HTMLElement): DOM {
    const el = typeof selector === 'string'
        ? document.querySelector(selector)
        : selector

    if (!el) {
        throw new Error(`Element not found: ${selector}`)
    }

    return new DOM(el as HTMLElement)
}

$.create = (tagName: string, classes = ''): DOM => {
    const el = document.createElement(tagName)
    if (classes) {
        el.classList.add(classes)
    }
    return $(el)
};

Component.ts #

export class Header extends BaseComponent {
    static className = 'header'

    constructor($root: HTMLElement) {
        super($root, {
            name: 'Header',
            listeners: ['input']
        });
        console.log($root)
    }

    toHTML(): string {
        return `
            <input type="text" class="header-input" value="Sheet name" />
            <div>
                <div class="header-button">
                    <i class="material-icons">delete</i>
                </div>
                <div class="header-button">
                    <i class="material-icons">exit_to_app</i>
                </div>
            </div>
        `;
    }

    public onInput(e: Event): void {
        const $target = e.target as HTMLInputElement;
        if ($target.closest('.header-input')) {
            console.log('Header input val:' + $target.value);
        }
    }
}

BaseComponent.ts #

export class BaseComponent extends DOMListener<any> {
    name: string;

    constructor($root: string | HTMLElement, options: {name?: string; listeners?: string[]} = {}) {
        if (!$root) {
            throw new Error('No $root provided for BaseComponent');
        }
        super($root, options.listeners);
        this.name = options.name || '';
    }

    toHTML(): string {
        return '';
    }

    init(): void {
        this.initDOMListener()

    }

    destroy(): void {
        this.removeDOMListener()
    }
}

问题根源 #

问题出在removeDOMListener方法中：每次调用bind(this)都会生成一个全新的函数引用，而removeEventListener要求传入的回调必须和添加时的引用完全一致。你在initDOMListener里已经把绑定后的函数存到了this[method]，但移除时又重新执行了bind，导致传入的是新函数，无法匹配到之前注册的监听器。

修复方案 #

修改removeDOMListener，直接使用initDOMListener中已经绑定好的函数引用，不要重新bind：

public removeDOMListener(): void {
    console.log('Listeners before removal:', this.listeners.length);
    this.listeners.forEach((listener) => {
        const method = prefixSetter('on', listener);
        // 直接使用初始化时绑定好的函数，避免重新生成引用
        const listenerFunction = this[method];
        if (this.$root && this.$root.off && listenerFunction) {
            this.$root.off(listener, listenerFunction);
        }
    });
    this.listeners.length = 0;
    console.log('Listeners after removal:', this.listeners.length);
}

额外优化建议 #

可以给DOMListener添加私有属性专门存储绑定后的回调，避免覆盖原方法，也更清晰地管理监听器引用：

export abstract class DOMListener<T extends DOMElement> {
    protected readonly $root: T;
    protected readonly listeners: string[];
    // 新增：存储绑定后的回调函数，避免依赖原方法覆盖
    private boundCallbacks: Record<string, EventListenerOrEventListenerObject> = {};

    protected constructor($root: T, listeners: string[] = []) {
        if (!$root) {
            throw new Error(`No $root provided for DomListener!`);
        }
        this.$root = $root;
        this.listeners = listeners;
    }

    [key: string]: any;
    public initDOMListener(): void {
        this.listeners.forEach((listener) => {
            const method = prefixSetter('on', listener);
            if (!this[method]) {
                const name = this.name || '';
                throw new Error(`Method ${method} is not implemented in ${name} Component`);
            }
            // 绑定后存入专门的对象，不覆盖原方法
            const boundCallback = this[method].bind(this);
            this.boundCallbacks[method] = boundCallback;

            if (this.$root && this.$root.on) {
                this.$root.on(listener, boundCallback);
                console.log(listener)
            }
        });
    }


    public removeDOMListener(): void {
        console.log('Listeners before removal:', this.listeners.length);
        this.listeners.forEach((listener) => {
            const method = prefixSetter('on', listener);
            const listenerFunction = this.boundCallbacks[method];
            if (this.$root && this.$root.off && listenerFunction) {
                this.$root.off(listener, listenerFunction);
                // 移除后清空存储的引用
                delete this.boundCallbacks[method];
            }
        });
        this.listeners.length = 0;
        console.log('Listeners after removal:', this.listeners.length);
    }
}

内容的提问来源于stack exchange，提问作者existentia