document.addEventListener报'Uncaught TypeError: handleEvent不可调用'的原因与解决

错误原因 #

你在addEventListener中传入了new doSomething，这会创建一个doSomething构造函数的实例对象。虽然doSomething作为构造函数被调用时，会立即执行内部的helper函数输出内容，但当DOMContentLoaded事件真正触发时，浏览器会尝试调用该实例的handleEvent方法——而你的doSomething实例并没有定义这个方法，因此抛出Uncaught TypeError: Property 'handleEvent' is not callable错误。

解决方法 #

1. 直接传递函数引用（推荐） #

去掉new关键字，直接传递doSomething函数本身作为监听器。这样事件触发时才会执行函数，符合事件监听的预期逻辑：

function doSomething() {
    function helper() {
        console.log("DOM is loaded now.");
    }
    helper();
}

document.addEventListener("DOMContentLoaded", doSomething);

2. 为构造函数添加handleEvent方法 #

如果必须使用实例对象作为监听器，需要在doSomething的实例上定义handleEvent方法，让浏览器能正确调用：

function doSomething() {
    function helper() {
        console.log("DOM is loaded now.");
    }
    // 给实例绑定handleEvent方法
    this.handleEvent = helper;
}

document.addEventListener("DOMContentLoaded", new doSomething);

3. 使用匿名函数简化逻辑 #

直接用匿名函数包裹执行代码，避免构造函数带来的额外问题：

document.addEventListener("DOMContentLoaded", function() {
    console.log("DOM is loaded now.");
});

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