如何在javascript中拦截事件处理程序？

Question

假设我有一个简单的网页，只有一个小js文件：

document.addEventListener('click', (event) => {
    console.log("click event fired");
});

document.addEventListener('keypress', (event) => {
    console.log("keypress event fired");
});

如何使用 Firefox 开发者控制台来：

1. 覆盖 addEventListener 函数，以便我可以记录它正在侦听的类型？
2. 登录后执行原功能代码

现在我有这个：

Object.defineProperty(Document.prototype, "addEventListener", {
    value: function () {
        console.log("addEventListener of type ...? was fired");
        // execute original function
    }
});

每当单击文档时，输出应该是：

类型为 click 的 addEventListener 被触发
点击事件被触发

或者按下某个键时：

按键类型的 addEventListener 被触发
按键事件已触发

Answer 1

首先，你已经快到了。您可以将

Document.prototype.addEventListener

存储在外部变量中，然后重写该函数，最后从外部变量中调用它。

const addEvent = Document.prototype.addEventListener;

Object.defineProperty(Document.prototype, "addEventListener", {
    value: function(event, handler) {
        console.log(`Handler for ${event} type registered`);
        addEvent(event, handler);
    }
});

// for example
document.addEventListener("mouseover", () => {
    console.log("Document was hovered");
});