在浏览器控制台中监控所有 JavaScript 事件

IT技术 javascript events
2021-02-23 19:06:08

是否可以收听所有 javascript 事件?

我试图猜测在 DOM 被 AJAX 请求修改后是否触发了一个事件。

2个回答

使用firebugweb 检查器,您可以使用monitorEvents

monitorEvents(myDomElem);

这将打印由myDomElem控制台发出的所有事件使用unmonitorEvents停止监视事件。

如果您对在操作 DOM 后获取事件感兴趣,请查看Mutation Events

编辑

据我所知,没有简单的方法可以拦截onreadystatechange来自所有 XMLHttpRequest 的所有事件。我能想到的唯一解决方法是用您自己的实现覆盖本机 XMLHttpRequest 对象。例如:

(function() { // Overriding XMLHttpRequest
    var oldXHR = window.XMLHttpRequest;

    function newXHR() {
        var realXHR = new oldXHR();

        realXHR.addEventListener("readystatechange", function() { 
            console.log("an ajax request was made") 
        }, false);

        return realXHR;
    }

    window.XMLHttpRequest = newXHR;
})();

毋庸置疑,这是非常笨拙的,而且通常是不明智的。

(它触发万吨mousemove事件,不过)
2021-04-23 19:06:08
@JanDvorak 这通常是不明智的,因为它使浏览器环境变得更加不可预测。例如,想象一下有一天 XMLHttpRequest 构造函数开始允许参数吗?我上面提供的实现忽略了所有构造函数参数,这意味着它可能会在未来的某个时间默默地中断。当它发生时,可能会导致许多令人困惑和令人沮丧的错误。这篇博文提到了为什么这是一个坏主意的其他原因:nczonline.net/blog/2010/03/02/...
2021-04-27 19:06:08
“通常不明智” - 为什么?
2021-04-28 19:06:08
是的,api.jquery.com/ajaxSuccess只是挂钩了 jQuery 的 XHR 包装器,因此没有捕获真正的 JS 事件。但是这个 hack 应该可以解决问题:)
2021-05-03 19:06:08
更新:monitorEvents在 Chrome 中也能正常工作。
2021-05-20 19:06:08

为了支持 Xavi 的回答monitorEvents(myDomElem),如果您想要除鼠标事件之外的所有内容,则可以输入unmonitorEvents(myDomElem, 'mouse')

http://www.briangrinstead.com/blog/chrome-developer-tools-monitorevents有一篇关于使用 chrome 监视器事件的好文章。