JS类中如何为事件监听器传参并实现移除操作？

方案1：将按钮存储为实例属性（最简洁） #

你的handleClick已经使用箭头函数，this会自动绑定到Toggle实例，直接把按钮元素存入实例属性，就能在事件处理函数中直接访问，无需额外传参：

class Toggle {
    constructor(element) {
        this.el = document.querySelector(element);
        this.btn = this.el.querySelector('button'); // 把按钮存为实例属性
        this.addListeners();
    }

    addListeners() {
        this.btn.addEventListener('click', this.handleClick);
    }

    handleClick = (e) => {
        const panelID = this.btn.closest('.toggle').id;
        this.open(panelID);
    }

    open(panelID) {
        // 示例展开逻辑
        const content = this.el.querySelector('.toggle-content');
        content.hidden = !content.hidden;
    }

    destroy() {
        this.btn.removeEventListener('click', this.handleClick);
        // 清理实例属性避免内存泄漏
        this.btn = null;
        this.el = null;
    }
}

方案2：使用bind绑定参数并保存引用 #

如果需要传递更多自定义参数，可通过bind创建绑定了参数的函数，并将该函数存入实例，确保移除监听器时能拿到同一引用：

class Toggle {
    constructor(element) {
        this.el = document.querySelector(element);
        this.addListeners();
    }

    addListeners() {
        const btn = this.el.querySelector('button');
        // 绑定this与btn参数，保存绑定后的函数引用
        this.boundHandleClick = this.handleClick.bind(this, btn);
        btn.addEventListener('click', this.boundHandleClick);
    }

    handleClick(btn, e) {
        const panelID = btn.closest('.toggle').id;
        this.open(panelID);
    }

    open(panelID) {
        // 示例展开逻辑
        const content = this.el.querySelector('.toggle-content');
        content.hidden = !content.hidden;
    }

    destroy() {
        const btn = this.el.querySelector('button');
        btn.removeEventListener('click', this.boundHandleClick);
        // 清理引用
        this.boundHandleClick = null;
        this.el = null;
    }
}

问题根源说明 #

• 匿名函数传参失效：使用() => this.handleClick(e, btn)这类匿名函数时，每次都是新的函数引用，removeEventListener无法匹配到对应的监听器，导致无法移除。
• e.target不可靠：按钮内部的span、svg元素会成为点击事件的target，此时无法直接拿到按钮本身；若想用事件对象获取按钮，可改用e.currentTarget（始终指向绑定事件的元素），但上述方案直接获取btn更可靠。

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