如何记录所有事件（使用操作）具有事件侦听器的 DOM 元素？答案

【问题标题】：how to log all events (use actions) an DOM elements that have event listeners?如何记录所有事件（使用操作）具有事件侦听器的 DOM 元素？
【发布时间】：2021-06-05 20:30:57
【问题描述】：

我想记录通过用户对 DOM 元素的操作触发的所有事件。像在我的网站上记录用户操作（宏）这样的功能，以便应用程序以后可以通过顺序执行使用操作来重新生成当前状态。怎么做？

是否有任何 API 或解决方案来查找由事件侦听器处理的所有事件？还是我应该自己收集事件？如果是这样，您的方法/解决方案/设计是什么？

这个 OP 说不：https://stackoverflow.com/a/63346192/5078847

【问题讨论】：

你需要它做什么？您希望它如何使用？如果您希望它用于测试自动化，您可以使用playwright codegen。否则你的问题已经回答了here 和there
我想要它用于生产。没有测试或调试。我想知道“用户在el1中输入了这个输入，然后选择了buttonX，然后点击了buttonY。”当此用户与朋友共享此链接（或稍后返回）时，我可以重新生成该状态，因为它离开了。

标签： javascript

【解决方案1】：

没有任何内置的东西，就像其他帖子所说的那样。 Chrome devtools 有一个函数getEventListeners，它可以获取给定元素（单数）的所有处理程序。您也不能在 Chrome 的开发工具之外使用它。

您可以（但不应该）从原型链中劫持addEventListener。

基于这个旧论坛here

/** !! Foot-Gun !! **/
/** Proof of Concept/Probably Doesn't Work **/
HTMLElement.prototype._addEventListener = HTMLElement.prototype.addEventListener;

HTMLElement.prototype.addEventListener = function(eventName, handlerFunction, eventOptions) {
    // reportFunction you would have to write yourself
    this._addEventListener(eventName, reportFunction, eventOptions);
    this._addEventListener(eventName, handlerFunction, eventOptions);
    // Store an array of them on the element
    if ('currentListeners' in this === false) {
        this.currentListeners = [
            { eventName, handlerFunction, eventOptions }
        ];
    } else {
        this.currentListeners.push({ eventName, handlerFunction, eventOptions });
    }
}

当然，我只是为任何想要的人分发了一把上膛的足枪。它充其量是一种反模式，它不控制/跟踪状态、模拟用户交互等。

我不建议将其用于“重新生成”或重新渲染 UI，因为这会带来更多麻烦。

如果您尝试使用它进行调试，有几个 SAAS 的整个业务模型都基于此，例如 HotJar 和 Sentry.io。如果您正在寻找解决方案，我建议您先检查一下。

【讨论】：

【解决方案2】：

技术上可以通过

(1) 仅在您网站的代码中使用 addEventListener（如果不使用，您还必须遍历所有 on- 属性并扫描内联处理程序，这非常痛苦）

(2) 使用自定义处理程序覆盖addEventListener 原型，该处理程序在触发时将唯一标识单击的信息存储在数组中（例如，保存触发事件的名称和元素的完整选择器字符串事件被调度到，如果你需要它，还有页面加载后的时间）

(3) 需要时，将数组保存在某处

(4) 为了模拟用户之前的操作，检索数组，然后遍历它。对于每个操作，在需要的时候创建一个事件并将其分派给唯一的选择器。

但这真的非常非常令人费解。对于页面上显示的内容，单一的事实来源会更有意义。要保存状态，只需序列化保存数据的对象。要恢复状态，请检索对象并根据其内容进行渲染。

【讨论】：