JavaScript类中为DOM元素绑定事件监听器无效，如何解决？

云上老周

2026-6-20

问题原因与解决方法

核心问题

你错误使用了bind()：

addEventListener.bind(this, 'click', ...)仅创建了一个绑定了this的新函数，但没有执行这个函数，所以事件监听器根本没被添加到按钮上。
此外，addEventListener方法的this原本就应该是调用它的DOM元素（按钮），强行将其this改为Timer实例完全没必要，属于逻辑错误。

正确写法（两种可选）

写法一：利用箭头函数继承this

由于_addEventListeners是箭头函数，它的this已绑定到Timer实例，回调用箭头函数可直接继承该this：

class Timer {
    constructor({seconds, buttonSelector}) {
        this.seconds = seconds;
        this.buttonSelector = buttonSelector;

        this._addEventListeners();
    }

    _addEventListeners = () => {
        document.querySelector(this.buttonSelector).addEventListener('click', () => {
            console.log(this.seconds);
        });
    }
}

写法二：给回调函数绑定this

若坚持使用普通函数作为回调，需将回调函数的this绑定到Timer实例，而非给addEventListener绑定：

class Timer {
    constructor({seconds, buttonSelector}) {
        this.seconds = seconds;
        this.buttonSelector = buttonSelector;

        this._addEventListeners();
    }

    _addEventListeners = () => {
        const clickHandler = function() {
            console.log(this.seconds);
        }.bind(this);
        document.querySelector(this.buttonSelector).addEventListener('click', clickHandler);
    }
}