为何addEventListener不接受类的静态handleEvent方法？

当你给addEventListener传一个对象作为监听器时，浏览器的逻辑是：事件触发时调用该对象的handleEvent方法。但这里的关键是——JS里的类本质是构造函数，属于函数类型，不是普通对象。

看你写的代码：

class Foo {
    static handleEvent() {
        console.log(`clicked`);
    }
}
document.body.addEventListener(`click`, Foo);

你传入的Foo是类（也就是构造函数），浏览器会先判断监听器的类型：

• 如果是函数，就直接在事件触发时执行这个函数；
• 如果是对象，才会去调用它的handleEvent方法。

因为Foo是函数类型，浏览器会把它当成普通回调函数直接调用，也就是执行Foo()。但类的构造函数必须用new关键字调用，所以就抛出了Uncaught TypeError: Class constructor Foo cannot be invoked without 'new'的错误。

而如果是类的实例（new Foo()），这时候是对象类型，浏览器就会去调用它的handleEvent方法（不管是实例自身还是原型链上的）。你用Foo.handleEvent能解决，是因为你直接传入了这个静态方法函数本身，浏览器会把它当成普通回调执行，自然没问题。

简单说：只有对象类型的监听器，才会触发handleEvent的调用逻辑；类本身是函数，走的是普通回调的执行逻辑，和静态handleEvent无关。

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